Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/dialog
Usage
import { Dialog } from "@/components/ui/dialog";<Dialog
isOpen={true}
title="Save changes?"
onConfirm={() => save()}
onCancel={() => discard()}
>
<Text>You have unsaved changes. Would you like to save them?</Text>
</Dialog>API Reference
Dialog
| Prop | Type | Default |
|---|---|---|
title | string | - |
children | ReactNode | required |
confirmLabel | string | "OK" |
cancelLabel | string | "Cancel" |
onConfirm | () => void | - |
onCancel | () => void | - |
variant | "default" | "danger" | "default" |
isOpen | boolean | false |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard:
Tab/Shift+Tabmove through enabled controls inside the active scope;Enter/Spaceactivate the focused control;Escapecloses only the topmost active surface and restores focus. - Focus and composition: While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.