shadcn.io is not affiliated with official shadcn/ui
Sparkline Tile Grid Stats Block for React
Four KPI tiles for a subscription-box company, each holding the same twelve weeks as an area sparkline, with one slider that moves a cursor through all four and rewrites their values to the chosen week.
Installation
Overview
A scrubbable KPI grid for React with Base UI. A compact header says what the twelve weeks added up to ("Subscribers grew 27.1% in 12 weeks") and holds a slider from Week 1 to Now at its end. Below it, a framed grid with + marks on its corners holds four tiles that share their hairlines: active subscribers, boxes shipped, weekly revenue and skip rate. Each tile shows its value, its change on the week before and the twelve weeks as an area line. Move the slider and a cursor moves through all four lines at once: the weeks up to it are drawn at full weight, the weeks after it faint, the four values roll to that week's readings and each change is rewritten against the week before. The last week is Now. Every value, change, line and cursor is computed from three typed weekly series, with revenue worked out from the boxes shipped at the box price, so the tiles never disagree. Four tiles across from lg, two by two below it. It's built from Slider, SlidingNumber and Guides, with the slider in your theme's foreground colour.
FAQ
How do I change the series?
Edit SUBSCRIBERS, SHIPPED, SKIPS and BOX_PRICE at the top of the file. The series are one reading per week, oldest first, and they must all have the same length; the slider's range, the lines and the "weeks" in the header follow that length. KPIS says how each tile is written (prefix, suffix, decimals) and how its change is shown: a share of the week before, or points for a rate.
How does the scrub work?
One Slider holds the week. Its value drives every tile: the reading comes from series[week - 1], the line is split at the cursor (one path up to it at full weight, one from it faint) and the cursor is a hairline and a dot positioned from the same numbers. The cursor eases between weeks with a short CSS transition, which is off with reduced motion. Dragging, the arrow keys, Home, End and Page Up and Down all work, since it is a real slider.
What does a screen reader hear?
The slider is named "Week" and reads its position as words ("Week 7 of 12", "Week 12 of 12, now"). A polite live region repeats all four readings for the chosen week ("Week 7 of 12: 3,702 active subscribers, 3,395 boxes shipped, ..."). Each line is an image whose name gives its first and last readings; the cursor and the dots are decorative. Numbers sit in bdi elements and the signed changes stay left to right, so a right-to-left page doesn't move a sign.
Do the lines run the right way in right-to-left languages?
Yes, they run from the first week to the last in every language, as time series do, so the line boxes are always left to right. The slider, the labels and the tile text follow the page's direction.
How does it fit on a phone?
The slider goes under the header text at full width and the tiles sit two by two, meeting at a hairline cross, each with a shorter line. A tile's name and change line reserve two lines so a wrapped label doesn't move the lines out of step. Nothing scrolls sideways at 320 pixels.
Related
- Pro
KPI Bar with Trends Stats
KPI bands and tilesFour figures for a garden-centre analytics tool in cells that share their hairlines, each with its change on the week before and an area chart that runs to the cell's edges and foot.
- Pro
Sortable Sparkline Tile Grid Stats
KPI bands and tilesSix web-vitals tiles in one hairline frame, each with a fourteen-day line, its low and high marked by ticks, and a Sort by switch that re-orders them by change, budget used or volatility.
- Pro
Small Multiples Sparkline Stats
SparklinesSix measures of a stationery shop as aligned sparkline rows in one framed panel on a shared month axis, with a guide that reads all six at the month under your pointer.
- Pro
Compact KPI Tile Grid Stats
KPI bands and tilesSix dense KPI tiles for a café group in one hairline frame, with a Day, Week and Month switch that re-reads all six figures and rolls their digits.
- Pro
Command Center Metric Board Features
Metrics and chartsA metrics console in a card in a card that follows your theme: six metric tiles with a value, a signed change and a sparkline are the tabs of one tablist, and choosing one opens a larger chart of its series in a strip below.
- Pro
Connected KPI Bar Stats
KPI bands and tilesFour headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.