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

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

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?