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

Overview

GitHub-Style Activity Grid is a React and Tailwind CSS contribution heatmap that shows a year of commits, workouts, or any daily count as a calendar of squares, in Next.js or any React app. Pass dates and counts oldest first, and each day gets one of five emerald shades relative to your busiest day, with month labels, a legend, and the yearly total. One shared tooltip springs between cells, every cell is a focusable button with a screen reader label, and the reveal from today skips for reduced motion. Pass one maxCount to several grids so their colors compare fairly.

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.

Related components

  • Fluid Drag-and-Drop Kanban component preview

    Fluid Drag-and-Drop Kanban

    A Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.

  • Multi-Step Form Wizard component preview

    Multi-Step Form Wizard

    A multi-step form wizard whose card physically reshapes to wrap each new step as the content slides in behind it.

  • KPI Card with Sparkline component preview

    KPI Card with Sparkline

    Dashboard KPI cards with a smooth SVG sparkline chart and a glowing dot that snaps to whichever value you scrub across.

  • Subscription Tier Card component preview

    Subscription Tier Card

    Pricing cards with a monthly and annual toggle, prices that spring to new values, and a highlighted plan in a brand glow.