Question 1

What is the Dialog?

Accepted Answer

shadcn.io's Dialog is a modal window over the page for a focused task. It comes with DialogTrigger, DialogHeader, DialogTitle, DialogDescription, DialogFooter and DialogClose parts, adds a close button in the corner, traps focus while it's open and returns it to the trigger when it closes. Each example in this gallery is one small file built from those parts.

Question 2

Are these dialog examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Dialog, Alert Dialog, Drawer or Sheet: which one?

Accepted Answer

A Dialog for a focused task people can dismiss at any time, like a form. An Alert Dialog when they must make a decision before continuing. A Sheet for side panels such as filters or settings, and a Drawer for panels that slide up from the bottom on mobile.

Question 4

When should I use a page instead of a dialog?

Accepted Answer

When the task is long, has several steps people come back to, or needs its own URL to share. Dialogs suit tasks of a minute or so that keep people in context.

Question 5

How do I put a form in a dialog?

Accepted Answer

Lay the fields out with Field and FieldGroup between DialogHeader and DialogFooter, as the sign-in, sign-up, card details and profile examples do. Each field's label is tied to its control, and the footer holds Cancel as a DialogClose next to the submit button.

Question 6

How do I show long content?

Accepted Answer

Give the content a fixed or maximum height and let only it scroll, so the title and the buttons stay in view. The scrollable examples use a Scroll Area, and one keeps a bordered header above the scrolling text.

Question 7

How do I keep the dialog open while a request runs?

Accepted Answer

Control the open state, show a loading state on the submit button, and close the dialog from your handler once the request succeeds. On failure, keep it open and show the error inside it.

Question 8

How do I install a dialog example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Dialog component, and the Field, Input, Checkbox, Radio Group, Input OTP, Rating or Scroll Area components the example uses.

Question 9

How do I make the dialog wider?

Accepted Answer

Set a max width on the content with a class such as sm:max-w-lg or sm:max-w-2xl, as the examples do. On small screens the dialog sits at the bottom at full width.

Question 10

How do I open a dialog from code or a menu?

Accepted Answer

Control it: pass the open state and update it in the change handler, then set it from a menu item's select handler or anywhere else. Each example's code uses the right props for the page you're on.

Question 11

What are dialog examples built on?

Accepted Answer

shadcn.io's Dialog, with Field, Input, Textarea, Checkbox, Radio Group, Input OTP, Rating, Avatar and Scroll Area in some examples, styled with Tailwind CSS and Lucide icons. In React it's built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 12

Are dialog examples accessible?

Accepted Answer

Yes. Every dialog has a title that names it, traps focus while open, closes on Escape and returns focus to the trigger. Icon-only buttons have an aria-label, and decorative icons are hidden from screen readers.

Question 13

Do the examples work with server rendering?

Accepted Answer

Yes. The trigger renders on the server; the dialog's content mounts in the browser when it opens.

Dialog Examples

Card Details

Checkout

Delete Confirmation

Edit Profile

Feedback

Invite Team Members

Newsletter

Onboarding

OTP Code

Plan Selection

Rating

Scrollable

More component examples

Drawer

Dropdown Menu

Hover Card

Popover

Sheet

Tooltip

Alert Dialog

Context Menu

Dialog examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every dialog example. One prompt away.