shadcn's Dialog in Notchset: the panel unrolls from the top over a scrim and rolls back up, a 32px close key and a ruled header. Plus a kicker, a before/after comparison table, and a confirm key that runs your action, traces its check and closes the dialog.
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/dialog.jsonpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/dialog.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
pnpm add @base-ui/react@^1The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Import it and pass your content. The props that matter most are listed next.
"use client";
import { Dialog, DialogCompare, DialogConfirm, DialogContent, DialogHeader, DialogKicker, DialogTitle, DialogTrigger } from "@/components/ui/notchset/dialog";
const rows = [
{ metric: "Pass rate", before: "81.4%", after: "88.9%", delta: "+7.5" },
{ metric: "P50 latency", before: "3.2s", after: "1.9s", delta: "−1.3s" },
];
export function PromoteDialog({ promote }: { promote: () => Promise<void> }) {
return (
<Dialog>
<DialogTrigger>Promote to prod</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogKicker>Planner-v14 · staging → prod</DialogKicker>
<DialogTitle>Promote to production?</DialogTitle>
</DialogHeader>
<DialogCompare rows={rows} population="1,200 cases" beforeLabel="Atlas 2" afterLabel="Atlas 3 Flash" />
<DialogConfirm onConfirm={promote} loadingLabel="Promoting" successLabel="Live">
Promote
</DialogConfirm>
</DialogContent>
</Dialog>
);
}Dialog–
as the primitiveopen, defaultOpen, onOpenChange.
DialogContent showCloseButton / closeLabel / container–
boolean / string / elementAs shadcn, plus where it portals.
DialogKicker–
pThe mono line above the title.
DialogCompare–
{ rows, population, beforeLabel, afterLabel, changeLabel? }The comparison table; deltas in signal.
DialogConfirm–
Button props + onConfirm, closeDelayRuns onConfirm (a Promise), shows loading then done, closes after closeDelay (1000ms). Focus lands here.
components/ui/notchset/dialog.tsx