For AI agents and LLMs: a structured documentation index is available at /llms.txt. Every page has a Markdown sibling — append .md to any URL.

Skip to content
Docs

Pricing select cards

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

Preview
Playground

Props

layout

Install

pnpm
pnpm dlx shadcn@latest add @paddle/pricing-select-cards
yarn
yarn dlx shadcn@latest add @paddle/pricing-select-cards
npm
npx 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"
Default: "center"
Where the badge sits along the card's top edge.
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
Default: true
Show the billing interval (e.g. / month) alongside the price.
isCurrent boolean
Render this card in its current plan state (disabled selection, label override). Use for account/manage-plan pages.
currentPlanLabel string
Default: "Current plan"
Label shown when isCurrent is true.
loading boolean
Default: false
Force the skeleton loading state. Useful while you fetch data; the component also auto-skeletons when its main data prop is undefined.
className string
Extra Tailwind classes applied to the root element.

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.

Was this page helpful?