Comparison Table

The ComparisonTable allows you to compare features across different plans or products.

Usage

import ComparisonTable from '~/components/sections/ComparisonTable.astro';

const plans = [
    { name: 'Basic', description: 'For starters', key: 'basic' },
    { name: 'Pro', description: 'Best value', popular: true , key: 'pro' },
    { name: 'Enterprise', description: 'For big teams', key: 'enterprise' }
];

const features = [
    { category: 'Core Features', items: [
        { name: 'Users', basic: '1', pro: '5', enterprise: 'Unlimited' },
        { name: 'Storage', basic: '1GB', pro: '10GB', enterprise: '1TB' }
    ]},
    { category: 'Support', items: [
        { name: 'Response Time', basic: '48h', pro: '24h', enterprise: '1h' },
        { name: 'Phone Support', basic: false, pro: true, enterprise: true }
    ]}
];

<ComparisonTable 
  plans={plans}
  features={features}
/>

Example

Compare Plans

Find the perfect plan for your needs.

Features	Free	Pro	Business
Usage
Projects	3	Unlimited	Unlimited
API Calls	1k/mo	100k/mo	1M/mo
Advanced
SSO
Audit Logs

Props

ComparisonTable

Prop	Type	Description
plans	Plan[]	Array of plan objects (max 3 recommended).
features	FeatureCategory[]	Categorized list of features to compare.

Data Structures

interface Plan {
  name: string;
  description: string;
  popular?: boolean;
}

interface FeatureCategory {
  category: string;
  items: FeatureItem[];
}

interface FeatureItem {
  name: string;
  // Key must match plan name (lowercase)
  // Value can be string, number, or boolean
  [planName: string]: string | number | boolean;
}