Animated React charts and dashboard widgets

Deploy streak

A shipping streak: the count rolls up while a grid of daily deploys pops in as a wave. Hover a dot to see the day.

Charts, in view, then hover, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/deploy-streak.tsx https://motion-brew.com/r/deploy-streak.tsx

One self contained file for React and Tailwind CSS: deploy-streak.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { DeployStreak } from "@/components/deploy-streak";

export default function Page() {
  return <DeployStreak title="Deploys" days={last70Days} />;
}

Props

Prop	Type	Default	Description
title	string	"Deploys"	Title
days	boolean[]	70 days	One per day, oldest first; true is a day that shipped. The last is today
columns	number	14	Days per row
color	string	"#269a5a"	Colour of days that shipped
today	Date	today	Date of the last day, for the tooltips
className	string		Placement

More charts

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.

All animated react charts and dashboard widgets