Pricing

┌─────────────────────────────────────────────────────┐
│ root                                                │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header                                          │ │
│ │        title                                    │ │
│ │       subtitle                                  │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ toggle                                          │ │
│ │    [Monthly]  [Yearly - Save 20%]               │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ tiers                                           │ │
│ │ ┌───────────┐ ┌─────────────────┐ ┌───────────┐ │ │
│ │ │ tier      │ │ tier (featured) │ │ tier      │ │ │
│ │ │           │ │    ★ Popular    │ │           │ │ │
│ │ │  Starter  │ │      Pro        │ │ Enterprise│ │ │
│ │ │   Free    │ │    $29/mo       │ │  Custom   │ │ │
│ │ │           │ │                 │ │           │ │ │
│ │ │ ✓ Feature │ │ ✓ Everything in │ │ ✓ Everything│
│ │ │ ✓ Feature │ │   Starter, plus │ │   in Pro   │ │
│ │ │ ✗ Feature │ │ ✓ Feature       │ │ ✓ Feature  │ │
│ │ │           │ │ ✓ Feature       │ │ ✓ Custom   │ │
│ │ │           │ │                 │ │           │ │ │
│ │ │ [Start]   │ │ [Get Started]   │ │ [Contact] │ │ │
│ │ └───────────┘ └─────────────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ comparison (optional)                           │ │
│ │ Feature      │ Starter │ Pro │ Enterprise      │ │
│ │ ─────────────┼─────────┼─────┼─────────────    │ │
│ │ Users        │ 1       │ 10  │ Unlimited       │ │
│ │ Storage      │ 1GB     │ 50GB│ Custom          │ │
│ │ Support      │ Email   │ Chat│ Dedicated       │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

<Pricing
  title="Simple, transparent pricing"
  subtitle="No hidden fees. Cancel anytime."
  showToggle
  yearlyDiscount={20}
  tiers={[
    {
      name: 'Starter',
      price: { monthly: 0, yearly: 0 },
      description: 'Perfect for side projects',
      features: [
        { text: '1 project', included: true },
        { text: '1GB storage', included: true },
        { text: 'Community support', included: true },
        { text: 'API access', included: false },
      ],
      action: { label: 'Start Free', href: '/signup' },
    },
    {
      name: 'Pro',
      price: { monthly: 29, yearly: 290 },
      description: 'For growing teams',
      features: [
        { text: 'Unlimited projects', included: true },
        { text: '50GB storage', included: true },
        { text: 'Priority support', included: true },
        { text: 'API access', included: true },
      ],
      action: { label: 'Get Started', href: '/signup?plan=pro' },
      featured: true,
      badge: 'Most Popular',
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      description: 'For large organizations',
      features: [
        { text: 'Everything in Pro', included: true },
        { text: 'Unlimited storage', included: true },
        { text: 'Dedicated support', included: true },
        { text: 'Custom SLA', included: true },
      ],
      action: { label: 'Contact Sales', href: '/contact' },
    },
  ]}
/>