DesignLayer

Week Heatmap Strip

Back to components
Week Heatmap Strip React component

What is this?

A white card with a seven-column, twelve-week grid of rounded cells in five shades of green, plus a title and a total. When the card comes into view, the cells tint in row by row, left to right, while empty days stay gray. Swap the title, total, and values, then drop it into a deploy log, an activity overview, or an analytics feature grid.

More components

Browse all →
Uptime Day Strip
Uptime Day Strip
Goal Progress Ring
Goal Progress Ring
Period Compare Card
Period Compare Card
Count-Up Trend Stat
Count-Up Trend Stat
Area Tooltip Card
Area Tooltip Card
Value Histogram Card
Value Histogram Card
Component

Week Heatmap Strip

A white card with a seven-column, twelve-week grid of rounded cells in five shades of green, plus a title and a total. When the card comes into view, the cells tint in row by row, left to right, while empty days stay gray. Swap the title, total, and values, then drop it into a deploy log, an activity overview, or an analytics feature grid.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0