Pricing table with feature comparison and highlights.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

plans

• Type: string
• Pricing plans (JSON array)

showBillingToggle

• Type: boolean - Default: false
• Billing toggle

monthlyLabel

• Type: string - Default: 'Monthly'
• Monthly label

yearlyLabel

• Type: string - Default: 'Yearly'
• Yearly label

columns

• Type: 2 | 3 | 4 - Default: 3
• Layout columns

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 12
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

className

• Type: string
• Additional CSS class

onPlanClick

• Type: (plan: PricingPlan) => void
• Plan click handler

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 12px; /* Border radius */--cc-primary: #3b82f6; /* Primary brand color */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-pricing-tables - Component wrapper