Components
Loading preview...
This is context menu
npx shadcn@latest add https://21st.dev/r/lyanchouss/new-context-menu"use client";
import { Copy, PencilLine, Share2, Trash2 } from "lucide-react";
import { ContextMenu, type ContextMenuItem } from "@/components/ui/context-menu";
const items: ContextMenuItem[] = [
{
label: "Rename",
icon: <PencilLine className="size-3.5" />,
shortcut: "R",
},
{
label: "Duplicate",
icon: <Copy className="size-3.5" />,
shortcut: "Cmd+D",
separatorAfter: true,
},
{
label: "Share",
icon: <Share2 className="size-3.5" />,
shortcut: "S",
},
{
label: "Delete",
icon: <Trash2 className="size-3.5" />,
shortcut: "Del",
destructive: true,
},
];
export function ContextMenuPreview() {
return (
<div className="flex min-h-screen items-center justify-center p-8">
<ContextMenu className="w-full max-w-lg" items={items}>
<div className="w-full border border-border/80 px-6 py-12 text-center">
<p className="font-medium text-[15px] tracking-[-0.02em] text-foreground">
Right-click this workspace block
</p>
<p className="mt-2 text-[14px] leading-6 text-muted-foreground/80">
Inspect spacing, shortcuts, separators, and the destructive row in the same menu.
</p>
</div>
</ContextMenu>
</div>
);
}
export default ContextMenuPreview;