Animated React charts and dashboard widgets

Goal gauge

A half-ring goal meter split by source. The arc sweeps up as the total counts in on odometer wheels; hover a segment to roll the center number to that part and name it.

Charts, in view, then hover, Motion

Install

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

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

Usage

import { GoalGauge } from "@/components/goal-gauge";

export default function Page() {
  return (
    <GoalGauge
      title="Holiday fund"
      goal={1500}
      currency="EUR"
      locale="de-DE"
      segments={[
        { label: "Salary", value: 600 },
        { label: "Bonus", value: 250 },
        { label: "Gifts", value: 90 },
      ]}
      onAction={() => openReport()}
    />
  );
}

Pass `value` instead of `segments` for a single-color meter.

Props

Prop	Type	Default	Description
segments	GaugeSegment[]	five sources	{ label, value, color? }; the total is their sum. Up to five colors, the rest fold into "Other"
value	number		Single amount, used when segments is not set
color	string	"#269a5a"	Color for the single-amount arc
goal	number	1200	Target amount
title	ReactNode	"Saving goal"	Card title
subtitle	ReactNode	"1 to 12 Apr, 2026"	Line under the title
currency	string	"USD"	ISO currency code
locale	string	"en-US"	Number formatting locale
duration	number	1.4	Sweep length, seconds
actionLabel	ReactNode	"View report"	Header button; null hides it
onAction	() => void		Header button pressed

More charts

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.
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.

All animated react charts and dashboard widgets