Stats hero

The promise and actions, then three numbers that count up, each with its trend.

$ pnpm dlx shadcn@latest add @dashral/hero-stats

When to use

The promise and actions, then three numbers that count up with their trend.
Products whose results are the pitch: uptime, time saved, revenue recovered.

When not to use

New products without numbers to stand behind yet: Centered hero.
Numbers you can't back up further down the page: they cost more trust than they win.

Usage

Stats hero with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { HeroStats } from "@/components/dashral/blocks/hero-stats"
2
3<HeroStats
4  title="Payments that just work"
5  primary={{ label: "Get started", href: "/register" }}
6  stats={[
7    { value: 99.99, suffix: "%", label: "Uptime" },
8    { value: 1_200_000_000, format: { style: "currency", currency: "USD", notation: "compact" }, label: "Processed" },
9  ]}
10/>

API reference

HeroStats

A hero that leads with proof: the promise and actions on top, then three numbers that count up, each with its trend. Every part comes from props; with reduced motion the numbers are simply there.

Prop	Type	Default
`status`	`React.ReactNode` The badge above the headline; none hides it.	`"All systems normal"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`
`stats`	`HeroStat[]`	`sample`

type BlockAction

A button: a link with href, or your handler with onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—

type HeroStat

Prop	Type	Default
`label`	`string`	—
`value`	`number`	—
`format`	`Intl.NumberFormatOptions`	—
`suffix`	`string`	—
`change`	`string`	—
`trend`	`number[]`	—