Components
Dialog
A modal window layered above the page content.
Dialog is built on the Base UI Dialog primitive. It renders a centered modal with a backdrop overlay and an optional close button.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/dialog.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
export default function Example() {
return (
<Dialog>
<DialogTrigger render={<Button>Open</Button>} />
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
);
}Examples
Confirmation dialog
Controlled usage
Pass open and onOpenChange to control the dialog programmatically:
const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>...</DialogContent>
</Dialog>Components
| Component | Description |
|---|---|
Dialog | Root. Accepts open, onOpenChange, defaultOpen. |
DialogTrigger | The element that opens the dialog. Use render to compose. |
DialogContent | The popup. Accepts showCloseButton (default true). |
DialogHeader | Top section with title and description. |
DialogFooter | Bottom section for actions. Accepts showCloseButton. |
DialogTitle | Accessible title. |
DialogDescription | Muted description. |
DialogClose | Closes the dialog. Use render to compose with a button. |
Changelog
- v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
- v0.1.0Restore open and close animations on every menu-family popup.patch
Last updated on