Wensity

GitHub-Style Activity Grid

365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.

heavy saas blocksgithubactivitygridframer motion
GitHub-Style Activity Grid component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add github-activity-grid

Usage

Import GithubActivityGrid from @/components/wensity/github-activity-grid and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import {
  GitHubActivityGrid,
  mockActivityYear,
} from "@/components/wensity/github-activity-grid";


export function GitHubActivityGridDemo() {
  return <GitHubActivityGrid days={mockActivityYear(42)} />;
}

Props

PropTypeDefaultDescription
daysActivityDay[]-Days oldest-first. Length should match the visible window (typically 365 or 371).
maxCountnumber-Maximum count used for level buckets. Defaults to the max in days.