Members Growth Chart
A sleek analytics card visualizing membership trends with segmented tabs.
March 23, 2026Good Morning
3,942Total Members
Members
Growth and engagement overview
Features
- Segmented member views with tabs for All, Active, and Enrolled.
- Smooth animated transitions when switching between segments.
- Gradient area chart visualization for clean growth tracking.
- Hover tooltips to inspect values for each month.
- Animated total members counter that updates dynamically.
- Built with Recharts and Framer Motion for reliable charts and smooth animations.
Installation
npx shadcn@latest add https://charts.zenin.design/r/members-growth-chart.jsonData Structure
// The chart expects data grouped by tab categories.
// Each entry represents the number of members for a specific month.
export type MembersGrowthData = {
month: string;
members: number;
};
export type TabKey = "All" | "Active" | "Enrolled";
export const membersData: Record<TabKey, MembersGrowthData[]> = {
All: [
{ month: "Jan", members: 1200 },
{ month: "Feb", members: 1540 },
{ month: "Mar", members: 1580 },
{ month: "Apr", members: 1565 },
{ month: "May", members: 1620 },
{ month: "Jun", members: 1680 },
{ month: "Jul", members: 1520 },
],
Active: [
{ month: "Jan", members: 420 },
{ month: "Feb", members: 460 },
{ month: "Mar", members: 480 },
{ month: "Apr", members: 270 },
{ month: "May", members: 520 },
{ month: "Jun", members: 160 },
{ month: "Jul", members: 400 },
],
Enrolled: [
{ month: "Jan", members: 480 },
{ month: "Feb", members: 505 },
{ month: "Mar", members: 540 },
{ month: "Apr", members: 525 },
{ month: "May", members: 590 },
{ month: "Jun", members: 632 },
{ month: "Jul", members: 670 },
],
};Props
| Prop | Type | Description |
|---|---|---|
data | Record<TabKey, { month: string; members: number }[]> | Dataset grouped by tab category (All, Active, Enrolled) used to render the membership growth chart. |
avatar | string | URL of the user avatar displayed in the card header. |
date | string | Optional date displayed above the greeting in the chart header. |
greeting | string | Optional greeting text shown in the chart header. |
Usage
import { MembersGrowthChart } from "@/components/charts/members-growth-chart";
import { membersData } from "@/components/charts/data/members-growth-chart-data";
<MembersGrowthChart
data={membersData}
avatar="https://3bhuewv9vi.ufs.sh/f/2HNMrhnMiKdAyccQ0izHtiqXP6MmgJzCKEb13rjf8VoN5HT4"
/>;