Dialog

A modal window composed from Root, Trigger, Content, Header, Footer, Title, Description, and Close.

When to use

Use when: A focused task that needs the rest of the page out of the way, such as a form or a detail view.
Avoid when: The content could live on the page, or the dialog would open another dialog.

Installation

bunx shelf add dialog

The source lands in src/components/ui/dialog.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Dialog from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog.Root>
  <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>…</Dialog.Title>
      <Dialog.Description>…</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close render={<Button variant="outline" />}>Cancel</Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Button, foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.