Pricing select cards
paddle/pricing-select-cardsFreeComponent
Selectable pricing cards with localized prices from Paddle, available in stacked and grid layouts. Uses RadioGroup for single-plan selection — designed for express checkout flows.
Install it
npx shadcn@latest add https://developer.paddle.com/r/pricing-select-cards.jsonSource
1export {2 PricingSelectCardStacked,3 type PricingSelectCardStackedProps,4} from "./pricing-select-card-stacked"5export { PricingSelectCardGrid, type PricingSelectCardGridProps } from "./pricing-select-card-grid"6export {7 PricingSelectCardGroup,8 type PricingSelectCardGroupProps,9} from "./pricing-select-card-group"1011/**12 * Plan configuration for use with PricingSelectCardGroup and ExpressCheckout.13 * Maps to a single Paddle price ID — pass an array of these to describe14 * the selectable plans in a checkout or pricing selector.15 */16export type PricingSelectPlan = {17 priceId: string18 name: string19 description?: string20 badge?: string21 icon?: React.ReactNode22}
What it pulls in
npm packages
Other registry items
Files it writes
More from paddle
All 14 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Billing interval togglebilling-interval-toggle | paddle | Components | Free | no deps | |
| Checkout summarycheckout-summary | paddle | Components | Free | no deps · 3 files | |
| Plan change breakdownplan-change-breakdown | paddle | Components | Free | 1 dep · 3 files | |
| Plan change previewplan-change-preview | paddle | Components | Free | 1 dep · 3 files | |
| Pricing cardspricing-cards | paddle | Components | Free | 1 dep · 2 files | |
| Subscription alertsubscription-alert | paddle | Components | Free | 1 dep · 3 files | |
| Subscription payment cardsubscription-payment-card | paddle | Components | Free | 1 dep · 3 files | |
| Subscription status cardsubscription-status-card | paddle | Components | Free | 1 dep · 3 files |
