All components
Animated Counter
Data DisplayNumber that counts up to its value on mount.
0
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/animated-counter.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/animated-counter.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Number to count up to. |
| duration | number | 1.4 | Seconds to reach the value. |
Accessibility
- Renders the final value immediately under prefers-reduced-motion.
- Uses tabular numerals so the width doesn't jitter while counting.
Dependencies
motionclsxtailwind-merge