Four large numbers in a row with a label and one line of context each, divided by hairlines, that count up once as they scroll into view.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/stats-01.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Stats01 } from '@/components/stats-01/stats-01'
export default function Page() {
return (
<main>
<Stats01 />
</main>
)
}Files
What the command adds to your project, and where.
components/stats-01/stats-01.tsxThe section. Import it into any page and render it; it fills the width of its parent.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Stats
- Stats 02A split section: heading and paragraph on the left, a two-by-two grid of stat cards on the right, each with an inline-SVG sparkline and its change on the last quarter.
- Stats 03A "by the numbers" band on the inverted surface: three stacked figures beside one large customer quote.
- Stats 04Interactive stats: a This month / Quarter / Year switch eases four numbers to their new values and redraws a bar chart, with a polite live region announcing the change.