# Badge set (goodtabs UI)

The pricing badges in one component: free, open source, freemium and paid, plus new.

## Install

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

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

## Usage

```tsx
import { BadgeSet, Tag } from "@/components/ui/badge-set"

<Tag variant="paid" />
<BadgeSet items={["free", "open-source"]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"free" | "open-source" | "freemium" | "paid" | "new"` |  | On Tag. Picks the style and the default label. |
| label | `string` |  | On Tag. Overrides the default label. |
| items | `BadgeVariant[]` |  | On BadgeSet. Variants in display order. |

## When to use

- Showing the price model of a resource at a glance
- A small state label beside a title in a list

## When not to use

- Counts and numbers: use a plain mono label
- Anything clickable: use a button or a filter chip

## Notes for agents

- Server component. Tag is one badge, BadgeSet is a list of them
- Free and Open source are outlined, Freemium is a soft fill with no border, Paid is the solid primary fill
- New is outlined with a brand dot, the only coloured mark
- Meaning never rests on colour alone: every badge carries its text

Docs: https://ui.goodtabs.co/components/badge-set