Browse components
Stats Count
A row of big statistics that count up with a staggered reveal when scrolled into view.
Installation
npx shadcn@latest add @glint-ui/stats-countFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/stats-count.json
Usage
import { StatsCount } from "@/components/ui/stats-count";
<StatsCount
stats={[
{ value: 2.4, decimals: 1, suffix: "M", label: "Deploys a week" },
{ value: 99.99, decimals: 2, suffix: "%", label: "Uptime" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | ReactNode | — | Array of { value, label, prefix?, suffix?, decimals?, description? }. |
| duration | number | 2200 | Ms each number takes to count up. |
| stagger | number | 140 | Ms between each stat starting. |
| dividers | boolean | true | Hairline dividers between stats. |
| repeat | boolean | false | Count again each time it re-enters the viewport. |
| accent | string | "#a3e635" | Color of the bar that sweeps under each number. |
| className | string | — | Extra classes for the root element. |