Animated React charts and dashboard widgets

Channel mix

A marketing card where a row of slim ticks splits the week's sessions by channel. Point at a channel and the headline rolls to its numbers; metric rows play their icons.

Charts, in view, then hover and press, Motion

Install

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

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

Usage

import { ChannelMix } from "@/components/channel-mix";

export default function Marketing() {
  return (
    <ChannelMix
      channels={[
        { name: "Organic search", sessions: 21480, change: 3.4 },
        { name: "Social", sessions: 15920, change: 1.2 },
        { name: "Direct", sessions: 10810, change: -0.8 },
      ]}
      metrics={[
        { label: "Cost per signup", value: "$38.25", change: -4.1, higherIsBetter: false, icon: "people" },
        { label: "Return on spend", value: "324%", change: 4.5, icon: "money" },
      ]}
      onDetails={() => router.push("/marketing")}
    />
  );
}

Props

Prop	Type	Default	Description
title	ReactNode	"Channel insights"	Title in the shell
description	ReactNode	a line of copy	Under the title
label	string	"Sessions this week"	Over the headline number
info	string	a short explanation	Shown by the info button
channels	{ name; sessions; change; color? }[]	three channels	Split the tick bar; colors follow a palette by default
change	number	2.1	Change of all sessions, in percent
metrics	{ label; value; change; higherIsBetter?; icon }[]	three metrics	Table rows; icon is people, time or money; set higherIsBetter: false for costs and waits
onDetails	() => void		Shows the Details 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

Device traffic: Visitors by device on tall gauges, one color each, that fill to each share.
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.

All animated react charts and dashboard widgets