shadcn.io is not affiliated with official shadcn/ui
Stat Paired Feature Quad Features Block for Vue
Four stat and feature pairs in a 2 by 2 grid that shares its hairlines: a giant number counted from its own was and now figures, a pair of bars, an icon, a heading and the sentence that explains it.
Installation
Overview
A grid of four stat and feature pairs for Vue with Ark UI. A compact header says "Every feature, tied to a number". Under it, one rounded frame holds four cells that share their hairlines, two across from md and one on a phone. Each cell has a giant number in tabular figures (a Sliding Number, so the digits roll if a value ever changes) with its caption under it, then a pair of bars: the old figure in a faint foreground and the new one in full, each labelled. Beside them, an icon, a heading and a sentence say what makes the number true, quoting the same two figures. The numbers are counted, not typed: 10 times from 12 minutes and 72 seconds, 99.99% from 1 failed run in 10,000, 47% from the two monthly costs, 2 minutes from the setup time. It's built from Guides and Sliding Number, with plain CSS for the bars.
FAQ
How do I use my own figures?
Edit the four constants at the top (BUILD, FAILED, SPEND, SETUP: each a was and a now) and the four entries of STATS. Each entry's figure is counted from its constant (Math.round(BUILD.was / BUILD.now) for the 10 times), its bars' lengths come from shareOf, and its sentence is a template that quotes both figures, so the number, the bars and the text always agree. Add a fifth measure and the grid gains a cell, so keep the count even.
What do the bars show?
The old figure is always a full bar in a faint foreground, and the new figure is a bar in proportion to it (never under 4%, so a big drop still shows). Both are labelled in words ("Was 12 min", "Now 72 s"), so the bars are decoration and the figures are text.
How are units written?
Durations are written by duration (seconds under two minutes, whole minutes above), money by dollars with a fixed locale so the server and the browser agree, and the failure rate as a count per 10,000. Values with a unit sit in a bdi element, so a right-to-left page keeps "12 min" and "$8,400" in reading order.
What moves, and what happens with reduced motion?
The block fades up once when the page loads, and the digits are an odometer that rolls when a value changes. With reduced motion both are off: the block simply appears.