Blocks

Stats Band

A horizontal band of large counting stats.

0
Teams building on Ondine: +18% this quarter; 0.00%
Uptime across all regions: +0.04 pts; 0.0M
Events processed every day: +412k since May; 0
Releases shipped this year: +34 vs last year

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add stats

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { StatsBand } from "@lumora/ui/blocks/stats";
// or from the barrel:
import { StatsBand } from "@lumora/ui";

Props worth knowing

stats take { value, label, prefix?, suffix?, decimals?, trend? } — each number ticks up once scrolled into view, and trend tints its hint positive for "up", negative for "down". Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.