Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Standard Dialog for React

A share dialog with a read-only link, a Copy button and a Close button.

Framework
UI library

The everyday dialog: a title, a short description, some content and a way out. This React dialog shares a link with a read-only Input, a Copy button and Close. It's shadcn.io's Dialog on Base UI.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How can people close it?

With Close, which is a DialogClose, the X in the corner, Escape, or a click outside.

How does focus work?

Focus moves into the dialog when it opens, stays inside while it's open, and returns to the trigger when it closes.

Can I stop a click outside from closing it?

Yes, for forms with unsaved changes. Pass disablePointerDismissal to Dialog. Keep Escape and the close button working.

How do I make Copy work?

Copy the link to the clipboard on click and confirm it. The Clipboard component does this with a built-in indicator.

Can a dialog open another dialog?

It can, but avoid it: a second modal on top is confusing. Change the dialog's content instead, or use a Sheet.

How does it look on mobile?

On small screens it sits at the bottom of the screen at full width, like a sheet; from sm up it's centered and capped at sm:max-w-md. Set bottomStickOnMobile to false to keep it centered everywhere.

All 17 dialog examples