Animated React charts and dashboard widgets

Usage ring

Plan usage as a segmented ring that warms round the colour wheel as it fills. Switch API, Storage and Seats and it refills.

Charts, in view, then press and hover, Motion

Install

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

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

Usage

import { UsageRing } from "@/components/usage-ring";

export default function Page() {
  return (
    <UsageRing
      metrics={[{ label: "API", value: 409, goal: 600, unit: "K calls" }]}
    />
  );
}

Props

Prop	Type	Default	Description
title	string	"Plan usage"	Title
metrics	{ label; value; goal; unit }[]	API, Storage, Seats	One resource per tab; goal is the plan limit
segments	number	20	Segments around the ring
hues	[number, number]	[265, 385]	Hues the ring walks between on the colour wheel, from empty to the limit
className	string		Placement

More charts

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.

All animated react charts and dashboard widgets