Stats
Stats with a heading
A header above the figures, so the numbers answer a stated question rather than floating on their own.
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 StatsWithTitle() {
return (
<Stats
eyebrow="By the numbers"
title="What a year of shipping looks like"
description="Every figure is from the public status page and the changelog."
items={[
{ id: 'releases', value: '52', label: 'Releases', description: 'One a week, on Tuesdays' },
{ id: 'components', value: '109', label: 'Components' },
{ id: 'downloads', value: '1.8M', label: 'Downloads' },
]}
columns={{ base: 1, sm: 3 }}
/>
)
}