Components
Components
Dialog
Modal surface for confirmations and focused tasks.
newfree
Install
@hewnui/ui · hewnui
# Available at launch: npm install @hewnui/ui
# Available at launch: pnpm add @hewnui/ui
# Available at launch: yarn add @hewnui/ui
# Available at launch: bun add @hewnui/ui
# Available at launch: npx hewnui@latest add dialog
Dialog pairs a trigger with a dismissible modal. Content uses compound parts
for title, body, and actions.
import {
Button,
Dialog,
DialogActions,
DialogBody,
DialogTrigger,
} from "@hewnui/ui";
<DialogTrigger>
<Button>Open</Button>
<Dialog title="Confirm">
<DialogBody>Archive this draft?</DialogBody>
<DialogActions>
<Button variant="secondary" slot="close">Cancel</Button>
<Button slot="close">Confirm</Button>
</DialogActions>
</Dialog>
</DialogTrigger>
- Dialog role and labeled title
- Escape and outside click dismiss
- Focus moves into the modal while open
API reference
Props for Dialog from @hewnui/ui/dialog. Generated from component types — not hand-written.