

<Demo name="context-menu/demos/basic" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/context-menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/context-menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/context-menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/context-menu
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Use context menus to display actions when a user right clicks an element.

```tsx
import { ContextMenu } from '@/components/ui/context-menu'
import { MenuContent, MenuItem } from '@/components/ui/menu'
import { Popover } from '@/components/ui/popover'
```

```tsx
<ContextMenu
  overlay={
    <Popover>
      <MenuContent>
        <MenuItem>Account settings</MenuItem>
        <MenuItem>Create team</MenuItem>
        <MenuItem>Command menu</MenuItem>
        <MenuItem>Log out</MenuItem>
      </MenuContent>
    </Popover>
  }
>
  Right click me
</ContextMenu>
```

## Examples [#examples]

<Examples>
  <Example name="context-menu/demos/basic" />
</Examples>

## API Reference [#api-reference]

### ContextMenu [#contextmenu]

<Reference name="context-menu" />
