Dialog

Dialog pulls people off the page to finish one task, such as renaming a project or inviting a member. It traps focus and blocks the page until it closes. Long content scrolls inside while the header and footer stay put.

Install

bashnpx shadcn@4.18.0 add @siteplane/dialog

Import it from @/siteplane/components/dialog. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Alert Dialog: Pick Alert Dialog instead for a yes-or-no decision, such as a delete confirmation, that must be answered before continuing.
• vs Sheet: Pick Sheet instead for a longer form that slides in from an edge and keeps more of the page context visible.
• vs Popover: Pick Popover instead for light, non-modal content anchored to its trigger.
• vs Drawer: Pick Drawer instead on mobile when the panel should come from an edge and close with a swipe.

Rules

• Include DialogTitle, plus DialogDescription when it helps, so assistive technology can name the dialog.
• DialogPopup includes a portal and backdrop; don't add another around it.
• Never wrap a submit button in DialogClose; close the dialog yourself after the submission succeeds.
• Use open and onOpenChange when a menu item or other code opens the dialog, and render it outside that menu.
• Put long content in DialogPanel so it scrolls between the header and footer.
• Pick a width with size on DialogPopup, using md or lg for two-column forms or wide tables.

Reference

• Dialog docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.