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

# Pricing select cards

Compact, selectable plan cards in a radio-group pattern. Stacked or grid layout.

---

## What it does

This component powers the plan-picker inside express checkout, and works anywhere you need a compact "select a plan" step without the full pricing-page treatment.

## When to use

- You need a mobile-friendly, radio-group-style plan picker.
- The customer should pick a plan before moving to a subsequent step, or you want to open checkout in a modal or drawer.
- You want stacked or grid layouts that work well in narrow viewports.

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

## Install

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

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

## Props

- **priceId** (string, required): Paddle price ID for this plan. Cards are composed inside a <PricingSelectCardGroup value="…" onValueChange={…} layout="stacked" | "grid"> wrapper, which owns the selection state — only one card can be active at a time (the group uses a Radix RadioGroup under the hood).
- **name** (string, required): Plan name displayed on the card.
- **priceData** (PriceData): Localised price data for this plan — typically from usePaddlePrices. Omit (or pair with loading) to render a skeleton.
- **description** (string): Short plan description rendered under the name.
- **badge** (string): Highlight badge (e.g. Popular). Position controlled by badgePosition.
- **badgePosition** ("left" | "center" | "right"): Where the badge sits along the card's top edge.. Default: `"center"`
- **icon** (React.ReactNode): Icon node rendered at the leading edge of the card. Stacked variant only — the grid variant doesn't render icons.
- **showInterval** (boolean): Show the billing interval (e.g. / month) alongside the price.. Default: `true`
- **isCurrent** (boolean): Render this card in its current plan state (disabled selection, label override). Use for account/manage-plan pages.
- **currentPlanLabel** (string): Label shown 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.