Animated React charts and dashboard widgets
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.
Charts, hover and press, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/month-calendar.tsx https://motion-brew.com/r/month-calendar.tsxOne self contained file for React and Tailwind CSS: month-calendar.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { MonthCalendar } from "@/components/month-calendar";
export default function Page() {
const [day, setDay] = useState(new Date());
return <MonthCalendar value={day} onChange={setDay} events={eventDates} />;
}Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| value | Date | The selected day; leave out to let the calendar keep its own | ||
| defaultValue | Date | today | The day selected at first | |
| onChange | (date: Date) => void | Called with the picked day | ||
| events | Date[] | a few days this month | Days that get an event dot | |
| weekStartsOn | 0 \ | 1 | 1 | First day of the week, Sunday or Monday |
| locale | string | "en-US" | Locale for month and weekday names | |
| className | string | Size and shape of the card |
More charts
- 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.
- Channel mix: A marketing card where a row of slim ticks splits the week's sessions by channel.