# Scroll tabs (goodtabs UI)

Underline tabs that scroll sideways with faded edges and arrows when they overflow.

## Install

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

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

## Usage

```tsx
import {
  ScrollTabs,
  ScrollTabsContent,
  ScrollTabsList,
  ScrollTabsTrigger,
} from "@/components/ui/scroll-tabs"

<ScrollTabs defaultValue="overview">
  <ScrollTabsList aria-label="Project">
    <ScrollTabsTrigger value="overview">Overview</ScrollTabsTrigger>
    <ScrollTabsTrigger value="logs" count={12}>Logs</ScrollTabsTrigger>
  </ScrollTabsList>
  <ScrollTabsContent value="overview">...</ScrollTabsContent>
  <ScrollTabsContent value="logs">...</ScrollTabsContent>
</ScrollTabs>
```

## Props

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

## When to use

- Six or more tabs in a column that cannot grow, such as a project or settings page
- Tab rows that must work on phones without wrapping to a second line
- When the active tab should always end up visible, even after a route change

## When not to use

- For two to five short tabs, segmented tabs or plain shadcn tabs are lighter
- For page-level navigation between routes, use links or the navbar
- When the tabs can wrap: a wrapped row is easier to scan than a scrolled one

## Notes for agents

- It is shadcn Tabs underneath: value, defaultValue and onValueChange work as usual
- The list is w-full and scrolls inside its parent, so give the parent a width or max-width
- The arrows are mouse helpers and sit outside the tab order; arrow keys already move between tabs
- Fades are mask-image gradients, so they work on any background without a matching colour

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