# Pricing tier

> One pricing plan as a card. The price has a spoken form, a feature that is not included says so in words, and you can mark a plan as recommended.

Facade UI item `pricing-tier` (ui, atom).
Docs page: https://facadeui.dev/components/pricing-tier · Registry JSON: https://facadeui.dev/r/pricing-tier.json

## Install

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

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

Files: `components/ui/pricing-tier.tsx`

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

## Usage

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

```tsx
import { PricingTier } from "@/components/ui/pricing-tier"

export function Demo() {
  return (
    <ul className="grid gap-6 md:grid-cols-2">
      <PricingTier
        name="Starter"
        price="$0"
        srPrice="Free"
        period="/month"
        description="Everything you need to ship a landing page."
        features={[
          { label: "All sections and atoms" },
          { label: "Three theme presets" },
          { label: "Priority support", included: false },
        ]}
        cta={{ label: "Start free", href: "#start" }}
      />
      <PricingTier
        featured
        name="Team"
        price="$29"
        srPrice="29 dollars"
        period="/month"
        description="For teams shipping more than one site."
        features={[
          { label: "Everything in Starter" },
          { label: "Shared theme tokens", note: "Sync across projects" },
          { label: "Priority support" },
        ]}
        cta={{ label: "Start a trial", href: "#trial" }}
        footnote="No card required for 14 days."
      />
    </ul>
  )
}
```

## Props

### PricingTierProps

Extends PricingTierItem.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `link` | `LinkComponent` |  |  |
| `headingLevel` | `HeadingLevel` | `3` | Heading level of the plan name. Defaults to `3`, below a section `<h2>`. |
| `as` | `"li" \| "div"` | `"li"` |  |
| `className` | `string` |  |  |
| `children` | `ReactNode` |  |  |