React Pricing

Enterprise pricing without the startup wall of gradients: tier cards with a monthly/annual toggle (annual shows the discounted per-month price), a per-tier feature list where each row is included, excluded, or carries a value (10 seats), one highlighted recommended tier, and a CTA per card. Custom-priced tiers show a label like "Custom" instead of a number.

MonthlyAnnual−20%

Evaluation

For proof-of-concept and academic use.

Free
Start evaluating
  • core component library
  • 1 single seat
  • community support
  • commercial use
  • priority SLA

Team

POPULAR

For product teams shipping to production.

$49/mo
Start free trial
  • everything in Evaluation
  • 10 seats included
  • commercial license
  • email support
  • priority SLA

Enterprise

For regulated and large-scale deployments.

Custom
Contact sales
  • everything in Team
  • ∞ unlimited seats
  • on-prem / air-gapped
  • 24/7 priority SLA
  • security review support

Toggle Annual to see the discounted per-month price on the Team tier.

Installation

npx shadcn@latest add pricing.json

Usage

Loading...

Props

PropTypeDefaultDescription
tiersPricingTier[]—Tier definitions (see below)
billingTogglebooleantrueShow the monthly/annual switch

PricingTier: { name, description?, monthly, annual?, priceLabel?, currency?, period?, features: { label, value }[], cta, href?, highlighted?, badge? }. Feature value is true (included), false (excluded), or a string (shown before the label).