Animated React charts and dashboard widgets

Device traffic

Visitors by device on tall gauges, one color each, that fill to each share. While live, visits keep arriving: the total rolls on, a +n floats up and the gauges settle.

Charts, in view, then hover, plus a live timeline, Motion

Install

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

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

Usage

import { DeviceTraffic } from "@/components/device-traffic";

export default function Audience() {
  return (
    <DeviceTraffic
      total={237456}
      change={-1.4}
      devices={[
        { name: "Desktop", kind: "desktop", share: 27, change: -3.2 },
        { name: "Tablet", kind: "tablet", share: 12, change: -6.4 },
        { name: "Mobile", kind: "mobile", share: 61, change: 0.8 },
      ]}
      onReport={() => router.push("/audience")}
    />
  );
}

Props

Prop	Type	Default	Description
title	ReactNode	"Traffic by device"	Title in the shell
description	ReactNode	a line of copy	Under the title
label	string	"Total visitors"	Over the total
total	number	237456	Visitors at the start
change	number	-1.4	Change of the total, in percent
devices	{ name; kind; share; change; color? }[]	desktop, tablet, mobile	kind is desktop, tablet or mobile; shares scale to 100
live	boolean	true	New visits arrive every few seconds
interval	number	2.6	Seconds between live updates
colors	string[]	indigo, sky, mint	One gauge color per device, unless a device sets its own
onReport	() => void		Shows the Report button
locale	string	"en-US"	Number formatting
header	boolean	true	The gray header band with icon, title and copy; false leaves just the chart
className	string		Placement

More charts

Range chart: A daily range chart, like heart rate, over 7, 15 or 30 days.
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.

All animated react charts and dashboard widgets