# Pricing comparison

> Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.

Block · Pro · https://lodeui.com/blocks/pricing-comparison

## When to use

- Pricing pages where plans differ in many ways.

## When not to use

- Two simple plans: use the pricing section.

## Installation

```bash
npx shadcn@latest add @lode/pricing-comparison
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PricingComparison } from "@/components/blocks/pricing-comparison";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <PricingComparison />
    </main>
  );
}
```

Built from: Number ticker, Segmented control, Tooltip

## API reference

### PricingComparison

A plan comparison table with sticky plan headers, a yearly toggle with rolling prices, collapsible groups, hints and a mobile plan picker. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through toggle, plans, groups and hints |
| ← / → | Switch billing cycle |
| Enter | Collapse or expand a group |

## Accessibility

- A real table with a caption, row and column headers.
- Ticks and dashes are labelled Included / Not included.
- Groups are buttons with aria-expanded.

## Motion

- Prices roll when switching cycle; the mobile picker pill slides; groups fade in.

## Responsive behavior

- Phones compare one plan at a time via the picker; all four columns from 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Keep PLANS and GROUPS values in the same order.

## Related

- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.