Pricing Section

The Pricing section component creates responsive, interactive pricing tables with built-in support for monthly/yearly billing toggles, feature comparisons, and customizable tiers.

Overview

The Pricing section helps you:

• Display pricing plans clearly and professionally
• Toggle between monthly and yearly billing options
• Highlight featured/popular plans
• Show feature comparisons across tiers
• Calculate and display savings for yearly plans

Basic Implementation

1
---
2
import Pricing from '@/components/NST-components/sections/pricing/Pricing.astro';
3
import { pricingData } from './your-pricing-data';
4
---
5

6
<Pricing data={pricingData} />

Data Structure

The pricing component expects a structured data object with the following format:

1
interface PriceData {
2
  models: ['monthly' | 'yearly'];
3
  defaultModel: 'monthly' | 'yearly';
4
  tiers: {
5
    id: string;
6
    name: string;
7
    description: string;
8
    featured?: boolean;
9
    price: {
10
      monthly: number;
11
      yearly: number;
12
    };
13
    features: {
14
      [key: string]: {
15
        value: boolean | string | number;
16
        tooltip?: string;
17
      };
18
    };
19
    cta: {
20
      text: string;
21
      href: string;
22
    };
23
  }[];
24
  sections: {
25
    name: string;
26
    features: string[];
27
  }[];
28
}

Example Configuration

1
const pricingData = {
2
  models: ['monthly', 'yearly'],
3
  defaultModel: 'monthly',
4
  tiers: [
5
    {
6
      id: 'free',
7
      name: 'Free',
8
      description: 'Perfect for getting started',
9
      price: {
10
        monthly: 0,
11
        yearly: 0,
12
      },
13
      features: {
14
        Projects: { value: 1 },
15
        'Team Members': { value: 2 },
16
        Support: { value: false },
17
      },
18
      cta: {
19
        text: 'Get Started',
20
        href: '/signup',
21
      },
22
    },
23
    // ... additional tiers
24
  ],
25
  sections: [
26
    {
27
      name: 'Core Features',
28
      features: ['Projects', 'Team Members', 'Support'],
29
    },
30
    // ... additional sections
31
  ],
32
};

Features

Billing Toggle

• Seamless switching between monthly and yearly pricing
• Automatic yearly discount calculation
• Smooth price updates with transitions
• Accessible toggle controls

Tier Highlighting

1
{
2
    // ... tier configuration
3
    featured: true,  // Adds visual emphasis and "Most Popular" badge
4
}

Feature Display Options

• Boolean features (checkmark/cross)
• Quantitative features (with units)
• Tooltip support for additional context
• Grouped feature sections

Styling Customization

The component supports various styling options through CSS classes and custom properties:

1
<Pricing
2
    data={pricingData}
3
    class="custom-pricing-section"
4
/>

CSS Custom Properties

1
.custom-pricing-section {
2
  --pricing-featured-shadow: 0 4px 6px -1px rgb(var(--color-primary) / 0.1);
3
  --pricing-hover-transform: translateY(-4px);
4
  --pricing-transition-duration: 300ms;
5
}

Accessibility Features

• ARIA labels for interactive elements
• Keyboard navigation support
• High contrast mode compatibility
• Screen reader optimized markup
• Focus management for toggles

Best Practices

1. Content Organization

   • Group related features logically
   • Order tiers from basic to premium
   • Keep feature descriptions concise
   • Use consistent terminology

2. Visual Hierarchy

   • Highlight recommended plans appropriately
   • Maintain clear price visibility
   • Use adequate spacing between elements
   • Ensure mobile responsiveness

3. Interaction Design

   • Provide clear toggle feedback
   • Animate price changes smoothly
   • Include clear calls-to-action
   • Maintain visible saving calculations

Common Customizations

Custom Feature Icons

1
<Pricing
2
    data={{
3
        ...pricingData,
4
        features: {
5
            customIcon: {
6
                value: true,
7
                icon: 'path/to/icon.svg'
8
            }
9
        }
10
    }}
11
/>

Custom CTA Styling

1
<Pricing
2
    data={{
3
        ...pricingData,
4
        tiers: [{
5
            ...tier,
6
            cta: {
7
                text: 'Get Started',
8
                href: '/signup',
9
                class: 'custom-cta-button'
10
            }
11
        }]
12
    }}
13
/>

Related Components

• Button - Used for CTA elements
• Badge - For feature highlights
• Card - Base styling for pricing tiers
• Toggle - Monthly/yearly switch mechanism