styleui
componentcountersource: ok · hit
Counter
Animated counter that increases from 0 to a given value in a smooth animation.
npx shadcn add "https://www.styleui.dev/r/counter.json"free
Where it goes
stats
Interaction
animated-counter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 4:03:49 PM
components/counter.tsx
"use client";
import { useEffect, useRef } from "react";
import { useInView, animate } from "motion/react";
function Counter({ value, suffix = "" }: { value: number; suffix?: string }) {
const ref = useRef<HTMLSpanElement>(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
useEffect(() => {
if (!isInView) return;
const node = ref.current;
if (!node) return;
const controls = animate(0, value, {
duration: 2.5,
ease: "easeOut",
onUpdate(latest) {
node.textContent = Math.floor(latest).toString() + suffix;
},
});
return () => controls.stop();
}, [isInView, value, suffix]);
return <span ref={ref}>0{suffix}</span>;
}
Counter.displayName = "Counter";
export default Counter;