Overlay
Dialog
Modal window with focus trap, backdrop blur, and accessible close. Use AlertDialog for destructive confirms.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/dialog
Examples
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Scrollable Content
Long content can scroll while the header stays in view.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Dialog, DialogTrigger, DialogContent,
DialogHeader, DialogTitle, DialogDescription,
DialogBody, DialogFooter, DialogClose,
} from "@codefast/ui/dialog";
<Dialog>
<DialogTrigger asChild>…</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>…</DialogTitle>
<DialogDescription>…</DialogDescription>
</DialogHeader>
<DialogBody>…</DialogBody>
<DialogFooter>
<DialogClose>…</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
API reference
Props for each part of the component. All native element props are also forwarded.
Dialog
Root. Manages open state.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control visibility from your own state. |
| defaultOpen | boolean | false | Open on mount when uncontrolled. |
| modal | boolean | true | When true, content outside the dialog is inert. |
DialogContent
The panel. Traps focus and renders in a portal.
| Prop | Type | Default | Description |
|---|---|---|---|
| onEscapeKeyDown | (event) => void | — | Intercept the Escape-to-close behaviour. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Space | When the trigger is focused, opens the dialog. |
| Enter | When the trigger is focused, opens the dialog. |
| Tab | Cycles focus within the dialog (focus is trapped). |
| Shift+Tab | Cycles focus backwards within the dialog. |
| Esc | Closes the dialog and restores focus to the trigger. |
- Focus moves into the dialog on open and returns to the trigger on close.
- DialogTitle and DialogDescription are wired to aria-labelledby / aria-describedby.
- While open, the rest of the page is marked inert for assistive tech.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Always include a DialogTitle, even if visually concise.
- Use a Dialog for focused tasks; use AlertDialog for destructive confirmations.
Don’t
- Don’t stack multiple dialogs on top of one another.
- Don’t put long, primary content in a dialog — use a page or a sheet instead.