Accessible modal dialog component built on Radix UI primitives, providing a composable set of parts for building dialogs with built-in animations, overlay, and keyboard/focus management. ## Key Components | Export | Description | |---|---| | `Dialog` | Root component managing open/close state | | `DialogTrigger` | Element that opens the dialog on interaction | | `DialogContent` | Centered modal panel with fade/zoom animations and an auto-rendered close button | | `DialogOverlay` | Blurred backdrop rendered behind the content | | `DialogPortal` | Renders dialog outside the DOM tree via a portal | | `DialogClose` | Button that closes the dialog | | `DialogHeader` | Layout wrapper for title/description at the top | | `DialogFooter` | Layout wrapper for action buttons at the bottom | | `DialogTitle` | Accessible title using `text-h3` styling | | `DialogDescription` | Accessible description using muted `text-h6` styling | ## Usage Example ```typescript import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, } from "@/components/ui/dialog" export function ConfirmDialog() { return (

Open Dialog Confirm Action Are you sure you want to proceed? This cannot be undone. Cancel Confirm

) } ``` > `DialogContent` automatically renders `DialogOverlay` and a close (`X`) button — no need to add them manually. All components accept a `className` prop for Tailwind customization.