Shadcn pricing sections for SaaS
SaaS pricing pages drive a real share of conversion. Self-serve buyers land here before signing up; sales-led buyers land here before requesting a demo. The structure that works for 80% of SaaS: a three-tier ladder (Starter, Pro, Enterprise) with the middle tier visually anchored by a 'Most popular' badge. Feature matrices are for procurement-led enterprise buyers — overkill for self-serve.
npx shadcn@latest add https://ruixen.com/r/pricing-plans
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for saas
The most under-used lever on SaaS pricing pages: the annual-vs-monthly toggle that defaults to 'Annual'. A 20% annual discount visible at the top primes the visitor to think in annual terms, which doubles the average plan revenue. Defaulting to monthly leaves real money on the table.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Shadcn pricing section — a comprehensive pricing plans component with multiple tiers and features.
Shadcn pricing section — Modern pricing component with customizable tiers, features, and glass morphism design.
Shadcn pricing section — a pricing component with user-based scaling and dynamic pricing calculations.
Shadcn pricing section — a comprehensive pricing comparison matrix with feature categories, plan columns, and tooltips.
Frequently asked questions
Three tiers or four tiers?
Three tiers. Four-tier pricing shows up when a product manager wants to add a 'Team' tier between Pro and Enterprise — usually because a sales call surfaced an objection. Resist. Four tiers means visitors have to compare four options instead of three, decision fatigue rises, and the conversion rate drops. Solve the 'Team' objection inside the Pro tier with a per-seat scaler, not by adding another column.
Should I show the price for the Enterprise tier?
No — 'Contact us' for Enterprise, with starting price as 'Custom' or 'Let's talk'. Hiding the Enterprise price isn't evasion; it's signaling that this tier is for buyers who need a real conversation about volume, security, and contracts. Showing a number forces you to anchor at one figure that's wrong for half your enterprise prospects. Add 'Starting at $2K/mo' if you want a soft anchor without committing.
Where should the FAQ go on a pricing page?
Directly below the pricing cards, before any other content. Pricing-page FAQs catch the buyer who's almost converted but has one specific objection ('Can I cancel anytime?', 'Do you offer non-profit discounts?', 'What happens at the end of the trial?'). Five questions max, accordion format, all closed by default. Open-by-default FAQs add scroll length without adding signal.
Browse all pricing
The Pricing category page has every Ruixen pricing variant — not just the curated picks for saas.
See all pricing →