React components
Pricing plans
A card-based pricing display with billing cycle toggle.
Overview
The PricingPlans component showcases pricing cards. It includes a toggle to switch between billing cycles (e.g., Monthly vs. Yearly) and animates the price update.
Usage
import { PricingPlans } from '@/components/core/pricing-plans';
const cycles = {
monthly: 'Monthly',
yearly: 'Yearly'
};
const plans = [
{
id: 'starter',
name: 'Starter',
description: 'Good for starting out.',
pricing: {
monthly: { amount: 10 },
yearly: { amount: 100 },
},
features: ['Feature 1', 'Feature 2'],
cta: 'Buy Now',
link: '#'
}
];
function Pricing() {
return (
<PricingPlans
plans={plans}
cycles={cycles}
defaultBilling="monthly"
discountText="Save 20%"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlanItem[] | Required | Data for each pricing card. |
cycles | BillingCycles | Required | Object defining available billing keys and labels. |
currencySymbol? | string | $ | Symbol displayed before prices. |
defaultBilling? | BillingKeys | 0 (index) | Initial billing cycle key. |
discountText? | string | - | Optional text (e.g., "Save 20%") shown near the toggle. |
Data Interface
Pricing data can be "Standard" (amounts per cycle), "Free", or "Custom" (contact sales).
type StandardPricing<K extends string> = Record<K, { amount: number; label?: string; }>;
type Pricing<K extends string> = StandardPricing<K> | { free: true; label: string; } | { custom: true; label?: string; };