Pricing Table
Data Display
Block
Display pricing tiers with features comparison for subscription or product offerings.
Preview
Pricing table with multiple tiers
Free
For individuals getting started
$0/month
- Up to 3 projects
- 1 GB storage
- Basic analytics
- Email support
- API access
Most Popular
Pro
For growing teams
$29/month
- Unlimited projects
- 100 GB storage
- Advanced analytics
- Priority email support
- API access
Enterprise
For large organizations
Custom
Contact us for pricing
- Everything in Pro
- Unlimited storage
- Custom integrations
- Dedicated support
- SLA guarantee
Pricing Cards
Individual pricing cards for flexible layouts
Starter
Perfect for side projects
$9/month
- 5 projects
- 10 GB storage
- Basic support
Best Value
Team
For small teams
$49/month
- 25 projects
- 100 GB storage
- Priority support
- Team collaboration
Business
For scaling companies
$99/month
- Unlimited projects
- 1 TB storage
- 24/7 support
- Custom integrations
- Analytics
Two Column Layout
Simple side-by-side comparison
Monthly
$29/month
- All features
- Cancel anytime
- Email support
Save $120
Annual
$19/month
- All features
- Save 35%
- Priority support
PricingTable Props
PricingTable API reference
| Prop | Type | Default | Description |
|---|---|---|---|
tiers* | PricingTier[] | — | Array of pricing tiers to display |
onSelectTier | (tierId: string) => void | — | Callback when a tier CTA is clicked |
className | string | — | Additional CSS classes |
PricingCard Props
PricingCard API reference
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | Tier name |
description | string | — | Short description |
price* | number | string | — | Price value or custom text |
billingPeriod | string | 'month' | Billing period label |
features* | string[] | — | List of feature strings |
cta | string | 'Get Started' | Call-to-action button text |
ctaVariant | 'primary' | 'secondary' | 'outline' | — | Button variant |
highlighted | boolean | false | Highlight this tier |
badge | string | — | Badge text (e.g., "Most Popular") |
onSelect | () => void | — | Callback when CTA is clicked |
PricingTier Type
Full pricing tier data structure
interface PricingTier { id: string name: string description?: string price: number | string priceLabel?: string // Additional price context billingPeriod?: string // e.g., "month", "year" features: PricingFeature[] cta?: string // Button text ctaVariant?: 'primary' | 'secondary' | 'outline' highlighted?: boolean // Show as featured tier badge?: string // Badge text}
interface PricingFeature { name: string included: boolean | string // false, true, or custom text tooltip?: string}Usage
Import and implementation examples
import { PricingTable, PricingCard } from '@/blocks/data-display/pricing-table'
// Full pricing table<PricingTable tiers={[ { id: 'free', name: 'Free', price: 0, billingPeriod: 'month', features: [ { name: '3 projects', included: true }, { name: 'Basic support', included: true }, { name: 'API access', included: false }, ], }, { id: 'pro', name: 'Pro', price: 29, billingPeriod: 'month', features: [ { name: 'Unlimited projects', included: true }, { name: 'Priority support', included: true }, { name: 'API access', included: true }, ], highlighted: true, badge: 'Most Popular', }, ]} onSelectTier={(id) => handleSelectPlan(id)}/>
// Individual pricing cards<PricingCard name="Pro" description="For growing teams" price={29} features={['Unlimited projects', 'Priority support', 'API access']} highlighted badge="Best Value" onSelect={() => handleUpgrade()}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Multiple tiers: Display any number of pricing plans
- Feature comparison: Show included/excluded features with icons
- Highlighted tier: Emphasize recommended plan with border and shadow
- Badges: Add "Most Popular", "Best Value" badges
- Custom pricing: Support numeric prices or custom text like "Contact us"
- Button variants: Different CTA button styles per tier
- Responsive grid: Adapts to different screen sizes
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Semantic heading structure for tier namesButtons have descriptive textFeature lists use proper list markupKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between pricing cards and buttons |
| Enter/Space | Activate CTA buttons |
Notes
- Price information is clearly visible
- Checkmarks and X icons have semantic meaning
- Badge text provides additional context