Loading…
No reviews yet — be the first to review this product.
A composable analytics card whose chart comes alive on hover: the area fills, the trend line brightens, bars cascade up, points pop, a live point pulses, a value chip slides in and a light sheen sweeps across. clsx + tailwind-merge.
Animated Card Chart is a composable analytics card whose visual wakes up on hover: the area fills, the trend line brightens, bars rise in a staggered cascade, data points pop, a live point pulses, a value chip slides in, and a light sheen sweeps across while the whole card lifts. Composable, drop-in API: AnimatedCard / CardVisual / CardBody / CardTitle / CardDescription, plus Visual3 (the chart) with mainColor / secondaryColor to recolor instantly. Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
Requirements
So it renders exactly like the preview.
1. Install dependencies
npm install clsx tailwind-mergeUpdated Jun 30, 2026
Cancel anytime