# Glass dock (goodtabs UI)

A floating glass pill of icon buttons with always visible labels and arrow key movement.

## Install

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

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

## Usage

```tsx
import { GlassDock } from "@/components/ui/glass-dock"

<GlassDock items={[{ label: "Home", icon: <HomeIcon />, active: true }, { label: "Files", icon: <FolderIcon /> }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label: string; icon: ReactNode; onClick?: () => void; active?: boolean }[]` |  | Buttons in order. active sets aria-pressed. |
| label | `string` | `"Dock"` | Accessible name of the toolbar. |

## When to use

- Three to six actions over imagery, such as a player or a viewer
- When the label must be visible without hover

## When not to use

- Page navigation with links: use the dock, which renders anchors and tooltips
- On touch only layouts where the labels are too small

## Notes for agents

- Unlike dock, the label sits under the icon and is always visible, and there are no tooltips or links
- A role=toolbar with arrow keys, Home and End; the active button is aria-pressed
- It takes functions, so a demo that passes onClick must be a client component
- Glass needs something behind it: it bends and frosts what sits under it, so on a flat background it reads as a grey box

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