# Use Case Tabs

> Solutions-by-team section: a tab for each audience (engineering, product, design, marketing, support) over a two-sided panel with that team's headline, three benefits, a metric and customer quote, a Learn more link and a product mock of its own. Arrow keys select, the indicator slides, panels crossfade without moving the page, and the tabs scroll on phones. Autoplay is opt-in.

- Slug: `use-case-tabs`
- Category: [Features](https://www.assembli.design/category/features.md)
- Type: block
- Tags: use-cases, solutions, tabs, teams, personas, product-mock, testimonial
- npm dependencies: @base-ui/react, motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/use-case-tabs
- Page: https://www.assembli.design/components/use-case-tabs

![Use Case Tabs preview](https://www.assembli.design/thumbnails/use-case-tabs-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `eyebrow` | `React.ReactNode` | `"Solutions"` |  |
| `title` | `React.ReactNode` | `"Built around the way each team works"` |  |
| `intro` | `React.ReactNode` | `"One workspace for engineering, product, design, marketing …` |  |
| `useCases` | `UseCase[]` | `DEFAULT_USE_CASES` |  |
| `defaultValue` | `string` |  |  |
| `value` | `string` |  | Controls the active tab. Pair with `onValueChange`. |
| `onValueChange` | `(id: string) => void` |  |  |
| `onLearnMore` | `(useCase: UseCase, event: React.MouseEvent<HTMLAnchorElement>) => void` |  | Called when a panel's link is followed. |
| `autoplay` | `boolean` | `false` | Advance through the tabs on a timer. Pauses on hover, focus and off screen; off under reduced motion. |
| `interval` | `number` | `7000` | Time each tab stays up while autoplaying, in ms. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/use-case-tabs/use-case-tabs.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/use-case-tabs
```

Registry item JSON: https://www.assembli.design/r/use-case-tabs.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.