shadcn.io is not affiliated with official shadcn/ui
Sparkline Stats Block for Ark UI
Three sparkline cells for a web-analytics tool, each with its figure for the last seven days, its change on the seven before and thirty days of line under a soft fade.
Installation
Overview
A sparkline row for React with Ark UI. A centred header states the week's traffic, "Visits are up 4.3% on last week". Under it, visits, signups and bounce rate sit in three cells with overshoot: each is a hairline frame whose lines run a little past its corners, with a + on the top corner. A cell holds its label, the figure for the last seven days (it rolls up once), its change on the seven days before as an arrow and a sign, and a line of the last thirty days drawn under a soft fade and ending on a dot. Every figure, change, line and the headline are computed from three typed daily series, so the text and the drawings agree. The cells are side by side from md and a stack of three below it. It is built from Guides, the Sliding Number, Lucide arrows, hand-drawn SVG and CSS transitions, and uses no colour for good or bad. For analytics, finance and operations overviews.
FAQ
How do I change the data?
Edit METRICS: each is a label, a kind (total for counts, average for rates), a unit and a series of thirty daily readings, oldest first. The series here come from dailyOf, which draws a steady climb with a weekday pattern and a little seeded noise; replace it with your own arrays. The cell's figure, its change, the line and the headline are computed from the series.
How is the fade drawn?
The fill is its own SVG path under the line, faded toward the foot with a CSS mask, so there are no gradient definitions to keep unique. The line is a second SVG on top with a non-scaling stroke, so it stays 2 pixels at any width. The end dot is HTML, so it stays round.
Why aren't rises green and falls red?
Whether a change is good depends on the figure: a falling bounce rate is good news. Each change is an arrow and a sign in the text colour, so the block is correct in every theme and readable without colour.
Is it accessible?
Yes. Each cell is a description list: the label, the value and the change are read together. Each line is an image whose name gives where it starts and ends, its lowest and its highest, and the days under it say what it covers. Values sit in bdi elements and the lines are dir="ltr", so a right-to-left page keeps time running the same way.