# Vertical tabs (goodtabs UI)

Tabs down the left for settings pages, with the content beside them.

## Install

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

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

## Usage

```tsx
import {
  VerticalTabs,
  VerticalTabsContent,
  VerticalTabsList,
  VerticalTabsTrigger,
} from "@/components/ui/vertical-tabs"

<VerticalTabs defaultValue="general">
  <VerticalTabsList aria-label="Settings">
    <VerticalTabsTrigger value="general">General</VerticalTabsTrigger>
    <VerticalTabsTrigger value="members">Members</VerticalTabsTrigger>
  </VerticalTabsList>
  <VerticalTabsContent value="general">...</VerticalTabsContent>
  <VerticalTabsContent value="members">...</VerticalTabsContent>
</VerticalTabs>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| icon | `ReactNode` |  | 16px icon before the label on VerticalTabsTrigger. |
| value, defaultValue, onValueChange | `radix Tabs props` |  | Controlled or uncontrolled, on VerticalTabs. |

## When to use

- Settings and account pages with four to ten sections on one route
- When the list of sections should stay in view while each panel scrolls
- Any form-heavy page where a horizontal tab row would run out of room

## When not to use

- For two or three short sections, underline-tabs or segmented-tabs are lighter
- For links between routes, use sidebar-nav; these are panels, not pages
- Inside a narrow card: it stacks, but a plain tab row reads better there

## Notes for agents

- Radix Tabs underneath, through the shadcn tabs root and content; value, defaultValue and onValueChange work as usual
- The layout follows the container, not the viewport: under 448px the list becomes a scrolling row above the content and the radix orientation flips so arrow keys still match
- The list is w-48 by default; override with className on VerticalTabsList, for example @md:w-32
- Items are the sidebar-nav spec: 32px, rounded-sm, bg-muted when active, no accent bar

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