shadcn.io is not affiliated with official shadcn/ui
Step Up Pricing Block for Solid
An upgrade path drawn as a staircase: four tiers as steps rising along the line, each as tall as its price, with name, price and button on its tread and what it adds in its riser.
Installation
Overview
Show an upgrade path that a buyer can climb with this step up pricing section, shown here for Fernhill SEO, a rank tracker with Local, Regional, National and Global tiers. The four tiers are a literal staircase in one band between the page's solid side rails, with + marks on its corners under the spine's top rule: each step stands on the same floor and is as tall as its price, so the rise reads as the cost of growing. A step's height follows its monthly price on a square-root scale, from 88 px for the cheapest tier to 300 px for the dearest, so the first step is still a step. Each tread carries the step number, the tier's name, its price, which rolls to its new amount with Sliding Number when the Segment Group switch in the header row changes the period, and a Shine Button; each riser is a little darker than the one before and lists what the step adds. Regional carries a Most popular outline Badge and the only primary button. Below lg the stairs become a vertical list, one tier after another. Built with Badge, Segment Group, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For SaaS with four or more tiers, usage ladders and any pricing page about growing into the next plan.
FAQ
How do I change the tiers and their prices?
Edit the TIERS array at the top of the file. Each tier has an id, a name, its monthly price, its annual price (the monthly amount when billed yearly, 20% off here), unlocks (one line for each thing the step adds), popular for the tier with the badge and the primary button, and the button's cta and href. CURRENCY is the symbol written before each price. The steps are taller or shorter on their own, because their heights are worked out from the prices.
How are the step heights worked out, and can I change them?
riseOf() maps each tier's monthly price to a height between LOW and HIGH (88 and 300 px) using the square root of the price, so a tier that costs 17 times as much isn't 17 times as tall. Change the two constants to make the staircase flatter or steeper. The height is set as a CSS variable on the riser and applied from lg; a riser is never shorter than its list, so long lists need a higher LOW or fewer lines.
How do I connect the buttons to checkout?
Each button is a real link to its tier's href: point it at your checkout with the tier and the billing period, for example /checkout?plan=regional&billing=annually.
It's a ShineButton whose asChild renders the link, where your router's link can go instead.
Is the staircase accessible?
Yes. The tiers are an ordered list in price order, each with an h3 for its name and "Step 2" as text, and what a step adds is a list under it. The riser's darker shades and the step heights are decoration; every fact is also text. Each price keeps its amount in visually hidden text with "per month", each button names its tier ("Start Regional, Regional plan"), and the billing switch is a radio group named "Billing period".
What happens on small screens?
Below the lg breakpoint the staircase becomes a vertical list: each tier is a band with its step number, name, price and button, and its list of what it adds under them, so the Regional button is within the first screen and a half. Nothing scrolls sideways. From lg the four columns stand on one floor, and the whole staircase is about 450 px tall.