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
Paddle Docs home

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

Use an AI agent

Import this component
Import this component from https://developer.paddle.com/r/pricing-select-cards.json and open the code for editing. IMPORTANT: preserve the component exactly as-is. Do NOT change colors, CSS variables, Tailwind classes, spacing, fonts, or any visual styles. Do NOT regenerate or restyle the UI. Create files from the registry JSON verbatim and show the code tree.

Props

priceIdstringrequired
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).
namestringrequired
Plan name displayed on the card.
priceDataPriceData
Localised price data for this plan — typically from usePaddlePrices. Omit (or pair with loading) to render a skeleton.
descriptionstring
Short plan description rendered under the name.
badgestring
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.
iconReact.ReactNode
Icon node rendered at the leading edge of the card. Stacked variant only — the grid variant doesn't render icons.
showIntervalboolean
Default: true
Show the billing interval (e.g. / month) alongside the price.
isCurrentboolean
Render this card in its current plan state (disabled selection, label override). Use for account/manage-plan pages.
currentPlanLabelstring
Default: "Current plan"
Label shown when isCurrent is true.
loadingboolean
Default: false
Force the skeleton loading state. Useful while you fetch data; the component also auto-skeletons when its main data prop is undefined.
classNamestring
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?