# Pricing compare (goodtabs UI)

A feature by plan comparison in real table markup, with grouped rows.

## Install

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

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

## Usage

```tsx
import { PricingCompare } from "@/components/pricing-compare"

<PricingCompare caption="Compare plans" plans={["Free", "Pro"]} groups={[{ name: "Core", rows: [{ feature: "Projects", values: ["3", "Unlimited"] }] }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| plans | `string[]` |  | Column names. |
| groups | `Group[]` |  | name plus rows of feature and one value per plan: true, false or a string. |
| caption | `string` |  | Visible caption that also names the table. |
| emphasised | `number` |  | Index of the plan column to tint. |

## When to use

- Below pricing cards when buyers need the full list
- When plans differ across many features
- Any feature by plan matrix

## When not to use

- For three bullets per plan, cards are enough
- For data tables with sorting, use a data table
- For a single plan

## Notes for agents

- Real table: caption, th scope col, tbody per group, th scope row; values are true, false or text
- True and false render an icon plus sr-only text, so screen readers hear Included
- Values array must match plans in length and order
- Scrolls sideways under 32rem, keep plan names short

Docs: https://ui.goodtabs.co/components/pricing-compare