dialog
Dialog
A modal window over the page, with a header, a body that scrolls when it outgrows the screen, and a footer for actions such as save and cancel.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| Dialog | Dialog.vue | Groups all parts of the dialog. |
| DialogBody | DialogBody.vue | Holds the dialog's main content and scrolls it when the dialog outgrows the screen, keeping the header and footer in view. |
| DialogClose | DialogClose.vue | Closes the dialog. |
| DialogContent | DialogContent.vue | Holds what the dialog shows while open. |
| DialogDescription | DialogDescription.vue | Explains the purpose of the dialog below its title. |
| DialogFooter | DialogFooter.vue | Holds the actions of the dialog, such as confirm and cancel buttons. |
| DialogHeader | DialogHeader.vue | Groups the title and description at the top of the dialog. |
| DialogOverlay | DialogOverlay.vue | Covers the page behind the open dialog. |
| DialogScrollContent | DialogScrollContent.vue | Holds what the dialog shows while open, scrolling when the content is tall. |
| DialogTitle | DialogTitle.vue | Names the dialog. |
| DialogTrigger | DialogTrigger.vue | Opens the dialog. |
Anatomy
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogBody />
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>Styling
| Part | Recipe |
|---|---|
| DialogBody | dialog-body |
| DialogContent | dialog-content |
| DialogDescription | dialog-description |
| DialogFooter | dialog-footer |
| DialogHeader | dialog-header |
| DialogOverlay | dialog-overlay |
| DialogScrollContent | dialog-content |
| DialogScrollContent | dialog-overlay |
| DialogTitle | dialog-title |
Install
Writes 12 files into components/ui/dialog/. For agents, npx @frontic/ui docs dialog prints this reference as markdown; the MCP server serves the same.
- Installs with it
- button
- npm packages
- @lucide/vue
- @vueuse/core
- class-variance-authority
- reka-ui
Built from
API reference
Dialog Dialog.vue
Groups all parts of the dialog.
| Prop | Type | Default | |
|---|---|---|---|
| open | boolean | — | |
| defaultOpen | boolean | false | |
| modal | boolean | true | |
| unmountOnHide | boolean | true | |
| Event | Payload | |
|---|---|---|
| update:open | value: boolean | |
| Slot | Slot props | |
|---|---|---|
| default | { open: boolean; close: () => void; } | |
DialogBody DialogBody.vue
DialogClose DialogClose.vue
DialogContent DialogContent.vue
DialogDescription DialogDescription.vue
DialogHeader DialogHeader.vue
DialogOverlay DialogOverlay.vue
DialogScrollContent DialogScrollContent.vue
DialogTitle DialogTitle.vue
DialogTrigger DialogTrigger.vue
Example