ComponentsProNew
Pricing Toggle
Plan cards with a monthly or yearly switch. A white pill glides between the options and the prices roll in again on a spring.
Customize
accentColor
secondaryColor
glowColor
Based on Pricing (MIT license) ยท Terms of use
Props
15 properties| Property | Type | Default | Description |
|---|---|---|---|
| plans | { name; description; monthlyPrice; annualPrice; features: string[]; href?; featured? }[] | โ | Plans: name, description, two prices, features, link and a popular flag. |
| defaultCycle | 'monthly' | 'annual' | "monthly" | Billing period selected at first. |
| currency | string | "$" | Currency sign. |
| monthlyLabel | string | "Monthly" | Label of the monthly switch. |
| annualLabel | string | "Annual" | Label of the annual switch. |
| monthlySuffix | string | "/month" | Text after the monthly price. |
| annualSuffix | string | "/year" | Text after the annual price. |
| annualNote | string | "" | Small badge next to the switch, such as "Save 20%". Hidden when empty. |
| ctaLabel | string | "Get started" | Card button text. |
| featuredLabel | string | "Popular" | Badge on the featured plan. |
| priceStiffness | number | 100 | Stiffness of the spring that drops the new price in. |
| accentColor | string | "#ffffff" | Main colour: the switch, checks, and the featured plan's badge, border and button. Text on the fill turns dark or white to stay readable. |
| secondaryColor | string | "#a3a3a3" | Second colour: the far corner of the featured plan's tint. |
| glowColor | string | "rgba(255, 255, 255, 0.1)" | Soft glow around the featured plan. |
| className | string | โ | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge