# Tabs

Switch between views of the same thing. Panels swipe with the finger and the indicator follows.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tabs
```

## Usage

```tsx
import { Tabs } from '@/components/fetaui/tabs'

export function Example() {
  return (
    <Tabs
      label="Project"
      items={[
        { value: 'overview', label: 'Overview', content: <Overview /> },
        { value: 'activity', label: 'Activity', count: 3, content: <Activity /> },
      ]}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | TabItem[] | required |
| label | string | required |
| value | string |  |
| defaultValue | string | first enabled |
| onValueChange | (value) => void |  |
| appearance | pill, line | pill |
| orientation | horizontal, vertical | horizontal |
| fill | boolean | false |
| animated | boolean | true |

## When to use

- For peers of the same object.
- Line tabs at the top of a page, Pill tabs inside cards.
- Keep labels to one or two words, and four to six tabs.

## When not to use

- For more than six options: use Select or a menu.
- For moving between pages: use Navigation Menu or Tab Bar.

## Accessibility

- Uses tablist, tab and tabpanel, linked by aria-controls.
- Activation is automatic and uses one tab stop.
- Panels out of view are inert.
- A disabled tab explains why through its reason.

## Motion

- The indicator and the panel move on one spring, 420 over 38.
- On touch, panels follow the finger and the indicator follows by the fraction. Past the ends they rubber band at 0.35.
- The label moves from Regular to Medium in 160 ms, with its width reserved so neighbours stay put.
- With reduced motion, the indicator and panel change at once. Swipes still follow the finger, with no rubber band.