PricingCard Component

A flexible pricing card component for displaying subscription plans, features, and pricing information. Supports monthly/yearly intervals and feature lists.

Basic Pricing Card

$10/ month

<PricingCard 
  price={{
    amount: 10,
    currency: "USD",
    interval: "month"
  }}
  onSelect={() => alert('Monthly plan selected')}
/>

With Features

$15/ month

Unlimited access to all content
Exclusive monthly releases
Direct artist messaging
Early ticket access
HD audio streaming

<PricingCard 
  price={{
    amount: 15,
    currency: "USD",
    interval: "month",
    features: [
      "Unlimited access to all content",
      "Exclusive monthly releases",
      "Direct artist messaging",
      "Early ticket access",
      "HD audio streaming"
    ]
  }}
  onSelect={() => alert('Premium plan selected')}
/>

Annual Plan with Savings

Save $30

$120/ year

$10 per month

Everything in monthly plan
Save 20% compared to monthly
Exclusive annual member perks
Priority customer support

<PricingCard 
  price={{
    amount: 120,
    currency: "USD",
    interval: "year",
    features: [
      "Everything in monthly plan",
      "Save 20% compared to monthly",
      "Exclusive annual member perks",
      "Priority customer support"
    ],
    savings: 30
  }}
  onSelect={() => alert('Annual plan selected')}
/>

Multiple Pricing Options

$5/ month

Basic access
Standard quality streaming

Selected

$10/ month

Full access to all content
HD quality streaming
Download for offline
No ads

$20/ month

Everything in Standard
4K Ultra HD streaming
Family sharing (5 accounts)
Exclusive content
Priority support

Selected State

Selected

$10/ month

Access to all content
Monthly exclusive releases
Direct messaging
Early access to tickets

Save $20

$100/ year

$8 per month

Everything in monthly plan
Save $20 per year
Exclusive merchandise
VIP event invitations

<PricingCard 
  price={basicPlan}
  selected={false}
  onSelect={() => selectPlan('basic')}
/>
<PricingCard 
  price={premiumPlan}
  selected={true}
  onSelect={() => selectPlan('premium')}
/>

State Management Example

Note: In a real application, you would manage the selected state using React hooks or your state management solution of choice.

const [selectedPlan, setSelectedPlan] = useState('monthly');

return (
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <PricingCard 
      price={{
        amount: 10,
        currency: "USD",
        interval: "month",
        features: [
          "Access to all content",
          "Monthly exclusive releases",
          "Direct messaging",
          "Early access to tickets"
        ]
      }}
      selected={selectedPlan === 'monthly'}
      onSelect={() => setSelectedPlan('monthly')}
    />
    <PricingCard 
      price={{
        amount: 100,
        currency: "USD",
        interval: "year",
        features: [
          "Everything in monthly plan",
          "Save $20 per year",
          "Exclusive merchandise",
          "VIP event invitations"
        ],
        savings: 20
      }}
      selected={selectedPlan === 'yearly'}
      onSelect={() => setSelectedPlan('yearly')}
    />
  </div>
);

Props Reference

Prop	Type	Default	Description
price	PlanPrice	required	Pricing information object
selected	boolean	false	Whether this plan is selected
onSelect	() => void	required	Callback when card is selected
className	string	undefined	Additional CSS classes

PlanPrice Interface

interface PlanPrice {
  amount: number;
  currency: string;
  interval: 'month' | 'year';
  features?: string[];
  savings?: number;
}