# Dots Menu

An overflow menu triggered by a three-dot icon that reveals additional actions in a dropdown.

---

## Default

```tsx
import { DotsMenu, MenuItem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <DotsMenu>
      <MenuItem>View Build Logs</MenuItem>
      <MenuItem>View Projects</MenuItem>
      <MenuItem>View Analytics</MenuItem>
    </DotsMenu>
  );
}
```

## Sizes

```tsx
import { DotsMenu, MenuItem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex items-start gap-6">
      <DotsMenu iconSize={10}>
        <MenuItem>View Build Logs</MenuItem>
        <MenuItem>View Projects</MenuItem>
        <MenuItem>View Analytics</MenuItem>
      </DotsMenu>
      <DotsMenu iconSize={12}>
        <MenuItem>View Build Logs</MenuItem>
        <MenuItem>View Projects</MenuItem>
        <MenuItem>View Analytics</MenuItem>
      </DotsMenu>
      <DotsMenu iconSize={18}>
        <MenuItem>View Build Logs</MenuItem>
        <MenuItem>View Projects</MenuItem>
        <MenuItem>View Analytics</MenuItem>
      </DotsMenu>
    </div>
  );
}
```

## Disabled

```tsx
import { DotsMenu, MenuItem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <DotsMenu disabled>
      <MenuItem>View Build Logs</MenuItem>
      <MenuItem>View Projects</MenuItem>
      <MenuItem>View Analytics</MenuItem>
    </DotsMenu>
  );
}
```

## Disabled Menu Item

```tsx
import { DotsMenu, MenuItem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <DotsMenu>
      <MenuItem>View Build Logs</MenuItem>
      <MenuItem disabled>View Projects</MenuItem>
      <MenuItem>View Analytics</MenuItem>
    </DotsMenu>
  );
}
```