PricingTable
Display subscription plans with features and pricing in a professional layout.
Live Demo
Installation
Basic Usage
Props
| Prop | Type | Description |
|---|---|---|
| plans | Plan[] | Required. Array of pricing plans |
| onSelectPlan | (planId: string) => void | Required. Callback when plan is selected |
| currentPlan | string | Optional. Currently active plan ID |
| billingInterval | 'month' | 'year' | Optional. Toggle between monthly/yearly pricing |
| currency | string | Optional. Currency symbol (default: '$') |
Plan Type
Features
🎨 Professional Design
Modern card-based layout with hover effects
⭐ Highlighted Plans
Emphasize popular or recommended plans
💰 Flexible Pricing
Support for fixed prices and custom pricing
📱 Responsive
Adapts to mobile, tablet, and desktop
✅ Feature Lists
Clear feature comparison across plans
🔄 Current Plan Badge
Shows which plan user is currently on
Example with Billing Toggle