# Shadcn Dialog blocks

> Dialog components for modal windows, alerts, confirmations, and content overlays.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/dialog
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/dialog.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/dialog.md
- Blocks: 14
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- New record forms over the current page: a project, a quick task or entry, or a finance account
- Access flows: email invites with a role, an app picker and the consent step before a sync
- Pickers and account tasks: a time span, a starter template, settings, a checklist, cancellation or help

## When not to use

- A plain modal shell you fill with your own title, body and buttons: use [Dialog](https://web.dev.reui.io/components/dialog.md) (`get_component("dialog")`)
- A data entry layout that sits in the page itself rather than over it: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- A one question confirm, such as deleting a record, with nothing to fill in: use [Alert Dialog](https://web.dev.reui.io/components/alert-dialog.md) (`get_component("alert-dialog")`)

## Agent notes

- Each root renders its own launch `Button` and starts `open` as true in `useState`; swap in your trigger and start it closed
- Primary actions only close through `setOpen`, fire a sonner `toast` or have no handler; wire your submit and API call there
- Each page.tsx centers the root in a `min-h-svh` main with an `sr-only` h1; mount only the root component inside your page

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 2 of 14 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 14 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 1 of 14 blocks

## Blocks

- [Duration Picker](https://web.dev.reui.io/blocks/application/dialog/dialog-1.md): Duration picker dialog with start and end time selects plus quick preset toggles. Best for a start and end time on a 30 minute grid, where 6 presets keep the start, move the end and wrap past midnight.
- [Bulk Email Invite](https://web.dev.reui.io/blocks/application/dialog/dialog-2.md): Workspace invite dialog with multi-email input and role select dropdown. Best for one pasted list of comma or space separated emails, deduped into a live send count under a single shared role.
- [Cancel Plan Survey](https://web.dev.reui.io/blocks/application/dialog/dialog-3.md): Plan cancellation dialog with multi-select reason checkboxes, feedback textarea, and warning banner. Best for a churn survey of 8 reason checkboxes and a note, where Keep plan gets first focus and Cancel plan waits for a reason.
- [Launch Checklist](https://web.dev.reui.io/blocks/application/dialog/dialog-4.md): Workspace launch checklist dialog with accordion sections and inline-editable fields. Best for a 3 section launch checklist in an accordion, with rows that save on Enter and discard on Escape, and apps that flip to Connected.
- [Template Library](https://web.dev.reui.io/blocks/application/dialog/dialog-5.md): Wide template library dialog with category rail, live search, and selectable template cards. Best for a wide 2 pane gallery: a use case rail beside searchable thumbnail cards, with a ready count and the pick in the footer.
- [Connect App Picker](https://web.dev.reui.io/blocks/application/dialog/dialog-6.md): App connection dialog with searchable integration grid and single-select checkbox cards. Best for a grid of 12 brand logo tiles with one round pick, search focused on open and a full width Add app button.
- [Support Hub](https://web.dev.reui.io/blocks/application/dialog/dialog-7.md): Help and support hub dialog with self-serve routes plus advisor and direct-desk escalation cards. Best for a support menu with no inputs: 3 self serve route rows above an advisor booking card and an email desk card.
- [Per-Person Invite](https://web.dev.reui.io/blocks/application/dialog/dialog-8.md): Multi-row collaborator invite dialog with per-row email field and role select. Best for a row per person with its own email and role, rows added or removed, and one invalid address blocking the send.
- [Project With Cover](https://web.dev.reui.io/blocks/application/dialog/dialog-9.md): Create project dialog with cover image upload and status, priority, assignee, and label comboboxes. Best for a project form under a drag and drop cover image capped at 5 MB, where Create needs a name and at least 1 assignee.
- [Account Settings Modal](https://web.dev.reui.io/blocks/application/dialog/dialog-10.md): Tabbed account settings dialog with sidebar rail for profile, workspace, team and billing. Best for a 5 tab settings modal whose side rail becomes a scrolling strip on small screens, with the title following the tab.
- [Finance Account Setup](https://web.dev.reui.io/blocks/application/dialog/dialog-11.md): Two-pane finance account creation dialog with live account card preview. Best for a 3 field form beside a gradient card preview, with the tag kept to 22 lowercase characters and the statement label to 18 capitals.
- [Quick Create Entry](https://web.dev.reui.io/blocks/application/dialog/dialog-12.md): Tabbed create-entry dialog with status, assignee, due date, priority and label comboboxes. Best for a composer of 5 entry types in tabs, each keeping its own title and notes draft, with due date presets and a 2 month calendar.
- [Project Templates](https://web.dev.reui.io/blocks/application/dialog/dialog-13.md): Full-screen create project dialog with template prefill and multi-select labels. Best for a near full screen create view with a Back button, where 3 templates prefill the name, key, brief, status and priority.
- [OAuth Consent](https://web.dev.reui.io/blocks/application/dialog/dialog-14.md): OAuth connection consent dialog with provider logo rail and radio sync-scope picker. Best for a narrow consent step: 2 provider logos joined by dots, 2 permission notes and a 2 option sync scope radio before Continue.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.