Plain stats: a heading above three large figures on filled panels, each with a label. Theme tokens only, light and dark.
import { Heading } from "@/components/editorial/heading"
import {
Section,
SectionContent,
SectionHeader,
SectionTitleGroup,
} from "@/components/editorial/section"
import {
Stat,
StatGroup,
StatLabel,
StatValue,
} from "@/components/editorial/stats"
// The copy: change text here, not in the markup.
const COPY = {
title: "Faster releases, fewer meetings",
} as const
const STATS = [
{ value: "38%", label: "Shorter time from plan to release" },
{ value: "10 min", label: "Average Monday meeting" },
{ value: "4.8 / 5", label: "Rating from 900 reviews" },
] as const
export default function MinimalStats02() {
return (
<Section>
<SectionHeader>
<SectionTitleGroup>
<Heading>{COPY.title}</Heading>
</SectionTitleGroup>
</SectionHeader>
<SectionContent>
<StatGroup cols={3}>
{STATS.map((stat) => (
<Stat key={stat.label} variant="card">
<StatValue className="text-5xl/none">{stat.value}</StatValue>
<StatLabel className="text-muted-foreground">
{stat.label}
</StatLabel>
</Stat>
))}
</StatGroup>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/minimal-stats-02npx shadcn add @01orbital/minimal-stats-02yarn shadcn add @01orbital/minimal-stats-02bunx --bun shadcn add @01orbital/minimal-stats-02Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/stats/minimal-stats-02/index.tsx, as source you own and edit.
import MinimalStats02 from "@/components/blocks/stats/minimal-stats-02"
export default function Example() {
return <MinimalStats02 />
}Registry pieces it installs with it:
Glass Stat Cards over Dusk
Dark section over a Dusk scene with an eyebrow, display headline and description, four glass stat cards with large numerals, and a dated note with a report link.
Minimal Stats Row
Plain stats: a heading and description above four figures with labels, each marked by a thin left rule. Theme tokens only, light and dark.