AnimateDigits

Guidelines#

Use it for live counters the user is watching change — a focus session's count, credits ticking down. Static figures stay static.

What you provide: value as a formatted string ("1,284"), the type through className (text-4xl font-semibold tabular-nums tracking-tight), and optional spring tuning (enterStiffness, enterDamping, enterY, enterBlur). It respects reduced motion.

Facts#

API#

TypeScript declarations emitted from src/components/ui/animate-digits.tsx.

export interface AnimateDigitsProps {
    value: string;
    gap?: number;
    className?: string;
    digitClassName?: string;
    enterStiffness?: number;
    enterDamping?: number;
    exitStiffness?: number;
    exitDamping?: number;
    direction?: "dynamic" | "up" | "down";
    enterY?: number;
    enterBlur?: number;
    enterScale?: number;
    animationDelay?: number;
}
export declare function AnimateDigits({ value, gap, className, digitClassName, enterStiffness, enterDamping, exitStiffness, exitDamping, direction, enterY, enterBlur, enterScale, animationDelay, }: AnimateDigitsProps): JSX.Element;
export default AnimateDigits;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  var s = React.useState(1284);
  return h("div", { className: "flex items-center gap-6" },
    h("div", { className: "grid gap-1" },
      h("span", { className: "text-xs text-muted-foreground" }, "Replies this month"),
      h(DC.AnimateDigits, { value: s[0].toLocaleString("en-US"), className: "text-4xl font-semibold tabular-nums tracking-tight" })),
    h(DC.Button, { variant: "outline", onClick: function () { s[1](s[0] + 7); } }, h(I.Plus), "Add 7"));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#