shadcn.io is not affiliated with official shadcn/ui
Metric Hero Rows Pricing Block for Vue
Four CDN plans as rows of one hairline table, each led by its monthly transfer: a bar to scale across the row with the allowance written big at its end, then the price and a call to action.
Installation
Overview
Lead with the headline number of each plan in this metric hero rows pricing section. A compact header, a heading, one sentence and a two-line key of the overage rate and the edge network, sits under the page's top rule and side rails, drawn by Guides with a + mark on each corner of the table below. Its four rows, Hobby, Launch, Scale and Peak, share their hairlines and are under 120 px each, so all four and their buttons fit on a laptop's first screen. Each row runs a bar to scale across it, from 100 GB to 100 TB, with the allowance written at display size over the bar's end, so the figures climb the page like a chart, and the plan's name, its price and its price per terabyte on the start side, which falls from $20 to $9.90, and a Shine Button on the end side. The recommended Scale row carries a Best value outline Badge, a darker bar and the one primary button. On a phone each row keeps its plan and button on one line with the bar and figure beneath. Built with Badge, Shine Button and Guides, with CSS transitions only. For CDN, bandwidth and storage pricing and any plan ladder where one numeric limit is the main difference between tiers.
FAQ
How do I change the tiers and the headline metric?
Edit the TIERS array at the top of the file. Each tier has its name, monthly price (0 shows "Free"), cta, recommended, and its metric: transfer and unit as written ("10", "TB") plus gigabytes, the same amount as a number for the bar and the price per terabyte. To lead with another metric, such as requests or seats, change the unit text in the markup and the numbers; the bars compare whatever you give them. The FACTS array holds the two lines in the header's key.
How are the bars scaled?
On a log scale, because 100 GB to 100 TB is three orders of magnitude and a linear bar would leave three of the four as slivers: reach maps the log of each allowance onto 35% to 100% of the track, so the four bars fill 35%, 57%, 78% and 100%, and the footnote says so. The floor leaves room for the first figure to sit at its bar's end. The bars are decorative (the figure says the amount), grow from the start of their track on first paint, and are drawn at full length at once under reduced motion. In a right-to-left layout they grow from the right.
What does a screen reader hear for each row?
The plan's name first, as an h3, then its price and price per terabyte, the metric ("100 terabytes of data transfer per month") and the link, named with its plan ("Start trial, Scale plan") since three tiers share the label. The grid shows the figure and bar in the middle of the row, but they follow the plan in the page, so a figure is never read as the end of the row before it. The bar isn't read at all.
How do the rows adapt to smaller screens?
From the md breakpoint each row is one line of three columns: the plan in a fixed column, the bar and its figure taking the remaining width, and the button in a fixed column at the end. Below it the row is two lines from the same markup: the plan and its button, then the bar across the full width. A figure never wraps or shrinks below its text: if a short bar is narrower than its figure, the figure keeps its width and the bar grows into it.
How do I connect the calls to action?
Each call to action is a link. Point the free and paid tiers at your sign-up or checkout route with the tier id (/checkout?plan=scale). Move recommended: true to feature another tier: its badge, primary button and darker bar move with it.
When should I use rows instead of a column of plan cards?
Use rows when one number is the whole difference between tiers and the price should be read against it: a bar to scale shows what each step up buys, and the falling price per unit shows the discount without a sentence. Use cards when each tier has a list of features to carry, and a table or calculator when several metered limits interact.