npx shadcn@latest add …) and rendered unedited. They inherit Vui's colors, radius, fonts, borders and dark mode from theme.css because they read the same design tokens. Add your own className to override anything.The proof: an unmodified shadcn dialog, themed by our tokens.
import { Dialog, DialogTrigger, DialogContent, DialogHeader,
DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@/components/ui/dialog";
<Dialog>
<DialogTrigger asChild><Button>Open dialog</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Invite teammate</DialogTitle>
<DialogDescription>Send an invite by email.</DialogDescription>
</DialogHeader>
<Input placeholder="you@example.com" />
<DialogFooter>
<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
<Button>Send invite</Button>
</DialogFooter>
</DialogContent>
</Dialog>Confirm destructive actions.
Side panel / drawer.
<Button>Default</Button>
<Button variant="secondary" /><Button variant="destructive" />
<Button variant="outline" /><Button variant="ghost" /><Button variant="link" />| Name | Role | Status |
|---|---|---|
| Ada Lovelace | Admin | Active |
| Alan Turing | Member | Invited |