shadcn's Context Menu in Notchset: a crosshair pops in where you right-click and the menu unrolls from the corner nearest it, a header names what it acts on, one highlight glides between 32px rows, and an inline branch unfolds a choice under its item.
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/context-menu.jsonpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/context-menu.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 { ContextMenu, ContextMenuContent, ContextMenuHeader, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/notchset/context-menu";
export function RunRow({ runId, onOpenTrace, onDelete }: { runId: string; onOpenTrace: () => void; onDelete: () => void }) {
return (
<ContextMenu>
<ContextMenuTrigger>
<div className="border px-3 py-2 font-mono text-xs">{runId} · PLANNER · 2.1S</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuHeader node="ok" meta="2.1S">
{runId.toUpperCase()}
</ContextMenuHeader>
<ContextMenuItem onClick={onOpenTrace}>
OPEN TRACE<ContextMenuShortcut>↵</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem variant="destructive" onClick={onDelete}>
DELETE RUN
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}ContextMenuContent–
collisionPadding, containerOpens at the pointer, unrolling from the nearest corner.
ContextMenuHeader–
{ node?, meta? }The 34px header: a status node, what it acts on, a reading.
ContextMenuItem variant–
"default" | "destructive"Destructive is signal text with a tint highlight.
ContextMenuBranch–
{ label, meta?, value, onValueChange }An inline choice: options (ContextMenuBranchItem) unfold under it.
ContextMenuShortcut / ContextMenuMeta–
spanMuted readings at the end of a row.
components/ui/notchset/context-menu.tsx