shadcn.io is not affiliated with official shadcn/ui
Command Center Metric Board Features Block for React Aria
A 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.
Installation
Overview
A metric board feature section for React with React Aria, written for Signalbox, a fictional metrics console. A tinted shell with + marks on its corners wraps a raised panel that is light on a light page and dark on a dark one. A title bar with a live dot sits over six metric tiles that share their hairlines in three columns: each shows a label, a value, a signed change with an arrow and a sparkline, and the tiles are the tabs of one tablist. Choosing a tile, with a click or the arrow keys, opens a detail strip under the board with a larger chart of the same series, its peak and its low. Every value, change, peak and low is read from the tile's series, so the tile and its strip always agree, and the strips keep one height so nothing moves when you switch. The compact header holds the one Shine Button. It is built from Tabs, Status, Guides and Shine Button with your theme's tokens. For observability, analytics and operations products whose proof is a handful of numbers that each go somewhere.
FAQ
How do I change the metrics?
Edit METRICS at the top of the file. Each has an id, a label, a unit, the number of decimals to write, a detail sentence and its series, the last 14 days oldest first. The value is the last point, the change runs from the first point to the last, and the peak and the low come from the whole series. Keep six for a three by two board, or four for a two by two.
Are the tiles real tabs?
Yes. The tiles are the triggers of a tablist named "Metric", and each opens a panel, so a screen reader announces "tab, 1 of 6, selected". Tab moves into the list, the arrow keys move between tiles, and the open panel is the next tab stop. The selected tile has a foreground edge on top and a tint.
Why are the changes not green or red?
A drop in latency is good news and a drop in throughput is not, so a colour would have to know each metric's meaning. The change is shown as a sign and an arrow in the text colour, and the detail strip says what the metric is. The arrows are icons and don't mirror in right-to-left pages; the charts keep their left-to-right time axis.
Does the panel follow my theme?
Yes. The panel is bg-card with a ring in a bg-muted/50 shell, with no dark scope, so it is light on a light page and dark on a dark one. Charts and sparklines use the foreground colour, so nothing in it uses your primary colour besides the Shine Button.