# Tab Bar

Three to five top destinations on Mobile, as a labeled bar or a floating dock.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tab-bar
```

## Usage

```tsx
import { TabBar } from '@/components/fetaui/tab-bar'

export function Example() {
  return <TabBar appearance="floating" items={items} value={page} onValueChange={go} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | TabBarItem[] | required |
| value | string |  |
| defaultValue | string | first |
| onValueChange | (value) => void |  |
| appearance | labeled, floating | labeled |
| homeIndicator | boolean | false |
| aria-label | string | Main |
| animated | boolean | true |

## When to use

- For three to five top destinations on Mobile.

## When not to use

- For views of one object: use Tabs.
- On wide screens: use Sidebar.

## Accessibility

- A nav of links, with aria-current on the active one.
- Unread dots have a text equivalent in the label.

## Motion

- In the dock, the ink pill stretches to the new tab and the label slides in.
- In the labeled bar, the 5% pill slides between icons.
- With reduced motion, the pill swaps.