# Pricing tiers

> A pricing table: plans as a row of cards. Each price has a spoken form, and a feature that is not included says so in words.

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

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/pricing-tiers.json`. The CLI also installs what it needs: @facade/container, @facade/pricing-tier, @facade/section, @facade/section-header, @facade/types, @facade/utils.

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

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

## Usage

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

```tsx
import { PricingTiers } from "@/components/sections/pricing-tiers"

import { PLANS } from "./content"

export function Demo() {
  return (
    <PricingTiers
      eyebrow="Pricing"
      title="Simple, and actually free"
      description="Prices carry a spoken form, and a feature that is not included says so in words."
      items={PLANS}
      note="All prices exclude VAT."
    />
  )
}
```

## Props

### PricingTiersProps

Extends SectionBaseProps, ListSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `PricingTierItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `link` | `LinkComponent` |  |  |
| `toggle` | `ReactNode` |  | A billing-period switch, rendered above the plans. |
| `note` | `ReactNode` |  | Small print under the plans. |
| `tierHeadingLevel` | `HeadingLevel` |  |  |
| `align` | `"start" \| "center"` | `"center"` |  |