# Pricing card (goodtabs UI)

A plan with its price, a feature list and one action, alone or in a grid of plans.

## Install

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

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

## Usage

```tsx
import { PricingCard, PricingGrid } from "@/components/ui/pricing-card"
import { Button } from "@/components/ui/button"

<PricingGrid>
  <PricingCard name="Pro" price="$12" features={["Synced collections"]} action={<Button>Start a trial</Button>} highlighted />
</PricingGrid>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` |  | The plan name. |
| description | `string` |  | One line on who the plan is for. |
| price | `string` |  | The price, already formatted, for example "$12". |
| period | `string` | `"month"` | Billing period after the price, drawn as "/month". Pass "" for none. |
| features | `string[]` |  | What the plan includes, one short line each. |
| action | `ReactNode` |  | The action, usually a Button. Stretched to the full width. |
| highlighted | `boolean` | `false` | Draws a foreground border and a small Popular badge. |
| footnote | `string` |  | One quiet line under the action. |
| columns | `2 | 3` | `3` | On PricingGrid: plans side by side from md up. |

## When to use

- A pricing page or section with two or three plans side by side
- One plan on its own, for example an upgrade prompt inside the app
- Yearly and monthly variants of the same plans, switched by a toggle above

## When not to use

- More than four plans or many feature rows, which want a comparison table
- Usage-based pricing with sliders and calculators
- A plan with no action to take

## Notes for agents

- Format the price before passing it; the card adds only the mono period after it
- The action is any element and is stretched to full width; pass a shadcn Button and pick its variant
- highlighted is monochrome by design: a foreground ring and a muted Popular badge, no accent colour
- Server component with no state; put the monthly and yearly toggle outside and swap the props

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