Plans Section

The Plans section component creates interactive pricing tables with monthly/yearly billing options, feature comparisons, and customizable tiers. Perfect for SaaS products, subscription services, and membership sites.

Overview

Plans section provides:

• Dynamic Pricing: Toggle between monthly and yearly billing
• Feature Comparison: Detailed feature matrix across tiers
• Automatic Discounts: Calculate and display yearly savings
• Responsive Design: Adapts to all screen sizes
• Accessible Controls: ARIA-compliant interactive elements

Basic Usage

1
<Plans
2
  data={{
3
    models: ['monthly', 'yearly'],
4
    defaultModel: 'monthly',
5
    tiers: [
6
      {
7
        id: 'free',
8
        name: 'Free',
9
        price: { monthly: 0, yearly: 0 },
10
        features: {
11
          'Feature 1': { value: true },
12
          'Feature 2': { value: false },
13
        },
14
        cta: {
15
          text: 'Get Started',
16
          href: '/signup',
17
        },
18
      },
19
    ],
20
    sections: [
21
      {
22
        name: 'Core Features',
23
        features: ['Feature 1', 'Feature 2'],
24
      },
25
    ],
26
  }}
27
/>

Configuration

Pricing Tiers

1
interface PricingTier {
2
  id: string;
3
  name: string;
4
  price: {
5
    monthly: number;
6
    yearly: number;
7
  };
8
  features: {
9
    [key: string]: {
10
      value: boolean | string;
11
      tooltip?: string;
12
    };
13
  };
14
  cta: {
15
    text: string;
16
    href: string;
17
  };
18
  featured?: boolean;
19
}

Feature Sections

1
interface Section {
2
  name: string;
3
  features: string[];
4
}

Props API

Features

Billing Toggle

The component includes an interactive billing toggle that:

• Switches between monthly and yearly pricing
• Calculates and displays savings percentage
• Persists selection during navigation
• Updates prices dynamically

Feature Comparison

Feature comparison table supports:

• Boolean features (checkmark/x)
• Text value features
• Feature tooltips
• Section grouping
• Responsive scrolling

Visual Customization

Customize the appearance with:

• Featured tier highlighting
• Custom CTA buttons
• Flexible layout options
• Theme-aware styling

Best Practices

1. Pricing Structure

   • Keep pricing tiers clear and distinct
   • Highlight recommended plans
   • Show yearly savings prominently
   • Use consistent feature descriptions

2. Feature Presentation

   • Group related features logically
   • Use tooltips for complex features
   • Maintain consistent comparison points
   • Highlight key differentiators

3. User Experience

   • Ensure mobile responsiveness
   • Maintain clear visual hierarchy
   • Provide clear CTAs
   • Keep feature descriptions concise

Common Applications

• SaaS pricing pages
• Membership tiers
• Service packages
• Product comparisons
• Subscription plans
• Feature matrices

Accessibility Features

• ARIA labels for interactive elements
• Keyboard navigation support
• Screen reader-friendly markup
• High contrast visual indicators
• Semantic HTML structure

Related Components

• Button - For CTA elements
• Card - For individual plan displays
• Badge - For feature highlights
• Tooltip - For feature explanations