Use ContextMenu to show actions on right-click.
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@tile-ui/react';
export default function ContextMenuDemo() {
return (
<ContextMenu>
<ContextMenuTrigger>
Registry install
pnpm dlx shadcn@latest add @tile-ui/context-menu
Package usage
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@tile-ui/react';
<ContextMenu>
<ContextMenuTrigger>Right-click me</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Copy</ContextMenuItem>
<ContextMenuItem>Paste</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
Highlights
- Trigger and content
- Item, checkbox, and radio
- Sub menus
Registry dependencies
| Item | Purpose |
|---|
context-menu | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
asChild | boolean | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
variant | 'default' | 'destructive' | — |
disabled | boolean | — |
onSelect | (event: Event) => void | — |
| Prop | Type | Default |
|---|
checked | boolean | — |
defaultChecked | boolean | — |
onCheckedChange | (checked: boolean) => void | — |
disabled | boolean | — |
| Prop | Type | Default |
|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
disabled | boolean | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
disabled | boolean | — |