Radix dropdown menu with icons, shortcuts, checkbox items, labels and a destructive item. Keyboard-driven. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/layro-dropdown-menu";
import { Copy, Download, MoreHorizontal, Send, Trash2 } from "lucide-react";
/* The "…" menu: actions with icons and shortcuts, a checkbox item for a
view option, and a destructive item that looks like one. Fully
keyboard-driven; type a letter to jump. */
export default function DropdownMenuDemo() {
const [showTax, setShowTax] = React.useState(true);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Invoice</h2>
<div className="mb-5" />
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-[13.5px] font-medium tabular-nums">INV-2026-0914</p>
<p className="text-[12px] text-muted-foreground">Northwind Studio · $89.00</p>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button type="button" aria-label="Invoice actions" className="grid size-9 place-items-center rounded-[10px] [corner-shape:squircle] ring-1 ring-inset ring-border outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"><MoreHorizontal className="size-4" /></button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>INV-2026-0914</DropdownMenuLabel>
<DropdownMenuItem shortcut="⌘D"><Copy /> Duplicate</DropdownMenuItem>
<DropdownMenuItem shortcut="⌘S"><Download /> Download PDF</DropdownMenuItem>
<DropdownMenuItem><Send /> Email to customer</DropdownMenuItem>
<DropdownMenuCheckboxItem checked={showTax} onCheckedChange={setShowTax}>Show tax column</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuItem danger><Trash2 /> Void invoice</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.