Dialog
A modal for a short, focused task that needs the reader's full attention, such as editing one record. It traps focus, closes on Escape and returns focus to the trigger.
bunx --bun shadcn@4.17.0 add @waimakers/dialog- npm dependencies
- @base-ui/react@1.9.0lucide-react@1.33.0
From the registry
A named, scrollable modal with a focus trap, Escape dismissal and focus return. The close control is present by default. The raised surface and overlay shadow use brand tokens.
Examples
With a form
A named dialog around a small form. Cancel and the close button both return focus to the trigger.
Saving and errors
Save shows its loading state while the request runs. A failure keeps the dialog open with the error beside the field that caused it.
Long content
Content taller than the screen scrolls inside the dialog, so the page behind never moves.
States
A disabled trigger cannot open the dialog. The focused trigger shows the shared text-colour ring.