Data

ContributionGrid

A year of days as a grid of weeks: workouts, commits, spending. Levels mix the brand into the card, and a day with no data is drawn apart from a day with none. One Tab stop, the arrow keys walk the days, Home and End jump to the ends, and every cell says its day in words. One tooltip, kept inside the viewport. On a phone it scrolls sideways at a size you can read, starting at the latest weeks.

view .md

Preview

workouts · last 12 months2026-09-20 · 2 workouts, 44 min

Installation

terminal

bash

npx @entrepta/cli@latest add contribution-grid

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

contribution-grid.tsx

tsx

import { ContributionGrid } from "@/components/entrepta/contribution-grid"

<ContributionGrid
  label="Workouts in the last year"
  days={days}                      // { date: "2026-09-12", level: 0-4 | null, state?: "3 workouts" }[]
  range={{ start: "2025-09-29", end: "2026-09-28" }}
  selected={day}
  onSelect={setDay}
/>

Props

Prop	Type	Default	Description
days	{ date, level, state? }[]	-	level 0 to 4, or null for no data; state is the day in words
label	string	-	What the grid shows, as its name
range	{ start, end }	-	Defaults to the first and last day given
onSelect, selected	(date) => void, string	-	Choosing a day
renderTooltip	(day) => ReactNode	-	The tooltip's content
legend	boolean	true	The Less to More key
loading	boolean	false	A skeleton in its shape
labels	{ levels?, noData?, less?, more? }	-	Every word