Free animated React component library
Animated chart components.
Gauges, rings, streams, calendars and metric cards that draw themselves in and answer the pointer. Hand-tuned motion components for React, completely free. Play with each one live, then copy the code or give your AI agent the prompt that comes with it.
Animated React charts and dashboard widgets
- Mix chart: Stacked bars in vivid colours that grow in while the total counts up.
- Activity grid: A year of daily activity as a heatmap that sweeps in while the totals count up.
- Channel mix: A marketing card where a row of slim ticks splits the week's sessions by channel.
- Device traffic: Visitors by device on tall gauges, one color each, that fill to each share.
- Range chart: A daily range chart, like heart rate, over 7, 15 or 30 days.
- Deploy streak: A shipping streak: the count rolls up while a grid of daily deploys pops in as a wave.
- Usage ring: Plan usage as a segmented ring that warms round the colour wheel as it fills.
- Quota gauge: A speedometer of ticks that light up as credits roll up.
- Growth stream: A total built up over time as nested bands that widen at each checkpoint.
- Metric split: Three metrics on one proportional bar, each with its number counting up on odometer wheels.
- Spending meter: A spending card whose pills fill in turn as the amount counts up on odometer wheels.
- Goal gauge: A half-ring goal meter split by source.
- Month calendar: A month view where a soft disc follows your pointer, an ink disc springs to the picked day and months slide the way you travel.
- Calendar agenda: A day planner: swipe an event left to mark it done and confetti rises out of the card, or right to delete it.