Studiov1.2.3
Studio/Patterns/Pricing Table

Pricing Table

Data Display

Side-by-side comparison of pricing tiers or plan features. Highlights the recommended tier. Each column shows price, features, and CTA.

All patterns
pricing table
Reusable pane preview
Use Cases
  • SaaS pricing pages
  • Investment tier comparison (A/B/C units)
  • Service level breakdowns
  • Credit class pricing (RCCS)
Do
  • Highlight one tier as recommended
  • Use check/cross icons for feature comparison
  • Keep tier count to 2-4
  • Show price prominently with billing period
Avoid
  • Show more than 4 tiers
  • List more than 15 features
  • Use pricing tables for non-comparable items
  • Hide the CTA button below the fold
Reference component: PricingTableVariants: 2Token bindings: 6