# Plan comparison

> Compare meaningful differences between plans and billing periods.

- Type: Block
- Page: https://ui.xzero.co.uk/components/blocks/plan-comparison
- Markdown: https://ui.xzero.co.uk/components/blocks/plan-comparison/markdown

- Access: Free, open source
- Registry id: `plan-comparison`
- Source file: `registry/blocks/plan-comparison/plan-comparison.tsx`
- Built from: Segmented control, Button, Motion
- Keywords: react pricing comparison, plan comparison table, pricing table, monthly yearly toggle, feature matrix, saas pricing page

Use this when people need to weigh plans side by side. Replace the sample features and prices with your current offering.

## When to use

- Comparing two tiers side by side with a feature matrix.
- Pricing pages that switch between monthly and yearly prices.
- Long feature lists where people want to see only the differences.

## When not to use

- Use usage-pricing when price depends on seats or volume.
- Use segmented-control alone for a simple billing toggle.
- Use cancel-flow for downgrade or cancellation decisions.

## Installation

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui/plan-comparison
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

## Usage

```tsx
import { PlanComparison } from "@/components/xzero/blocks/plan-comparison/plan-comparison";

export function PricingPage() {
  return <PlanComparison />;
}
```

## API reference

### PlanComparison

A Team vs Studio comparison with a monthly or yearly toggle, animated prices, and a feature matrix. Takes no props; plans, prices, and features are sample data in the file.

No props.

## Accessibility

- The matrix uses table, row, columnheader, rowheader, and cell roles.
- Prices are aria-live with aria-atomic so the full value is read.
- The chosen plan is announced in a role="status" footer.

## Motion

- Prices count between billing periods and the selection highlight moves with layoutId.
- Extra feature rows expand in height with a light blur.
- Reduced motion jumps to the final values and disables height animation.

## Responsive behavior

- Below 640px the feature header column hides and each feature name spans the row above its two values.
- Below 365px plan and value padding tighten so both plans still fit side by side.

## Performance

- Prices tween with a single animate call per value; the selection highlight uses one layoutId.
- Showing extra rows animates height, so keep the matrix to a few dozen features.

## Notes for AI

- Use when people compare two tiers side by side.
- Edit the pricing and features constants; there is no selection callback, so wire the Button onClick yourself.
- Composes Xzero Button, SegmentedControl, and Switch.

## Related

- [Usage pricing](https://ui.xzero.co.uk/components/blocks/usage-pricing/markdown): A pricing calculator that finds your plan as you drag seats and traffic.
- [Segmented control](https://ui.xzero.co.uk/components/segmented-control/markdown): Switch between a small set of related views.
- [Animated counter](https://ui.xzero.co.uk/components/animated-counter/markdown): Give changing totals a clear sense of movement.
- [Cancel flow](https://ui.xzero.co.uk/components/blocks/cancel-flow/markdown): A cancellation flow that answers each reason with a tailored offer and a calm hold-to-cancel.

## Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt