Three Tier
A three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.
A three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.
The Modern SaaS Collection unlocks the source for every Modern SaaS block. All Access unlocks every Collection.
Already purchased? Log in
Three Tier is the full pricing story on one screen. A centered header sits above three plans, Basic, Pro, and Scale, with the Pro plan inverted onto a solid panel so the recommended tier reads first. Each card stacks a name, a one line audience, a price, and an icon feature list, and a full width enterprise banner rounds the section off for the deals that never fit a card.
Every card carries its own annual billing toggle, so a visitor can flip a single plan between monthly and annual without touching the others, while the Scale plan is marked annual only. Everything is built on the shadcn Card, Switch, and Button primitives and driven by theme tokens, so the section holds its shape in light and dark mode with no external images.
Reach for this block as the dedicated pricing moment on a Modern SaaS landing page or a standalone pricing page, once a visitor understands the product and is weighing plans. The inverted Pro card does the steering, so lead with the tier you most want people to pick.
A natural flow around it on a Modern SaaS page:
Before
After
The obvious fit is three self serve tiers with a featured middle plan and an enterprise handoff below. A few other ways to use the frame:
Tip: keep each feature to a short phrase with a single icon so the three cards stay scannable side by side, even when one plan lists more than the others.