Dialog

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/dialog

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@/components/ui/dialog";

Composition

Every part is a separate export. Dialog owns state; the rest are presentational and must appear in this order.

Dialog├── DialogTrigger└── DialogContent    ├── DialogTitle    ├── DialogDescription    └── DialogClose

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Dialog>
  <DialogTrigger render={<Button variant="secondary" />}>
    Open dialog
  </DialogTrigger>
  <DialogContent>
    <DialogTitle className="text-base font-semibold">
      Delete workspace
    </DialogTitle>
    <DialogDescription className="mt-1 text-sm text-fg-muted">
      This action is permanent and cannot be undone.
    </DialogDescription>
    <div className="mt-5 flex justify-end gap-2">
      <DialogClose render={<Button variant="ghost" />}>
        Cancel
      </DialogClose>
      <DialogClose render={<Button variant="danger" />}>
        Delete
      </DialogClose>
    </div>
  </DialogContent>
</Dialog>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

openboolean—Whether the dialog is currently open.

defaultOpenbooleanfalseWhether the dialog is initially open.

modalboolean | 'trap-focus'trueDetermines if the dialog enters a modal state when open.

onOpenChange((open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void)—Event handler called when the dialog is opened or closed.

onOpenChangeComplete((open: boolean) => void)—Event handler called after any animations complete when the dialog is opened or closed.

disablePointerDismissalbooleanfalseWhether to prevent the dialog from closing on outside presses.

actionsRefReact.RefObject<DialogRoot.Actions | null>—A ref to imperative actions.

handleDialogHandle<Payload>—A handle to associate the dialog with a trigger.

triggerIdstring | null—ID of the trigger that the dialog is associated with.

defaultTriggerIdstring | null—ID of the trigger that the dialog is associated with.

DialogTrigger

PropTypeDefaultDescription

handleDialogHandle<Payload>—A handle to associate the trigger with a dialog.

payloadPayload—A payload to pass to the dialog when it is opened.

idstring—ID of the trigger.

DialogContent

PropTypeDefaultDescription

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Dialog — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-xlDialogContent

--fgDialogContent

--lineDialogContent

--shadow-overlayDialogContent

--surface-raisedDialogContent

Source

src/components/ui/dialog/dialog.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Dialog

On this page