shadcn.io is not affiliated with official shadcn/ui
Sparkline Tile Grid Stats Block for Svelte
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 Svelte with Ark 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.