# Context actions (goodtabs UI)

A right click or long press menu on any region, with groups, icons and shortcuts.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/context-actions.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/context-actions`

## Usage

```tsx
import { ContextActions } from "@/components/ui/context-actions"

<ContextActions
  items={[
    { type: "item", label: "Rename", icon: <PencilIcon />, shortcut: "R", onSelect: rename },
    { type: "checkbox", label: "Pinned", checked: pinned, onCheckedChange: setPinned },
    { type: "separator" },
    { type: "item", label: "Delete", onSelect: remove, destructive: true },
  ]}
>
  <FileTile />
</ContextActions>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `({ type: "item"; label; icon?; shortcut?; onSelect; destructive? } | { type: "checkbox"; label; checked; onCheckedChange } | { type: "separator" } | { type: "sub"; label; icon?; items })[]` |  | The menu, in order. Separators split items into groups. |
| children | `ReactNode` |  | The region that answers to a right click or a long press. |
| className | `string` |  | Class for the wrapper around children. |

## When to use

- Power user actions on tiles, rows, canvases and editors where a visible button would be noise
- When the same actions already exist elsewhere and the menu is a shortcut to them
- Toggles that belong to the region, such as view options, as checkbox items

## When not to use

- As the only way to reach an action; right click is not discoverable and not everyone can use it
- On small tap targets or inline text, where a long press selects instead
- For a visible trigger; use the actions menu

## Notes for agents

- It takes functions (onSelect, onCheckedChange), so the component rendering it must be a client component
- Long press on touch comes from radix, about 700ms; the wrapper is select-none so the press does not highlight text
- The wrapper is a plain div; size it with className and let children fill it
- Shortcut strings are hints only; bind the keys yourself and keep the two in sync

Docs: https://ui.goodtabs.co/components/context-actions