# Underline tabs (goodtabs UI)

Tabs on a hairline with one 2px underline that slides to the active tab.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/underline-tabs.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/underline-tabs`

## Usage

```tsx
import {
  UnderlineTabs,
  UnderlineTabsContent,
  UnderlineTabsList,
  UnderlineTabsTrigger,
} from "@/components/ui/underline-tabs"

<UnderlineTabs defaultValue="overview">
  <UnderlineTabsList aria-label="Project">
    <UnderlineTabsTrigger value="overview">Overview</UnderlineTabsTrigger>
    <UnderlineTabsTrigger value="activity" count={3}>Activity</UnderlineTabsTrigger>
  </UnderlineTabsList>
  <UnderlineTabsContent value="overview">...</UnderlineTabsContent>
  <UnderlineTabsContent value="activity">...</UnderlineTabsContent>
</UnderlineTabs>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| count | `number | string` |  | Optional count pill after the label on UnderlineTabsTrigger. |
| value, defaultValue, onValueChange | `radix Tabs props` |  | Controlled or uncontrolled, on UnderlineTabs. |

## When to use

- Sections of one page under its title: overview, activity, settings
- When the row should span the full width and sit flush on a hairline
- For three to seven tabs with short labels and optional counts

## When not to use

- For a compact switch inside a card or toolbar, use segmented-tabs
- For route-level navigation, use links and the navbar or sidebar-nav
- For long lists of options, use a select or vertical-tabs

## Notes for agents

- Radix Tabs underneath, through the shadcn tabs root and content: value, defaultValue and onValueChange work as usual
- The indicator is measured with ResizeObserver and slides over 150ms; under reduced motion it jumps
- Before the first measurement the active trigger draws its own underline, so the server render is not bare
- The list is w-full with a border-b hairline and scrolls horizontally when the tabs overflow

Docs: https://ui.goodtabs.co/components/underline-tabs