Heatmap Calendar Tide

Component

About

A calendar heatmap laid out like a tide table, one column per week and seven rows for weekdays, where activity depth is shown with a single-hue color ramp and the grid is fully keyboard-navigable.

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

Code

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

Usage.tsx

import TideLedger, {
  type TideCell,
} from "@/components/ui/heatmap-calendar-tide";

function generateData(): TideCell[] {
  const days: TideCell[] = [];
  const today = new Date();
  const start = new Date(today);
  start.setDate(start.getDate() - 26 * 7 + 1);

  let seed = 42;
  const rand = () => {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  };

  for (let i = 0; i < 26 * 7; i++) {
    const date = new Date(start);
    date.setDate(date.getDate() + i);
    const roll = rand();
    const value = roll < 0.35 ? 0 : Math.round(roll * 12);
    days.push({ date: date.toISOString().slice(0, 10), value });
  }
  return days;
}

export default function HeatmapCalendarTideDemo() {
  const data = generateData();

  return (
    <div className="flex min-h-[300px] w-full items-center justify-center bg-background p-10">
      <TideLedger data={data} label="Daily readings" />
    </div>
  );
}