Stats
Stats band
Four numbers in a row on a muted band. The values are strings, so units and formatting are yours.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Stats } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Stats } from '@the_viveksingh/vivek-ui'
export default function StatsBand() {
return (
<Stats
background="muted"
items={[
{ id: 'uptime', value: '99.99%', label: 'Uptime', description: 'Last 12 months' },
{ id: 'requests', value: '4.2B', label: 'Requests a month' },
{ id: 'regions', value: '35', label: 'Edge regions' },
{ id: 'p99', value: '38 ms', label: 'p99 latency' },
]}
/>
)
}