> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Pricing cards

Tier cards with localized pricing, feature lists, and selection or current-plan states.

---

## What it does

This component is the core building block for pricing pages. It's used to display a single plan card, or a group of plan cards in a grid or stack layout.

Each card shows the plan name, description, localized price, a feature list, and an optional badge. `PricingTierCardGroup` lays them out side by side.

## When to use

- You're composing a pricing page and want pre-built tier cards.
- You need to highlight a "current plan" in a logged-in account view via `isCurrent`.
- You want a "select a plan" interaction without opening Paddle checkout (use `isSelected` + `onSelect`).

If you're building a full pricing page from scratch, use the [pricing display](https://developer.paddle.com/sdks/components/pricing-display.md) component, which packages pricing cards, [interval toggle](https://developer.paddle.com/sdks/components/billing-interval-toggle.md), and checkout together.

**Registry:** [`https://developer.paddle.com/r/pricing-cards.json`](https://developer.paddle.com/r/pricing-cards.json)

## Install

```bash
npx shadcn@latest add @paddle/pricing-cards
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/pricing-cards` or `yarn dlx shadcn@latest add @paddle/pricing-cards`.

## Props

- **name** (string, required): Tier name displayed at the top of the card. Cards are usually composed inside a <PricingTierCardGroup> wrapper, which renders them in a CSS grid (the wrapper's only meaningful prop is columns, default 3).
- **priceData** (PriceData): Localised price data — typically from usePaddlePrices. Pass undefined to render a skeleton.
- **description** (string): Short tier description shown under the name.
- **features** (string[]): Bulleted feature list rendered with check icons.
- **badge** (string): Highlight badge (e.g. Most popular). Position controlled by badgePosition.
- **badgePosition** ("left" | "center" | "right"): Where the badge sits along the card's top edge.. Default: `"center"`
- **icon** (React.ReactNode): Optional icon node rendered at the top of the card. Use an SVG, gradient, or any custom element.
- **onSelect** (() => void): Click handler for the card's CTA button. Required for the card to render an interactive button.
- **ctaLabel** (string): Label for the CTA button.. Default: `"Subscribe"`
- **isSelected** (boolean): Render the card in its selected state (ring + active button). Use with PricingTierCardGroup for a multi-card picker.
- **isCurrent** (boolean): Render the card in its current plan state (disabled button, label override). Use for account/manage-plan pages.
- **currentPlanLabel** (string): Label shown on the disabled CTA when isCurrent is true.. Default: `"Current plan"`
- **loading** (boolean): Force the skeleton loading state. Useful while you fetch data; the component also auto-skeletons when its main data prop is undefined.. Default: `false`
- **className** (string): Extra Tailwind classes applied to the root element.