Overlays

ContextMenu

Commands on right-click or long press.

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub } from "@flinbu/seed";

On a token row

Right-click a token here

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@flinbu/seed";
import { Copy, Pencil, Trash2 } from "lucide-react";

<ContextMenu>
  <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-xl border border-dashed border-primary text-secondary body-body-3-regular">Right-click a token here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem icon={<Pencil />} shortcut="R">Rename</ContextMenuItem>
    <ContextMenuItem icon={<Copy />} shortcut="⌘D">Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem icon={<Trash2 />} destructive>Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Use it for

Shortcuts for actions that also live in the UI.

Use something else for

The only way to reach a command.

Props

Prop	Type	Default	Description
`Item: icon`	`IconProp`	–	Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
`Item: shortcut`	`ReactNode`	–	Shown at the end.
`Item: destructive`	`boolean`	–	Red, for deleting.
`Item: onSelect`	`(e: Event) => void`	–	Runs the command.

Accessibility

Built on Radix ContextMenu: Shift+F10 or the menu key opens it from the keyboard; the same rows as DropdownMenu.