# FAQ tabs (goodtabs UI)

Questions grouped behind topic tabs, each answer a native disclosure.

## Install

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

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

## Usage

```tsx
import { FaqTabs } from "@/components/faq-tabs"

<FaqTabs topics={[{ value: "billing", label: "Billing", items: [{ question: "When am I charged?", answer: "On signup." }] }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| topics | `FaqTopic[]` |  | value, label and items of question and answer. |
| label | `string` | `"Topics"` | Accessible name for the tab row. |
| defaultValue | `string` |  | Topic open first. Defaults to the first. |

## When to use

- A FAQ with more than about eight questions that fall into clear topics
- On pricing and support pages
- When readers know which topic they need

## When not to use

- For a short list, use faq-accordion
- For documentation, which needs search and headings
- For questions that do not group

## Notes for agents

- Client component for the tabs; answers are native details elements, one open at a time per topic
- Keep topic labels to one word, they scroll sideways on phones
- Answer takes a string or any element, such as a link
- Inactive topics are unmounted, so find in page only sees the open one

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