# Tag list (goodtabs UI)

Wrapping tags that collapse into a +N count past a limit.

## Install

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

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

## Usage

```tsx
import { TagList } from "@/components/ui/tag-list"

<TagList tags={["react", "motion", "forms"]} max={2} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tags | `string[]` |  | The tags, in display order. |
| max | `number` | `4` | Tags shown before the rest collapse into +N. |
| label | `string` | `"Tags"` | Accessible name for the list. |

## When to use

- Cards and rows that carry a few labels under a title
- Any set of short, non-interactive keywords
- Places where a long tag list must not break the layout

## When not to use

- Tags a person can add or remove: use tag-input
- Tags that filter a list: use filter-chip

## Notes for agents

- Tags are static text in list items, not buttons or links
- The +N chip carries a title and a screen reader sentence naming the hidden tags
- Wrapping is plain flex-wrap; set a width on the list or its parent
- Pass max larger than the count to show everything

Docs: https://ui.goodtabs.co/components/tag-list