Pricing Cards
Three-tier pricing cards with a monthly / yearly switch and a highlighted plan.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
PricingCardsProps
Also accepts all props of React.ComponentProps<"section">
| Prop | Type | Default | Description |
|---|---|---|---|
| plans* required | PricingPlan[] | — | — |
| currency | string | "$" | — |
| yearlyBadge | string | "-20%" | Label shown next to the yearly option, e.g. "-20%" |
| labels | { monthly: string; yearly: string; perMonth: string; popular: string } | defaultLabels | — |
| onSelectPlan | (plan: PricingPlan, billing: "monthly" | "yearly") => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/pricing-cards.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.