Dialog

npx inkui add dialog

import { useState } from 'react';
import { Dialog } from './components/ui/dialog';
 
export default function App() {
  const [open, setOpen] = useState(true);
 
  return (
    <Dialog
      isOpen={open}
      title="Deploy to production?"
      message="This will push changes to all users."
      actions={[
        { label: 'Cancel',  value: 'cancel'  },
        { label: 'Confirm', value: 'confirm' },
      ]}
      onAction={(action) => {
        if (action.value === 'confirm') deploy();
        setOpen(false);
      }}
      onDismiss={() => setOpen(false)}
    />
  );
}

<Dialog
  isOpen={open}
  title="Delete project?"
  message={"This action cannot be undone.\nAll data will be permanently deleted."}
  actions={[
    { label: 'Keep',   value: 'keep'   },
    { label: 'Delete', value: 'delete' },
  ]}
  onAction={handleAction}
  onDismiss={() => setOpen(false)}
/>

<Dialog
  isOpen={showInfo}
  title="Update available"
  message="InkUI v0.4.0 is available. Run npx inkui update."
  actions={[{ label: 'OK', value: 'ok' }]}
  onAction={() => setShowInfo(false)}
/>

<Dialog
  isOpen={open}
  title="Confirm"
  message="Are you sure?"
  actions={actions}
  onAction={handleAction}
  borderStyle="double"
/>