Animated counter

Give changing totals a clear sense of movement.

npx shadcn@latest add @silicon-ui/animated-counter
datamotion
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/animated-counter

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/animated-counter/animated-counter.tsx
    • components/silicon-ui/animated-counter/animated-counter.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { AnimatedCounter } from "@/components/silicon-ui/animated-counter/animated-counter";

API reference

PropTypeDefault
value*number—
labelstring—
prefixstring""
suffixstring""
decimalsnumber0
animateOnView

Roll every digit up from zero the first time the counter scrolls into view.

booleanfalse
locale

Formatting locale. Fixed by default so server and client render the same digits.

string"en-US"

Dependencies

npm
motion
Registry
silicon-motion-tokens