# Dock (goodtabs UI)

A floating pill of icon buttons with tooltips, a hover lift and a dot on the active one.

## Install

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

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

## Usage

```tsx
import { Dock } from "@/components/ui/dock"

<Dock
  position="fixed"
  items={[
    { label: "Home", href: "/", icon: <HomeIcon />, active: true },
    { label: "Mail", href: "/mail", icon: <MailIcon /> },
    { type: "separator" },
    { label: "Settings", onClick: openSettings, icon: <SettingsIcon /> },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `({ label: string; icon: ReactNode; href?: string; onClick?: () => void; active?: boolean } | { type: "separator" })[]` |  | Icons in order. A separator object draws a hairline between groups. |
| position | `"static" | "fixed"` | `"static"` | static sits in the flow; fixed floats at the bottom centre of the viewport. |
| size | `"default" | "sm"` | `"default"` | 40px or 32px icon buttons. |
| label | `string` | `"Dock"` | Accessible name of the nav landmark. |

## When to use

- Three to eight top-level destinations that fit as icons
- A floating bar at the bottom of a portfolio, a tool or a mobile layout
- When the labels can live in tooltips because the icons are familiar

## When not to use

- When the icons are not obvious: a labelled sidebar or navbar reads faster
- For more than eight items; a dock that scrolls stops being a dock
- Inside a page section as a toolbar, use toolbar instead

## Notes for agents

- Items with href render anchors, the rest render buttons with onClick; pass handlers from a client component
- position="fixed" pins it at bottom-4 of the viewport at z-40, so leave room under the page content
- The lift is a 2px transform over 150ms and is off under prefers-reduced-motion; the dot marks active without motion
- Tooltips come from shadcn tooltip and open on hover and focus; each icon also has an sr-only label

Docs: https://ui.goodtabs.co/components/dock