# Dock

Bottom tab bar where a soft glow glides to the selected tab. Choose a floating glass pill, a full-width bar or a joined strip, with badges and an optional action button.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/dock
```

## Import

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

## Variants

- `attached` — Attached bar: `npx @lumioui/cli add pro/dock-attached`
- `compact` — Icon-only: `npx @lumioui/cli add pro/dock-compact`
- `floating` — Floating: `npx @lumioui/cli add pro/dock-floating`
- `fused` — Fused: `npx @lumioui/cli add pro/dock-fused`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `DockItem[]` | — |
| `value` | `string` | Currently selected item value. |
| `onValueChange` | `(value: string) => void` | — |
| `variant?` | `"floating" | "attached" | "fused"` | "floating" renders the detached glass pill (default); "attached" a  full-width bar; "fused" one welded strip whose top seam brightens  under the active tab. In every variant the selection is a pool of the  accent's light that glides between slots. |
| `labels?` | `"active" | "always" | "never"` | Which items show their label. Default "active". Label space is always  reserved (unless "never") so icons never jump when selection moves. |
| `action?` | `DockAction` | Prominent action disc appended at the end of the bar. |
| `haptic?` | `"selection" | "light" | false` | Haptic on selection. Default "selection". |
| `safeArea?` | `boolean` | Lift above / pad past the home indicator. Default true. |
| `className?` | `string` | — |

## Icons rendered

- `home` — /icons.html?i=home

Source: https://lumioui.com/components/dock