Ravox KitOverlays
Dialog
A modal window built on the browser's <dialog>: the page behind becomes inert, focus is trapped and returns to whoever opened it. Closes on Esc, on the backdrop and on the X; header and footer stay fixed while the body scrolls inside when the content is tall.
Settings
Toggles
Examples
Form that closes on save
Controlled, opened from outside
Estado: fechado
Tall content scrolling inside
Locked while saving
Installation
The command creates components/ui/dialog.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add dialogProps
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | <Dialog>: open or closed (controlled mode). Use together with onOpenChange. |
| defaultOpen | boolean | false | <Dialog>: starts open (uncontrolled mode). |
| onOpenChange | (open: boolean) => void | — | <Dialog>: called on every open and close, whether from the trigger, Esc, the backdrop or a button. |
| size | "sm" | "md" | "lg" | "full" | "md" | <DialogContent>: width of 384, 512 or 672px, or almost the whole screen. On mobile it takes the width minus 12px on each side. |
| closeOnOutsideClick | boolean | true | <DialogContent>: clicking the backdrop closes it. When off, the dialog gives a small nudge as a warning instead. |
| locked | boolean | false | <DialogContent>: Esc and the backdrop don't close it (e.g. while saving). |
| hideClose | boolean | false | <DialogContent>: hides the X in the corner. |
| asChild | boolean | false | <DialogTrigger> and <DialogClose>: uses your own element instead of the <Button>. |
| data-autofocus | atributo | — | On any element inside: receives focus on open (the default is the first focusable one). |
| useDialog() | { open, show, close } | — | Hook to close from inside (e.g. after saving the form). |
| Peças | DialogHeader · DialogTitle · DialogDescription · DialogBody · DialogFooter | — | The title becomes the accessible name and the description is read along with it. The body scrolls inside; the header and footer lines only appear when there is something to scroll. |