Counter Stat

A stat card whose number counts up the first time it scrolls into view, using easeOutExpo so the final digits do not crawl. Respects prefers-reduced-motion.

Charts

counterstatsintersection-observer

Resources indexed

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { CounterStat } from "@/registry/components/counter-stat";

export function Example() {
  return <CounterStat />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Charts

Progress Ring

An SVG circular progress indicator with animated stroke offset and an accessible progressbar role.