shadcn.io is not affiliated with official shadcn/ui
Metric Tiles Hero Block for Ark UI
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.
Installation
Overview
A compact left-aligned hero for an infrastructure or API product whose numbers are the pitch, for React with Ark UI. Between the page rails a status pill with a pulsing dot, a headline and one supporting line sit on the left, with a Shine Button and an outline button at the end of the same row; below them, four metric tiles stand apart as cells whose hairlines overshoot their corners, each marked with a + on its top corner: a large figure in tabular digits, its label, a line on where it comes from and a small bar trend ending in the current reading. It's built from Announcement, Badge, Status Pulse Text, Shine Button, Button and Guides, with CSS transitions for the entrance, the tiles coming in one after another, and your theme's tokens for every colour, so the block is light on a light theme and dark on a dark one. For infrastructure products, API platforms, monitoring tools and any SaaS whose uptime, speed and scale sell it.
FAQ
How do I change the metrics?
Edit METRICS at the top of the file: each tile has a value, a label, a detail, the line that says where or when the figure comes from ("Last 365 days"), and a trend of twelve bar heights in percent, the last one being now. Values are text, so units and suffixes stay as you write them (99.99%, 12ms, 4.2B), in tabular digits. To show live figures, fetch them from your monitoring and pass them in: they render as text, so they're right on the first paint and for screen readers.
Why don't the numbers count up?
They're claims, so they're shown as they are: a count from zero shows wrong values for a moment and makes visitors wait for the real one. The tiles fade in one after another instead, and with reduced motion they're simply there. For a count-up, Counting Number counts to each value as it scrolls into view, while screen readers read the final value.
Is the status pill live?
It shows a status in words with a dot that pulses, from Status Pulse Text: change its text and variant (warning for a degraded service, destructive for an outage) from your status data. The pill is an Announcement with the status role, so when the text changes, screen readers hear it politely; the dot is decoration and the words carry the meaning. It isn't a link, since View status page already goes there.
How do I point the buttons at my pages?
Deploy to the edge is the one main action, a Shine Button: a band of light sweeps across it once when the pointer arrives or it takes focus. View status page is an outline button. Both are links (href="#"); point them at your sign-up page and your status page.
Each button takes asChild with the link inside, so it can be your router's link.
How do screen readers read the tiles?
The tiles are a description list: each label comes first, then its figure and its detail, as in "Uptime SLA, 99.99%, Last 365 days", even though the figure shows on top. The bar trend is decoration, hidden from assistive tech. The headline is the page's h1, the pulse stops with reduced motion while the dot stays, and every text keeps WCAG AA contrast in light and dark.
How does it fit on a phone?
The tiles sit two by two and spread to one row of four from the lg breakpoint; below sm the bar trends are left out so each cell stays short. The headline steps down to text-4xl, the two buttons sit under the text instead of beside it, and each figure keeps its order in a right-to-left layout.