Vuer UIKit | FortyFive Labs

Displays a menu to the user when they right-click on an element. Built on top of Radix UI Context Menu.

Basic Usage

Right-click on the trigger area to open the context menu.

Right click here

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuTrigger,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "@vuer-ai/vuer-uikit";

function App() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-uk-md border border-dashed border-line-primary text-uk-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem className="" inset>
          Back
          <ContextMenuShortcut className="">⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem className="" inset disabled>
          Forward
          <ContextMenuShortcut className="">⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem className="" inset>
          Reload
          <ContextMenuShortcut className="">⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator className="" />
        <ContextMenuCheckboxItem className="" checked>
          Show Bookmarks Bar
          <ContextMenuShortcut className="">⌘⇧B</ContextMenuShortcut>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem className="" checked={false}>
          Show Full URLs
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator className="" />
        <ContextMenuRadioGroup value="pedro">
          <ContextMenuRadioItem className="" value="pedro">
            Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem className="" value="colm">
            Colm Tuite
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

With Icons

Add icons to menu items for better visual clarity.

Right click here

import { User, Settings, LogOut } from "lucide-react";

function App() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>My Account</ContextMenuLabel>
        <ContextMenuGroup>
          <ContextMenuItem>
            <User className="size-4" />
            Profile
            <ContextMenuShortcut>⇧⌘P</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            <Settings className="size-4" />
            Settings
            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
          </ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <LogOut className="size-4" />
          Log out
          <ContextMenuShortcut>⇧⌘Q</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

With Checkboxes

Use checkbox items for toggleable options.

Right click here

function App() {
  const [showStatusBar, setShowStatusBar] = useState(true);
  const [showActivityBar, setShowActivityBar] = useState(false);
  const [showPanel, setShowPanel] = useState(false);

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>Appearance</ContextMenuLabel>
        <ContextMenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Status Bar
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={showActivityBar}
          onCheckedChange={setShowActivityBar}
        >
          Activity Bar
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={showPanel}
          onCheckedChange={setShowPanel}
        >
          Panel
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

With Radio Buttons

Use radio items for mutually exclusive options.

Right click here

function App() {
  const [position, setPosition] = useState("bottom");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>Panel Position</ContextMenuLabel>
        <ContextMenuRadioGroup value={position} onValueChange={setPosition}>
          <ContextMenuRadioItem value="top">Top</ContextMenuRadioItem>
          <ContextMenuRadioItem value="bottom">Bottom</ContextMenuRadioItem>
          <ContextMenuRadioItem value="right">Right</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

API Reference

ContextMenu

Root component that provides context menu functionality.

Prop	Type	Default	Description
`onOpenChange`	`(open: boolean) => void`	-	Callback when the open state changes
`modal`	`boolean`	`true`	Whether to render the menu in a modal

ContextMenuTrigger

The element that triggers the context menu on right-click.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element
`disabled`	`boolean`	`false`	Disable the context menu

ContextMenuContent

The content container for menu items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Horizontal alignment
`sideOffset`	`number`	`0`	Distance from the trigger

ContextMenuItem

An individual menu item.

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Add left padding for alignment
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style variant
`disabled`	`boolean`	`false`	Disable the item
`onSelect`	`(event: Event) => void`	-	Callback when selected

ContextMenuCheckboxItem

A checkbox menu item.

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	-	Checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checked state changes
`disabled`	`boolean`	`false`	Disable the item

ContextMenuRadioGroup

Container for radio items.

Prop	Type	Default	Description
`value`	`string`	-	Selected value
`onValueChange`	`(value: string) => void`	-	Callback when value changes

ContextMenuRadioItem

A radio menu item.

Prop	Type	Default	Description
`value`	`string`	-	The value of the item
`disabled`	`boolean`	`false`	Disable the item

ContextMenuLabel

A label for grouping menu items.

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Add left padding for alignment

ContextMenuSeparator

A visual separator between menu items.

ContextMenuShortcut

Displays keyboard shortcut text.

ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent

Components for creating nested submenus.