Klyv Activity Heatmap

Component

About

A calendar density grid. It answers a question no chart here answers well: when did this happen, across months, at a glance.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Klyv Activity Heatmap to your project and fits it to your theme.

Code

How Klyv Activity Heatmap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ActivityHeatmap } from "@/components/ui/klyv-activity-heatmap";
import { Card } from "@/components/ui/klyv-activity-heatmap-utils/components-Card-Card";
import { type HeatmapDay } from "@/components/ui/klyv-activity-heatmap";

const SourceExample = () => (
          <Card title="Transaction activity" className="w-full">
            <div className="mt-3">
              <ActivityHeatmap days={HEATMAP} label="Transactions per day" weeks={26} />
            </div>
          </Card>
        );
const HEATMAP: HeatmapDay[] = (() => {
  const days: HeatmapDay[] = []
  const start = new Date()
  start.setDate(start.getDate() - 26 * 7)
  for (let index = 0; index < 26 * 7; index += 1) {
    const date = new Date(start)
    date.setDate(start.getDate() + index)
    const weekday = date.getDay()
    // Quiet weekends, a spike near the start of each month.
    const base = weekday === 0 || weekday === 6 ? 0.25 : 1
    const payday = date.getDate() <= 3 ? 3 : 1
    const value = Math.max(0, Math.round((Math.random() * 5 * base * payday) - 0.6))
    days.push({
      date: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
      value,
    })
  }
  return days
})()

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><SourceExample /></div></div>}