shadcn.io is not affiliated with official shadcn/ui
Stat Strip CTA Block for React
A band call to action with the headline and a Shine Button in a header band, then a closing band of three figures that are tabs, divided by solid hairlines: pick a figure to read how it is measured.
Installation
Overview
A stat-strip call to action for React with Base UI. A header band holds the headline for Plover, a made-up cookie-free analytics tool, one sentence, a Shine Button and an outline button, with the buttons at the end on desktop. Under it a closing band, with + marks where its rules meet the page rails, splits into three equal cells: median latency, uptime and setup time. Each figure is a tab, and the panel under the strip says how that number is measured, so the claim comes with its proof. It's built from Tabs, Guides, Shine Button and Button, with CSS transitions for the entrance. For analytics, infrastructure and developer tools whose numbers have to be believed.
FAQ
How do I change the figures and what each says?
Edit STATS at the top of the file: each entry has a value, a label, and the title and detail of its panel. Add or remove an entry and the strip follows, though the three-column grid in the list is sized for three; change grid-cols-3 if you use another number.
Are they real tabs?
Yes. The strip is a tab list with one tab per figure and a panel for each, so a screen reader hears "Median latency 50 ms, tab 1 of 3, selected". The arrow keys move between figures, Home and End jump to the first and last, and the tab key moves on to the panel. The selected figure gets a foreground rule on its top edge and a tint, so the state isn't carried by colour alone.
Does the panel change height when I switch?
No. Every panel is also rendered, invisible and hidden from assistive technology, in the same grid cell as the real one, so the cell is as tall as the tallest panel and nothing below it moves.
Where do the buttons go?
Both are links (href="#"): point Start tracking free at your sign-up and View the live demo at your demo.
Each button renders the link it's given with render, with nativeButton={false}.
Are the explanations real?
They are placeholders for a made-up product. Replace each detail with how you actually measure the number, because a figure with an explanation that doesn't match your data is worse than a figure alone.
How does the strip fit a phone?
The header stacks with the buttons under the sentence, and the three tabs share the width in equal columns with their labels wrapping, so it holds at 320 pixels. The figure steps down from text-5xl to text-2xl. With reduced motion the entrance and the panel's fade are off.
Related
- Pro
Centered Number With Stats CTA
Figures and statsA card in card call to action that follows your theme: one anchor figure at display size with a Shine Button, beside three supporting stats set like a receipt with dotted leaders.
- Pro
Stat Hero CTA
Figures and statsA reverse split call to action with a giant hollow figure that floods with colour as it scrolls into view in the start cell, then a solid divider, a headline, one sentence, a Shine Button and a quiet second action.
- Pro
Centered Metric Cluster CTA
Figures and statsA centred launch-day call to action with a scoreboard drawn as a framed figure: an Upvote button whose count rolls on press, flanked by the comment count and today's rank, and a Shine Button.
- Pro
Card Inset Metric Row CTA
Figures and statsA start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.
- Pro
Counter Stats Hero
Stats and live dataA compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.
- Pro
Hero With Stats
Stats and live dataA 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.