Activity Heatmap

New

A contribution calendar with a tooltip per day, a legend, and arrow key navigation. Includes seeded sample data.

motionutils@soultel/use-reduced-motion-safe

1,909 deploys in the last year

Installation

$ pnpm dlx shadcn@latest add @soultel/activity-heatmap

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/activity-heatmap.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/activity-heatmap.tsx.

Usage

example.tsx5 lines

import { ActivityHeatmap } from "@/components/activity-heatmap"

export function Activity({ days }: { days: { date: string; count: number }[] }) {
  return <ActivityHeatmap data={days} unit="deploy" />
}

Props

Prop	Type	Default	Description
data	{ date: string; count: number }[]	-	Daily counts as YYYY-MM-DD. Missing days count as zero.
seed	number	7	Seed for the sample data shown when no data is passed.
weeks	number	53	Number of week columns.
endDate	string	-	Last day shown. Defaults to today. Pass a fixed date when server rendering.
unit	string	"contribution"	Singular name of what is counted.