Dialog

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Edit profile
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Update your name and username. Click save when you are done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="name">Name</Label>
            <Input id="name" defaultValue="Ada Lovelace" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="username">Username</Label>
            <Input id="username" defaultValue="@ada" />
          </div>
        </div>
        <DialogFooter>
          <DialogClose render={<Button variant="secondary" />}>
            Cancel
          </DialogClose>
          <Button>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Dialog wraps the dialog primitive of the chosen base. The Dialog root manages the open state, and DialogTrigger opens it. DialogContent renders the window in a portal over a dimmed DialogOverlay, with a close button in the top corner by default. Inside it, DialogHeader holds the DialogTitle and DialogDescription, and DialogFooter holds the actions. DialogClose closes the dialog from any element.

Use a dialog for a short, focused task such as editing a few fields. To confirm a destructive or important action that needs an explicit response, consider an alert dialog. For larger content that slides in from an edge, use a sheet or drawer.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/dialog

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add dialog

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react

2. Add the pieces it builds on: Button, use-scrollbar-gap.

3. Copy the source into components/ui/dialog.tsx:

4. Update the import paths to match your project.

Usage

import { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } 

<

<

<

Set showCloseButton={false} on DialogContent to remove the corner close button, and set closeLabel to replace its icon with a text label. Set showCloseButton on DialogFooter to add a secondary Close button to the actions. The footer stacks its actions in reverse order on small screens and aligns them to the end on wider screens.

Examples

Without close button

A dialog with no corner close button that adds a Close action to the footer instead.

Destructive

A dialog that confirms deleting a project, with a destructive action and a Cancel button.

API Reference

Accessibility

• The window has the dialog role. DialogTitle provides its accessible name and DialogDescription its accessible description.
• Opening the dialog moves focus inside it. Escape closes it and returns focus to the trigger.
• The icon-only close button has a visually hidden Close label.
• Always include a DialogTitle; hide it visually with sr-only if the design has no visible title.

Notes

• Styling hooks: data-slot values dialog-overlay, dialog-content, dialog-close, dialog-header, dialog-footer, dialog-title and dialog-description.
• data-open and data-closed drive the fade and zoom animation.
• The window is sm:max-w-md by default; override it with className on DialogContent.
• When a close button is shown, the first child of the content gets extra end padding so it does not run under the button.
• Uses the popover, secondary and muted-foreground colors, with a bg-black/50 backdrop.

Dialog opens a centered card over a dimmed scrim. DialogContent renders through a portal (inside a full-window overlay on iOS), scales and fades in, and shows a round close button in the top-right corner by default. Tapping the scrim closes the dialog.

Use it for short forms and information that the user can dismiss freely. When the user must make an explicit choice, use Alert Dialog instead.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/dialog

$ pnpm dlx @esuiss/ui@latest add dialog

$ pnpm dlx @esuiss/ui@latest add dialog --platform swift