shadcn.io is not affiliated with official shadcn/ui
Hero With Stats Block for Solid
A split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.
Installation
Overview
Back your headline with numbers. On the start side, a status pill links to a status page above a headline, a sentence, a Shine Button, an outline button and a quiet plan line. Across a solid divider, the figures fill the whole end half as four cells on shared hairlines: emails delivered, uptime, median send time and support hours, each with its label, the period it covers and, on wider screens, a twelve-bar trend whose last bar is the current month. Two by two on a phone and the figures stack under the copy. It's built from Announcement, Status, Shine Button, Button and Guides, with Lucide icons, Tailwind CSS and a CSS entrance that stays still under reduced motion. Made for SaaS landing pages, infrastructure and API products and marketplaces, where traction and reliability figures make the promise credible.
FAQ
How do I change the figures?
Edit the STATS array at the top of the file: each figure has a value, a label, a period and a trend, twelve bar heights in percent. The value is text, so write it as you want it read, "2.4B", "99.99%" or "180 ms". tabular-nums gives every digit the same width. The figures here are samples for a fictional product: replace them with your own, and keep the period honest, since "in the last 30 days" is a claim. Four cells fill the two-by-two rail; for six, change the rail to grid-rows-3.
How do screen readers read the figures?
The figures are a description list (dl): each label is a term (dt) and its figure and period the descriptions (dd), so a screen reader pairs them, "Uptime, 99.99%, over the last 12 months". The figure is shown above its label, but the label comes first in the markup, as a reader expects; the order-* classes swap them on screen only. The trend bars are decoration, hidden from assistive technology. The headline is the page's one h1.
Where do the pill and the two buttons link to?
All three are links to #: point them at your status page, sign-up and documentation.
Each button renders its a through asChild, so the button's styles land on the link.
Why are the figures wrapped in a bdi element?
Values such as "2.4B", "99.99%" and "24/7" mix digits with symbols, and in a right-to-left page the browser can reorder them, showing "7/24". <bdi> isolates each value, so it reads the same in every language direction while the grid itself mirrors. The bars keep dir="ltr", since a time series reads oldest to newest in every language.
Can the figures count up when they come into view?
They're static by design: a figure that starts at zero says, for a moment, that you have no users. If you want the motion, the CountingNumber component counts up to a value once it's in view, gives screen readers the final value and shows it at once under reduced motion; give it the number and keep the suffix ("B", "%") as text beside it. "24/7" stays text either way.
How does the hero fit on a phone?
Below the lg breakpoint the copy comes first and the figures under it, behind a rule with + marks, two by two. The trend bars are hidden below sm so the cells stay short, and the figures drop to text-3xl. The headline wraps, balanced, at text-4xl, and the buttons wrap onto a second line if they don't fit on one.
When should I use a hero with stats instead of a hero with logos?
Use figures when your numbers are the strongest proof you have: a large user base, a high uptime, a fast response time. Use customer logos when the names of the teams already on board say more than any figure. Before launch, when the figures would be small, use neither and lead with the product.