## Underline Tabs (S—092)

Text tabs with an underline that slides to the active tab while the panel slides in from the direction you moved.

- URL: https://sundaeui.dev/components/underline-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/underline-tabs.json`
- Tags: tabs, underline, panel, navigation, directional

The underline measures and travels to the new tab. The panel content enters from the right when you move right and from the left when you move left, so the order of tabs stays spatial.
Optional counts sit beside labels. Overflowing tab rows scroll sideways on narrow screens.

### Usage

```tsx
import { UnderlineTabs } from '@/components/sundae/underline-tabs'

<UnderlineTabs />
```

### Props

- `tabs` (`{ id: string; label: string; count?: number; content: ReactNode }[]`, required): Tabs and panels.
- `value / defaultValue` (`string`): Active tab id.
- `onValueChange` (`(id: string) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Sections of one page: Overview / Activity / Settings.

### When not to use

- Switching data views inline: a segmented control is more compact.

### Accessibility

- WAI-ARIA tabs: tablist, tab with aria-selected and aria-controls, tabpanel labelled by its tab.
- Arrow keys move with automatic activation; Home/End jump.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next tab
- Home / End: First / last tab