Animated React charts and dashboard widgets

Range chart

A daily range chart, like heart rate, over 7, 15 or 30 days. Bars grow from the average, and hovering a day rolls the header and tiles to its numbers.

Charts, hover, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/range-chart.tsx https://motion-brew.com/r/range-chart.tsx

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

Usage

import { RangeChart } from "@/components/range-chart";

// Every day you have, oldest first; the chart shows the most recent 7, 15 or 30.
const data = readings.map((r) => ({
  date: new Date(r.day),
  ranges: [[r.min, r.max]],
}));

export default function Health() {
  return (
    <RangeChart title="Heart rate" unit="bpm" data={data} spans={[7, 15, 30]} />
  );
}

Props

Prop	Type	Default	Description
title	string	"Heart rate"	Card title
unit	string	"bpm"	Unit after the numbers
data	{ date: Date; ranges: [low, high][] }[]	30 days	Every day, oldest first; a short range reads as a bubble
spans	number[]	[7, 15, 30]	Spans the switch offers, in days
defaultSpan	number	7	Span shown first
average	number	mean of the shown readings	Value of the dashed average line
color	string	a warm red	Range colour
onFullStats	() => void		Called by the Full stats button
className	string		Placement

More charts

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.

All animated react charts and dashboard widgets