shadcn.io is not affiliated with official shadcn/ui
Sortable Sparkline Tile Grid Stats Block for Radix UI
Six 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.
Installation
Overview
A sparkline tile grid for React with Radix UI. A start-aligned header has a Sort by switch (Change, Budget used, Volatility) at its end and a line under the sentence that says how the tiles are ordered. Under it, six tiles share their hairlines inside one frame with + marks on its corners: each shows a web vital (largest paint, interaction delay, layout shift, server response, first paint and blocking time), its latest value, its change since day one, a fourteen-day line with ticks at its low and high and a dot on the last day, and one line that says what the current sort measures for that tile ("84% of its 2.5 s budget"). Switching the sort re-orders the tiles, biggest first, and announces the new order; the grid never changes shape. Three across from lg, two across below it. For performance, operations and finance pages that want the reader to pick what to chase first.
FAQ
How do I change the vitals or the sorts?
Edit VITALS and SORTS at the top of the file. A vital is a label, a budget, its decimals, a unit and fourteen daily readings (oldest first). Change is the move since day one as a share of day one, budget used is today's reading over the budget, and volatility is the gap between the lowest and highest reading as a share of the average. Add a sort by adding an entry to SORTS, a number to Figure and a branch to orderedBy.
How does the sort switch work?
It is the catalog's Segment Group, a single-choice control with arrow-key movement, wired to one piece of state. The list itself is re-ordered, not just restyled, so reading order and focus order follow what you see. A polite live region under the header announces the new order once.
What are the ticks on each line?
The line always runs between 10% and 90% of its box, so the lowest and highest readings sit at fixed heights; two short ticks at the start edge mark them, and the line under the tile gives the two numbers in words ("Low 1.9 s, high 2.9 s"). The dot is the last day.
Why aren't good and bad coloured?
Lower is better for most vitals and higher is better for others, so the block shows direction with an arrow and a sign and leaves the judgement to the reader. The only thing that tells a tile it is over budget is its text ("101% of its 800 ms budget").
Is it accessible?
The tiles are an ordered list and each is a description list; every line is an image with a text name that gives its start, end, lowest day and highest day. The switch has an accessible name and visible focus. Values sit in bdi elements and signed changes stay left to right for right-to-left pages.