Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Stacked Metrics Sparkline Stats Block for Svelte

Three app cards for a studio, each with a hero audience figure that rolls up, a twelve-week line and two supporting measures with tiny bar series, in cells set apart with overshoot lines.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A product-health stats board for Svelte with Ark UI. A centred header says how many of the studio's apps grew their audience this week, then three cells sit apart, each with lines that run a little past its corners and a + on each corner. A card names an app and what it is, gives the hero figure (a weekly audience that rolls up once it scrolls into view), its change on the week before and a twelve-week line with a dot on this week. Under the line, two supporting measures sit in rows: a label, the latest value and a 40 by 12 pixel bar series of the same twelve weeks, with the latest week at full weight. Everything comes from one table of weekly readings, so the numbers and the drawings agree. Three across from lg, one per row below it. For studios, agencies and platforms that run several products and want one honest page.

FAQ

How do I change the apps and their measures?

Edit APPS at the top of the file. An app has a name, a kind, a hero measure and two support measures; a measure is a label, twelve weekly readings (oldest first), the decimals to show and a suffix such as %. The change, the line, the bars and their accessible names are computed from those lists.

What are the little bars?

Each is the same twelve weeks as the supporting measure, drawn as twelve bars between 2 and 12 pixels tall: the lowest week is the shortest and the highest the tallest, so none disappears. The latest week is drawn at full weight and the rest at 35%. Each bar series is an image with a text name that gives its start, end, lowest and highest value.

Why does the hero figure roll?

It is the catalog's Sliding Number with its trigger set to view: the digits roll up from zero once the figure is on screen, and the final number is the one screen readers get. With reduced motion the number simply appears.

Why no green and red?

A rise in listeners and a fall in crash rate can both be good news, so the block shows direction with an arrow and a sign in the text colour and leaves the judgement to the reader. It also keeps the block correct in every theme preset.

Is it accessible?

Each card is headed by its app name, and the hero figure is a description list (label, then value and change). Values sit in bdi elements and signed changes are kept left to right for right-to-left pages. Every line and bar series is named in text, and nothing depends on colour.

How does it fit on a phone?

The three cards stack one per row with the same content, and the lines that run past their corners keep their space because the cells are set 1.5 rem apart. Nothing scrolls sideways at 320 pixels.

All 122 stats blocks