# Pricing comparison

> A pricing comparison table with row and column headers. Each cell states its value in text, not only with a tick.

Facade UI item `pricing-comparison` (block, section).
Docs page: https://facadeui.dev/components/pricing-comparison · Registry JSON: https://facadeui.dev/r/pricing-comparison.json

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/pricing-comparison.json`. The CLI also installs what it needs: lucide-react@^1.47.0, @facade/badge, @facade/button, @facade/container, @facade/section, @facade/section-header, @facade/types, @facade/utils.

Files: `components/sections/pricing-comparison.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/pricing-comparison-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { PricingComparison } from "@/components/sections/pricing-comparison"

import { COMPARISON_GROUPS, COMPARISON_PLANS } from "./content"

export function Demo() {
  return (
    <PricingComparison
      eyebrow="Compare"
      title="Every feature, plan by plan"
      plans={COMPARISON_PLANS}
      groups={COMPARISON_GROUPS}
      note="A tick is never the only thing in a cell — each carries hidden 'Included' text."
    />
  )
}
```

## Props

### PricingComparisonProps

Extends SectionBaseProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `plans` (required) | `ComparisonPlan[]` |  |  |
| `groups` (required) | `ComparisonGroup[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `link` | `LinkComponent` |  |  |
| `caption` | `string` |  | Table caption. Always present, but visually hidden by default. |
| `showCaption` | `boolean` | `false` |  |
| `note` | `ReactNode` |  |  |
| `align` | `"start" \| "center"` | `"center"` |  |