shadcn.io is not affiliated with official shadcn/ui
Stat Strip CTA Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.