Animated React charts and dashboard widgets

Quota gauge

A speedometer of ticks that light up as credits roll up. Hover to see what is left on the plan.

Charts, in view, then hover, Motion

Install

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

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

Usage

import { QuotaGauge } from "@/components/quota-gauge";

export default function Page() {
  return <QuotaGauge value={2022} goal={2500} unit="credits used" />;
}

Props

Prop	Type	Default	Description
value	number	2022	Credits used so far
goal	number	2500	The plan limit
unit	string	"credits used"	Unit after the amount
ticks	number	44	Ticks on the gauge
color	string	ink	Colour of lit ticks
className	string		Placement

More charts

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.

All animated react charts and dashboard widgets