# Pricing table (goodtabs UI)

Two to four plans side by side with one emphasised, in a calm monochrome.

## Install

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

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

## Usage

```tsx
import { PricingTable } from "@/components/pricing-table"

<PricingTable plans={[{ name: "Free", price: "$0", features: ["3 projects"] }, { name: "Pro", price: "$12", period: "month", emphasised: true, features: ["Unlimited projects"], action: <Button>Get Pro</Button> }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| plans | `Plan[]` |  | name, price, features and optional description, period, action and emphasised. |
| title | `string` |  | Section heading. |
| description | `string` |  | One line under the heading. |

## When to use

- A pricing page or section with two to four tiers
- When one plan should read as the default choice
- Above a pricing-compare table for the detail

## When not to use

- For a single plan or a donation, use a pricing card
- For forty line feature matrices, use pricing-compare
- As a settings screen for switching plans

## Notes for agents

- Server component; pass Buttons into each plan action
- Emphasise one plan only: it gets a foreground ring and a Popular mark, never a colour
- Columns follow the plan count: 2, 3 from md, 4 from lg; one column on phones
- Price is a formatted string; period is optional and draws as /period, leave it out for no suffix

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