Components
Loading preview...
here is indevui context menu demo
npx shadcn@latest add https://21st.dev/r/ln-dev7/indevui-context-menu// demo.tsx
'use client';
import * as React from 'react';
import {
Cloud,
CreditCard,
Github,
Keyboard,
LifeBuoy,
LogOut,
Mail,
MessageSquare,
Plus,
PlusCircle,
Settings,
User,
UserPlus,
Users,
} from 'lucide-react';
import ContextMenu, {
ContextMenuContent,
ContextMenuGroup,
ContextMenuItem,
ContextMenuLabel,
ContextMenuPortal,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
ContextMenuCheckboxItem,
} from '@/components/ui/indevui-context-menu';
function ContextMenuDemo() {
const [showStatusBar, setShowStatusBar] = React.useState(true);
const [showActivityBar, setShowActivityBar] = React.useState(false);
const [panel, setPanel] = React.useState('console');
return (
<div className="flex h-64 items-center justify-center">
<ContextMenu>
<ContextMenuTrigger className="flex h-48 w-72 items-center justify-center rounded-md border border-dashed text-sm">
Right-click here
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem inset>
Back
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset disabled>
Forward
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset>
Reload
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
<ContextMenuPortal>
<ContextMenuSubContent className="w-48">
<ContextMenuItem>
Save Page As...
<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
<ContextMenuItem>Name Window...</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Developer Tools</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuPortal>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
Show Status Bar
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled
>
Show Activity Bar
</ContextMenuCheckboxItem>
<ContextMenuSeparator />
<ContextMenuRadioGroup value={panel} onValueChange={setPanel}>
<ContextMenuLabel inset>Panel</ContextMenuLabel>
<ContextMenuRadioItem value="console">Console</ContextMenuRadioItem>
<ContextMenuRadioItem value="terminal">Terminal</ContextMenuRadioItem>
<ContextMenuRadioItem value="output">Output</ContextMenuRadioItem>
</ContextMenuRadioGroup>
<ContextMenuSeparator />
<ContextMenuItem variant="destructive" inset>
Delete
<ContextMenuShortcut>⌫</ContextMenuShortcut>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</div>
);
}
export { ContextMenuDemo as DemoOne };