Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Command Center Metric Board Features Block for React

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.

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 metric board feature section for React with Base UI, 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.

How does it fit on a phone?

The tiles sit two by two (three columns from sm), and the detail strip goes under them with its figures above the chart. The title bar drops its "Updated" note. Nothing scrolls sideways at 320 px.

What moves, and what happens with reduced motion?

The header fades up once on load with a CSS transition, and the selected tile's tint changes as you switch. With reduced motion the transitions are off. There are no loops.

  • Pro

    Analytics Widget Dashboard Features

    Metrics and charts

    A job-queue dashboard drawn as a window in a hairline frame: a range control in its title bar re-draws the throughput line and re-reads the uptime and outcome figures, beside a seven-bar week.

  • Pro

    Gauge Cluster Features

    Metrics and charts

    Three semicircle gauges in one framed band, driven by a single "Simulate load" slider: CPU, memory and queue wait, each with a needle, an arc, a reading and a state.

  • Pro

    Inset Bento Grid Features

    Bentos

    A bento for a security-posture tool in a card in a card that follows your theme: one wide cell with an area chart of the score, and four small cells with a score ring, a ranked findings list, control states and an asset count.

  • Pro

    Metric Tiles Hero

    Stats and live data

    A compact left-aligned hero for an edge network with a live status pill, a Shine Button and an outline button at the end of the row, and four metric tiles below, each a ruled cell with a trend.

  • Pro

    Metric Hero Strip Features

    Metrics and charts

    Four metric-over-feature columns for a data-pipeline tool: a giant tabular figure and label, then the feature that makes it true, in one divided band under a centred header.

  • Pro

    Achievement Trophy Wall Features

    Metrics and charts

    A wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.

All 170 features blocks