Dialog
Modal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/confirmation-checklist.json.
Usage
Examples
Checklist before an action
Confirmation with a don't-ask-again option
Confirmation layouts
Confirmation nested in a dialog
Notice with a status badge
Success summary with details
Close button and footer options
Form dialog
Scrollable content
Settings with switches
Keyboard shortcuts list
Drawer from each edge
API
18 props
Accessibility
Focus stays in the dialog and returns to its trigger. Confirmation mode focuses Cancel and blocks dismissal while a decision is pending.
Notes
- Use DialogClose for modal and sheet actions. Confirmation mode owns its actions and pending state; children and footer apply to modal and sheet variants.
Related
SheetA panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.8 examplesFieldField composes form label, description, error, and input building blocks.7 examplesPillPill renders compact category and status labels.4 examplesCheckboxCheckbox renders a token-styled binary control.6 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesKbdKbd renders keyboard keys and multi-key shortcuts.2 examples