## Vertical Tabs (S—172)

Settings-style vertical tabs: a bar slides along the left edge to the active tab and the panel cross-fades upward.

- URL: https://sundaeui.dev/components/vertical-tabs
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/vertical-tabs.json`
- Tags: sidebar, tabs, settings, navigation, vertical-tabs

A left rail of tabs with a short indicator bar that travels to the active one. The panel slides up a few pixels as it fades in, matching the vertical direction of travel.
Below 420px the rail turns into a horizontal scroller so it still fits a phone.

### Usage

```tsx
import { VerticalTabs } from '@/components/sundae/vertical-tabs'

<VerticalTabs />
```

### Props

- `tabs` (`{ id: string; label: string; content: ReactNode }[]`, required): Tabs and panels.
- `defaultValue` (`string`): Initial tab id.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Settings, account pages, documentation sections.

### When not to use

- Two or three short views: use a segmented control.

### Accessibility

- WAI-ARIA tabs with aria-orientation="vertical"; Up/Down move and activate.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Previous / next tab