Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard Dialog for React

A share dialog with the read-only link https://example.com/share/abc123, a Copy button beside it, and Close.

Open Dialog shows Share this link. A read-only field holds https://example.com/share/abc123, with Copy beside it. Close sits under the field.

Use it to hand someone a link without leaving the page. Copy does not write to the clipboard until you add that. A share tied to one button can be a Popover. In React, Base UI does not copy the link.

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

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Open Dialog
  </DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Share this link</DialogTitle>
      <DialogDescription>
        Anyone who has this link will be able to view this document.
      </DialogDescription>
    </DialogHeader>
    <div className="flex items-center gap-2">
      <Input
        aria-label="Link"
        className="flex-1"
        readOnly
        type="text"
        value={shareLink}
      />
      <Button size="sm">Copy</Button>
    </div>
    <DialogFooter className="sm:justify-start">
      <DialogClose render={<Button variant="secondary" />}>Close</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

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.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline", size="sm" and variant="secondary". The rest is on the Button page.

Input

Sets aria-label="Link", readOnly, type="text" and value={shareLink}. The rest is on the Input page.

All 17 dialog examples