Animated React charts and dashboard widgets

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. Pick a day and the pill slides across the week.

Charts, drag, Motion

Install

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

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

Usage

import { CalendarAgenda } from "@/components/calendar-agenda";

export default function Page() {
  return (
    <CalendarAgenda
      defaultDay={0}
      days={[
        {
          label: "Mon",
          date: 10,
          title: "Today",
          subtitle: "Monday, 10 November",
          events: [
            { id: "a", time: "10:00", length: "1h", title: "Design review", meta: "4 people · Zoom", color: "#d6498f", tag: "in 19 min" },
            { id: "b", time: "16:00", length: "30m", title: "30 min walk", meta: "From the office" },
          ],
        },
      ]}
      onToggle={(event, done) => save(event.id, { done })}
      onDelete={(event) => remove(event.id)}
    />
  );
}

Props

Prop	Type	Default	Description
days	{ label; date; title; subtitle?; events }[]	a sample week	The week
defaultDay	number	1	Index of the day shown first
confetti	boolean	true	Confetti when an event is marked done
onToggle	(event, done) => void		An event was marked done or reopened
onDelete	(event) => void		An event was deleted
onAdd	() => void		The round add button
className	string		Classes on the card

More charts

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.
Channel mix: A marketing card where a row of slim ticks splits the week's sessions by channel.
Device traffic: Visitors by device on tall gauges, one color each, that fill to each share.

All animated react charts and dashboard widgets