Preview
Code
"use client"
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuTrigger,
} from "@/components/ui/preskok-ui/context-menu"
export function ContextMenuPreskokDemo() {
return (
<ContextMenu>
<ContextMenuTrigger className="grid h-28 w-56 place-content-center rounded-lg border-2 border-dashed">
Right click me
</ContextMenuTrigger>
<ContextMenuContent className="min-w-56">
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuItem isDisabled>Forward</ContextMenuItem>
<ContextMenuItem>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Bookmark</ContextMenuItem>
<ContextMenuItem>Save as</ContextMenuItem>
<ContextMenuItem>
Select all
<ContextMenuShortcut keys="⌘A" />
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>View source</ContextMenuItem>
<ContextMenuItem>Inspect Accessibility</ContextMenuItem>
<ContextMenuItem>Inspect</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}
Installation
pnpmnpmyarnbunpnpm dlx preskok-ui@latest add context-menu
Usage
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/preskok-ui/context-menu"
export function ContextMenuDemo() {
return (
<ContextMenu>
<ContextMenuTrigger className="rounded border px-3 py-2">
Right click me
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Copy</ContextMenuItem>
<ContextMenuItem>Paste</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem intent="danger">Delete</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}