# Feature tabs (goodtabs UI)

A feature section behind tabs, each panel with text, points and a visual.

## Install

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

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

## Usage

```tsx
import { FeatureTabs } from "@/components/feature-tabs"

<FeatureTabs title="One place for the review" features={[{ value: "triage", label: "Triage", title: "Sort the queue", description: "Every issue lands in one inbox." }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| features | `Feature[]` |  | One entry per tab: value, label, title, description, optional points and visual. |
| eyebrow | `string` |  | Small mono line above the heading. |
| title | `string` |  | Section heading. |
| label | `string` | `"Features"` | Accessible name for the tab row. |
| defaultValue | `string` |  | Tab open first. Defaults to the first feature. |

## When to use

- A product page with three to five capabilities that each need a paragraph
- When a visual or a short list explains each capability better than a grid
- Below a hero, one per page

## When not to use

- For a single feature, which needs no tabs
- For steps in order, where a numbered list reads better
- For navigation between pages

## Notes for agents

- Client component on the shadcn Tabs line variant; keyboard arrows come from radix
- Without a visual a panel is one text column; with one it splits 2fr and 3fr from md
- Pass your own element as visual, such as a browser-frame; panels unmount when inactive
- Tab labels scroll sideways on narrow screens, keep them to one or two words

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