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 cards

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

Preview
Playground

Data

Mode

Props

Install

pnpm
pnpm dlx shadcn@latest add @paddle/pricing-cards
yarn
yarn dlx shadcn@latest add @paddle/pricing-cards
npm
npx shadcn@latest add @paddle/pricing-cards

Use an AI agent

Import this component
Import this component from https://developer.paddle.com/r/pricing-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

namestringrequired
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).
priceDataPriceData
Localised price data — typically from usePaddlePrices. Pass undefined to render a skeleton.
descriptionstring
Short tier description shown under the name.
featuresstring[]
Bulleted feature list rendered with check icons.
badgestring
Highlight badge (e.g. Most popular). Position controlled by badgePosition.
badgePosition"left" | "center" | "right"
Default: "center"
Where the badge sits along the card's top edge.
iconReact.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.
ctaLabelstring
Default: "Subscribe"
Label for the CTA button.
isSelectedboolean
Render the card in its selected state (ring + active button). Use with PricingTierCardGroup for a multi-card picker.
isCurrentboolean
Render the card in its current plan state (disabled button, label override). Use for account/manage-plan pages.
currentPlanLabelstring
Default: "Current plan"
Label shown on the disabled CTA 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 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 component, which packages pricing cards, interval toggle, and checkout together.

Was this page helpful?