## Plan Comparison (S—179)

A compact plan comparison: tap a plan header to focus its column, with checks, dashes and limits per feature row.

- URL: https://sundaeui.dev/components/plan-compare
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/plan-compare.json`
- Tags: saas, pricing, table, plans, comparison, features

Three plans across, features down. Tapping a plan highlights its column and updates the CTA; on phones the other columns narrow so the chosen one reads clearly.
Rows can hold a tick, a dash or a short value like “10 GB”. Feature groups collapse.

### Usage

```tsx
import { PlanCompare } from '@/components/sundae/plan-compare'

<PlanCompare />
```

### Props

- `plans` (`{ id: string; name: string; price: string }[]`, required): Columns.
- `rows` (`{ label: string; values: (boolean | string)[] }[]`, required): Feature rows.
- `defaultPlan` (`string`): Highlighted plan.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Pricing pages, upgrade modals.

### When not to use

- More than four plans: use separate cards.

### Accessibility

- A real table with column headers as buttons (aria-pressed); ticks and dashes have text alternatives (“Included”, “Not included”).
- Reduced motion removes the movement and keeps every state change.