React components
Pricing comparison
A detailed table comparison of pricing plans and features.
Overview
The PricingComparison component renders a comprehensive feature matrix comparing different pricing tiers. It automatically switches to a dropdown-based view on mobile devices (PricingComparisonMobile) and a table view on desktop.
Usage
import { PricingComparison } from '@/components/core/pricing-comparison';
const plans = [
{ key: 'basic', label: 'Basic', link: '#', cta: 'Start', popular: false },
{ key: 'pro', label: 'Pro', link: '#', cta: 'Go Pro', popular: true },
];
const features = [
{
group: 'Core Features',
features: [
{ feature: 'Users', availability: { basic: '1', pro: 'Unlimited' } },
{ feature: 'Support', availability: { basic: false, pro: true } },
]
}
];
function PricingPage() {
return <PricingComparison plans={plans} data={features} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PlanTier[] | Required | Array defining the columns (plans) of the table. |
data | PricingComparisonItem[] | Required | Array of feature groups and their availability per plan. |
Data Interface
interface FeatureItem<T extends readonly PlanTier[]> {
feature: string;
availability: Record<T[number]['key'], boolean | string>;
}
interface PricingComparisonItem<T extends readonly PlanTier[]> {
group: string;
features: FeatureItem<T>[];
}