Dialog

A window over the page that keeps focus until it is closed. For a question that needs an answer before anything else, use Alert dialog.

Installation

npx rasengan-ui add dialog

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/dialog.json

It installs Button too.

Usage

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
 
export function Invite() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>Invite a teammate</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Invite a teammate</DialogTitle>
          <DialogDescription>They get access to every project in this workspace.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
          <Button>Send invite</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Controlled

Pass open and onOpenChange to open the dialog from elsewhere, or to close it once a form is saved.

const [open, setOpen] = useState(false);
 
<Dialog open={open} onOpenChange={setOpen}>
  …
</Dialog>

Sizes

size on DialogContent sets its width from the sm breakpoint: sm, default, lg, or full, which fills the window less a margin and scrolls its body. Below sm, every size takes the window's width less a margin.

<DialogContent size="lg">…</DialogContent>

Without the close button

DialogContent draws a close button in its corner. Pass showCloseButton={false} when the footer already has one.

Villages

Open a dialog in a cell: it renders in a portal on <body>, yet wears that cell's village, because the cell is a VillageScope.

Accessibility

• The popup is a dialog, named by DialogTitle and described by DialogDescription.
• Opening moves focus into the dialog, Tab stays inside it, and closing returns focus to the trigger.
• Esc and a click on the backdrop close it; the page behind can't be scrolled or reached by screen readers.
• The close button in the corner is labelled "Close".

API reference

The parts of Base UI's Dialog, styled: