Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pricing blocks

Pro

Step Up Pricing Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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 with render set to an a element and nativeButton={false}.

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.

When should I use a staircase instead of cards?

When the tiers are an ordered ladder where each includes the one below it, and growing into the next is the story. If the plans are different products or audiences rather than steps, side by side cards or tabs are clearer.

  • Pro

    Timeline Tiers Pricing

    Discounts and offers

    Tenure discounts for a managed hosting plan on a vertical timeline beside a headline and a call to action that stay in view: each stop from day one to year five shows its discount, the price it brings and what it unlocks.

  • Pro

    Dynamic Tiers Pricing

    Calculators

    Graduated per-user pricing, explained: type a number of monthly active users and four stacked tier bands fill from the left, each showing its users times its rate, summed into the monthly bill.

  • Pro

    Team Tiers With Avatar Clusters

    Seats and teams

    Three team-size plans, each opening with a cluster of avatars sized to its host range, then its per-host price, a call to action and its features, with a segmented plan switcher on a phone.

  • Pro

    Plan Recommender Pricing

    Plan finders

    A needs checklist for picking a plan: tick what you need and the cheapest plan that covers every need lights up with its price, while each need says which plan it starts at.

  • Pro

    Stacked Cards Pricing

    Plan cards

    A fanned deck of plan cards for a flashcard app: the chosen plan's card in front with its price, button and features, the other two peeking out behind, brought forward by a tab list.

  • Pro

    Storage Plans Pricing

    Charts and figures

    Three archival storage plans as cells of one ruled band, each led by an oversized capacity figure with restore time and free restores under it, prices that roll on a monthly and annual switch.

All 108 pricing blocks