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 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

Props

name string required
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).
priceData PriceData
Localised price data — typically from usePaddlePrices. Pass undefined to render a skeleton.
description string
Short tier description shown under the name.
features string[]
Bulleted feature list rendered with check icons.
badge string
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.
icon React.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.
ctaLabel string
Default: "Subscribe"
Label for the CTA button.
isSelected boolean
Render the card in its selected state (ring + active button). Use with PricingTierCardGroup for a multi-card picker.
isCurrent boolean
Render the card in its current plan state (disabled button, label override). Use for account/manage-plan pages.
currentPlanLabel string
Default: "Current plan"
Label shown on the disabled CTA 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 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?