Primitive · CLI
Dialog
Modal dialog on Base UI with Mira surfaces and short settle motion.
Preview
npx shadcn@latest add @atroui/dialogClosed · waiting
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/dialogSource lands in your repo. Installation · Registry
Usage
Open dialogs for a single focused task. Prefer a short title, one sentence of context, and a clear primary action. Escape and the close control always dismiss.
tsx
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
<Dialog>
<DialogTrigger render={<Button />}>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Rename project</DialogTitle>
<DialogDescription>One primary action on this surface.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
<DialogClose render={<Button />}>Save</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>Dialog