Pricing Sections

Pricing sections help users understand your product offerings and choose the right plan. These components support various layouts from simple cards to detailed feature comparisons.

Component Variants

Usage

import {
  PricingCard,
  PricingSimple,
  PricingTiered,
  PricingComparison,
  PricingMinimal,
} from '@/components/ui/pricing';

// Single Pricing Card
<PricingCard
  name="Pro Plan"
  description="Everything you need."
  price="$29"
  period="/month"
  features={[
    { text: 'Feature 1', included: true },
    { text: 'Feature 2', included: false },
  ]}
  buttonText="Get started"
  buttonHref="/signup"
  highlighted
  badge="Popular"
/>

// Simple Pricing Grid
<PricingSimple
  tiers={[
    { name: 'Free', price: '$0', ... },
    { name: 'Pro', price: '$29', highlighted: true, ... },
    { name: 'Enterprise', price: '$99', ... },
  ]}
/>

// Tiered Pricing with Toggle
<PricingTiered
  tiers={[
    { name: 'Basic', monthlyPrice: '$9', yearlyPrice: '$86', ... },
    { name: 'Pro', monthlyPrice: '$29', yearlyPrice: '$278', ... },
  ]}
/>

// Feature Comparison
<PricingComparison
  tiers={[
    { name: 'Free', price: '$0', buttonText: 'Start', buttonHref: '#' },
    { name: 'Pro', price: '$29', highlighted: true, ... },
  ]}
  categories={[
    {
      name: 'Features',
      features: [
        { name: 'Dark mode', tiers: { Free: true, Pro: true } },
        { name: 'Support', tiers: { Free: '48h', Pro: '24h' } },
      ],
    },
  ]}
/>

// Minimal Horizontal Layout
<PricingMinimal
  tiers={[
    { name: 'Hobby', description: 'For personal projects', price: 'Free', ... },
    { name: 'Pro', description: 'For teams', price: '$29', highlighted: true, ... },
  ]}
/>

Props Reference

PricingCard

PricingFeature

PricingSimple

PricingTiered

PricingTier

Extends PricingCardProps but replaces price/period with:

PricingComparison

PricingMinimal