Dialog - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/dialog

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description goes here.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Examples

With Form

Edit profile dialog with form.

Custom Close

Dialog with custom close button.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	The controlled open state.
`defaultOpen`	`boolean`	—	The default open state.
`onOpenChange`	`(open: boolean) => void`	—	Event handler for open state changes.