Product block

Daily Activity Heatmap

A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.

231 linesNo dependenciesAdded 25 Aug 2026Updated 13 Sept 2026

heatmap
calendar
activity
contributions
grid

What's included

components/activity-heatmap.tsx
No runtime dependencies

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add activity-heatmap

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Deploy activity

1,453 deploys across 306 active days in the last year

LessMore

Deploy activity by month
Month	deploys
Sep 2025	72
Oct 2025	90
Nov 2025	87
Dec 2025	109
Jan 2026	111
Feb 2026	69
Mar 2026	132
Apr 2026	146
May 2026	148
Jun 2026	157
Jul 2026	170
Aug 2026	162

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/activity-heatmap.tsx

/**
 * <ActivityHeatmap> — a year of daily activity, one square per day.
 *
 * The shape everybody recognises from a contributions graph, and the reason
 * it is worth having as a block is that it answers a question no other
 * chart here does: not "how much" but "how consistently". A line chart of
 * the same data shows a total per week and hides the fact that all of it
 * landed on Tuesdays.
 *
 * BUILT ON GRID, NOT ON CALCULATED POSITIONS
 *
 * `grid-auto-flow: column` with seven rows lays the year out week by week
 * from a flat array — no per-square coordinates, no week bucketing in JS,
 * and it stays correct when the range does not start on a Monday. The
 * first column is simply short.
 *
 * FIVE LEVELS, NOT A CONTINUOUS SCALE
 *
 * Opacity mapped straight from the value produces a hundred shades nobody
 * can tell apart and a legend that cannot be drawn. Five buckets can be
 * named, and the top bucket is a quantile rather than the maximum — one
 * outlier day should not compress every ordinary day into the palest
 * shade, which is the single most common way this chart is made useless.
 *
 * ACCESSIBILITY, WHICH THIS PATTERN USUALLY FAILS
 *
 * 365 focusable tooltips is a keyboard trap wearing a chart costume, so
 * squares are not interactive. Each carries a `title` for pointer hover,
 * the grid is `aria-hidden`, and the real content for assistive technology
 * is the summary sentence and the per-month table underneath — totals a
 * screen reader can actually use, rather than an invitation to tab through
 * a year one day at a time.
 *
 * The data is generated from a seeded formula rather than Math.random() so
 * the preview, the source and a static export all render the same year.
 */

import type * as React from 'react'

export interface HeatmapDay {
  /** ISO date, YYYY-MM-DD. */
  date: string
  count: number
}

export interface ActivityHeatmapProps {
  heading?: string
  /** What one unit is called: "deploy", "commit", "session". */
  noun?: string
  days?: HeatmapDay[]
  className?: string
}

const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

/*
  A deterministic year.

  Weekdays busier than weekends, a slow upward drift across the year, and a
  quiet fortnight in the middle — enough structure that the chart shows
  something rather than static. No Math.random(): a preview that differs
  from the source a visitor copies is a bug they cannot see.
*/
function sampleYear(): HeatmapDay[] {
  const out: HeatmapDay[] = []
  const start = new Date(Date.UTC(2025, 8, 1))

  for (let i = 0; i < 364; i += 1) {
    const date = new Date(start.getTime() + i * 86_400_000)
    const weekday = date.getUTCDay()
    const weekend = weekday === 0 || weekday === 6

    const drift = i / 364
    const wobble = Math.abs(Math.sin(i * 1.7) + Math.sin(i * 0.31)) / 2
    const holiday = i > 150 && i < 164

    let count = Math.round(wobble * (weekend ? 3 : 11) * (0.6 + drift))
    if (holiday) count = Math.round(count * 0.15)
    if (i % 37 === 0) count += 9

    out.push({ date: date.toISOString().slice(0, 10), count })
  }

  return out
}

const DEFAULT_DAYS = sampleYear()

const LEVEL_CLASSES = [
  'bg-muted',
  'bg-primary/25',
  'bg-primary/45',
  'bg-primary/70',
  'bg-primary',
]

/*
  A stable id suffix derived from this instance's own heading.

  `useId` is the right answer and is not available here: this is a server
  component and hooks are not. The heading is what differs when a section is
  used twice on one page, so hashing it gives each copy its own
  `aria-labelledby` target without a hook, a prop or a counter — and it
  stays stable across server and client renders, which a counter would not.
*/
function instanceId(...parts: (string | undefined)[]): string {
  const text = parts.filter(Boolean).join('|')
  let hash = 0
  for (let i = 0; i < text.length; i++) hash = (Math.imul(hash, 31) + text.charCodeAt(i)) | 0
  return (hash >>> 0).toString(36).slice(0, 6)
}

export function ActivityHeatmap({
  heading = 'Deploy activity',
  noun = 'deploy',
  days = DEFAULT_DAYS,
  className = '',
}: ActivityHeatmapProps) {
  const headingId = `activity-heatmap-heading-${instanceId(heading, noun)}`

  const counts = days.map((d) => d.count)
  const total = counts.reduce((sum, n) => sum + n, 0)
  const active = counts.filter((n) => n > 0).length

  /*
    The top bucket is the 90th percentile of active days, not the maximum.
    One 40-deploy incident day would otherwise define the scale and render
    every normal week as the palest shade.
  */
  const busy = counts.filter((n) => n > 0).sort((a, b) => a - b)
  const ceiling = busy.length > 0 ? busy[Math.floor(busy.length * 0.9)] ?? 1 : 1

  const level = (count: number): number => {
    if (count <= 0) return 0
    const share = Math.min(count / ceiling, 1)
    return Math.max(1, Math.ceil(share * 4))
  }

  /* Per-month totals: the accessible version, and the one people read
     anyway when asked "how was November". */
  const byMonth = new Map<string, number>()
  for (const day of days) {
    const key = day.date.slice(0, 7)
    byMonth.set(key, (byMonth.get(key) ?? 0) + day.count)
  }
  const months = [...byMonth.entries()]

  const monthLabel = (key: string) =>
    new Date(`${key}-01T00:00:00Z`).toLocaleDateString('en-US', {
      month: 'short',
      year: 'numeric',
      timeZone: 'UTC',
    })

  return (
    <section
      aria-labelledby={headingId}
      className={`mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}
    >
      <div className="rounded-2xl border border-border bg-card p-6 sm:p-8">
        <div className="flex flex-wrap items-baseline justify-between gap-3">
          <h2 id={headingId} className="text-lg font-semibold text-foreground">
            {heading}
          </h2>
          <p className="text-sm text-muted-foreground">
            <span className="font-medium text-foreground">
              {total.toLocaleString('en-US')}
            </span>{' '}
            {noun}s across {active} active days in the last year
          </p>
        </div>

        <div className="mt-6 flex gap-2 overflow-x-auto pb-2">
          <ul
            aria-hidden
            className="grid shrink-0 grid-rows-7 gap-1 pe-1 text-[10px] leading-none text-muted-foreground"
          >
            {WEEKDAYS.map((day, i) => (
              <li key={day} className="flex h-3 items-center">
                {/* Every other row, or the labels crowd the squares. */}
                {i % 2 === 1 ? day : ''}
              </li>
            ))}
          </ul>

          <div
            aria-hidden
            className="grid grid-flow-col grid-rows-7 gap-1"
          >
            {days.map((day) => (
              <span
                key={day.date}
                title={`${day.count} ${noun}${day.count === 1 ? '' : 's'} on ${day.date}`}
                className={`h-3 w-3 rounded-[2px] border border-transparent ${LEVEL_CLASSES[level(day.count)]}`}
              />
            ))}
          </div>
        </div>

        <div className="mt-4 flex items-center justify-end gap-2 text-xs text-muted-foreground">
          <span>Less</span>
          {LEVEL_CLASSES.map((cls, i) => (
            <span key={cls} className={`h-3 w-3 rounded-[2px] border border-transparent ${cls}`}>
              <span className="sr-only">Level {i}</span>
            </span>
          ))}
          <span>More</span>
        </div>

        <table className="sr-only">
          <caption>{heading} by month</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">{noun}s</th>
            </tr>
          </thead>
          <tbody>
            {months.map(([key, count]) => (
              <tr key={key}>
                <th scope="row">{monthLabel(key)}</th>
                <td>{count}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Nothing to install. No component library, no icon package.
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/activity-heatmap.tsx and import it where you need the section:

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

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`heading`	`string`	`'Deploy activity'`
`noun`What one unit is called: "deploy", "commit", "session".	`string`	`'deploy'`
`days`	`HeatmapDay[]`	`DEFAULT_DAYS`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

activity-heatmap.html

<!--
  Daily Activity Heatmap — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section aria-labelledby="activity-heatmap-heading-syk2u3" class="mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="rounded-2xl border border-border bg-card p-6 sm:p-8">
    <div class="flex flex-wrap items-baseline justify-between gap-3">
      <h2 id="activity-heatmap-heading-syk2u3" class="text-lg font-semibold text-foreground">Deploy activity</h2>
      <p class="text-sm text-muted-foreground"><span class="font-medium text-foreground">1,453</span> deploys across 306 active days in the last year</p>
    </div>
    <div class="mt-6 flex gap-2 overflow-x-auto pb-2">
      <ul aria-hidden="true" class="grid shrink-0 grid-rows-7 gap-1 pe-1 text-[10px] leading-none text-muted-foreground">
        <li class="flex h-3 items-center"></li>
        <li class="flex h-3 items-center">Tue</li>
        <li class="flex h-3 items-center"></li>
        <li class="flex h-3 items-center">Thu</li>
        <li class="flex h-3 items-center"></li>
        <li class="flex h-3 items-center">Sat</li>
        <li class="flex h-3 items-center"></li>
      </ul>
      <div aria-hidden="true" class="grid grid-flow-col grid-rows-7 gap-1">
        <span title="9 deploys on 2025-09-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2025-09-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-09-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-09-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="5 deploys on 2025-09-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-09-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-09-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-09-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2025-09-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2025-09-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2025-09-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-09-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-09-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-09-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-09-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="2 deploys on 2025-09-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-09-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="5 deploys on 2025-09-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="5 deploys on 2025-09-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-09-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2025-09-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2025-09-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-09-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="6 deploys on 2025-09-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="4 deploys on 2025-09-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-09-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-09-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-09-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-09-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-09-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2025-10-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-10-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2025-10-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-10-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-10-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="3 deploys on 2025-10-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2025-10-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="12 deploys on 2025-10-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2025-10-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2025-10-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-10-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-10-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2025-10-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-10-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-10-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-10-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="5 deploys on 2025-10-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-10-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-10-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="6 deploys on 2025-10-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2025-10-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2025-10-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-10-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-10-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-10-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-10-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-10-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-10-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-10-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="3 deploys on 2025-10-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2025-10-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-11-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-11-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2025-11-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="7 deploys on 2025-11-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="2 deploys on 2025-11-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-11-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-11-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="2 deploys on 2025-11-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-11-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2025-11-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2025-11-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-11-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-11-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="12 deploys on 2025-11-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2025-11-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2025-11-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="8 deploys on 2025-11-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2025-11-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-11-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="5 deploys on 2025-11-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-11-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-11-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-11-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-11-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2025-11-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="9 deploys on 2025-11-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2025-11-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2025-11-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2025-11-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-11-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2025-12-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="4 deploys on 2025-12-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-12-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-12-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="9 deploys on 2025-12-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2025-12-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-12-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="5 deploys on 2025-12-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2025-12-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2025-12-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2025-12-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-12-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2025-12-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2025-12-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2025-12-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2025-12-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="3 deploys on 2025-12-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="9 deploys on 2025-12-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2025-12-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2025-12-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="9 deploys on 2025-12-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2025-12-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="5 deploys on 2025-12-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2025-12-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2025-12-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2025-12-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2025-12-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2025-12-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-12-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2025-12-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="6 deploys on 2025-12-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-01-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-01-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-01-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-01-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="8 deploys on 2026-01-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-01-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-01-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-01-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-01-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-01-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-01-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-01-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-01-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2026-01-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="10 deploys on 2026-01-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-01-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-01-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2026-01-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-01-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="3 deploys on 2026-01-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2026-01-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2026-01-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-01-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-01-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-01-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-01-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="16 deploys on 2026-01-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="10 deploys on 2026-01-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-01-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-01-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-01-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-02-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-02-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-02-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-02-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-02-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-02-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-02-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-02-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-02-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-02-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-02-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-02-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2026-02-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-02-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-02-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="7 deploys on 2026-02-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-02-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2026-02-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2026-02-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-02-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-02-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-02-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-02-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="10 deploys on 2026-02-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="10 deploys on 2026-02-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-02-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-02-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2026-02-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-03-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2026-03-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-03-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-03-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="15 deploys on 2026-03-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="11 deploys on 2026-03-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-03-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-03-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="10 deploys on 2026-03-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="8 deploys on 2026-03-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-03-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-03-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2026-03-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-03-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-03-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="4 deploys on 2026-03-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-03-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="9 deploys on 2026-03-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="11 deploys on 2026-03-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-03-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-03-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2026-03-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-03-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="9 deploys on 2026-03-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="6 deploys on 2026-03-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-03-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-03-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="3 deploys on 2026-03-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-03-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-03-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="7 deploys on 2026-03-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="7 deploys on 2026-04-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="5 deploys on 2026-04-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="6 deploys on 2026-04-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2026-04-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-04-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="13 deploys on 2026-04-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="7 deploys on 2026-04-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2026-04-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="6 deploys on 2026-04-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="10 deploys on 2026-04-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-04-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-04-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-04-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-04-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="11 deploys on 2026-04-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="10 deploys on 2026-04-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-04-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="1 deploy on 2026-04-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-04-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="4 deploys on 2026-04-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="5 deploys on 2026-04-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-04-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2026-04-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="7 deploys on 2026-04-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="3 deploys on 2026-04-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-04-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="3 deploys on 2026-04-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="13 deploys on 2026-04-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-04-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-04-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-05-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-05-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-05-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="10 deploys on 2026-05-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-05-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-05-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="11 deploys on 2026-05-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="12 deploys on 2026-05-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-05-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="0 deploys on 2026-05-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="9 deploys on 2026-05-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-05-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2026-05-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2026-05-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-05-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-05-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2026-05-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="13 deploys on 2026-05-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-05-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="10 deploys on 2026-05-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="8 deploys on 2026-05-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="5 deploys on 2026-05-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-05-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-05-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2026-05-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="14 deploys on 2026-05-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="7 deploys on 2026-05-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="0 deploys on 2026-05-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="9 deploys on 2026-05-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-05-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-05-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2026-06-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="5 deploys on 2026-06-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-06-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="12 deploys on 2026-06-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-06-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-06-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2026-06-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="14 deploys on 2026-06-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2026-06-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2026-06-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="5 deploys on 2026-06-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="6 deploys on 2026-06-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="2 deploys on 2026-06-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-06-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-06-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2026-06-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="15 deploys on 2026-06-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-06-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-06-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-06-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-06-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-06-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="10 deploys on 2026-06-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="10 deploys on 2026-06-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-06-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="13 deploys on 2026-06-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-06-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-06-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="3 deploys on 2026-06-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="12 deploys on 2026-06-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-07-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="8 deploys on 2026-07-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-07-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-07-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-07-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="14 deploys on 2026-07-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-07-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-07-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="13 deploys on 2026-07-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-07-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="1 deploy on 2026-07-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-07-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="6 deploys on 2026-07-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="4 deploys on 2026-07-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="14 deploys on 2026-07-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="6 deploys on 2026-07-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-07-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="3 deploys on 2026-07-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="4 deploys on 2026-07-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-07-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2026-07-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="8 deploys on 2026-07-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-07-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="12 deploys on 2026-07-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-07-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-07-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="9 deploys on 2026-07-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="16 deploys on 2026-07-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2026-07-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="2 deploys on 2026-07-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="17 deploys on 2026-07-31" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-08-01" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="2 deploys on 2026-08-02" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="8 deploys on 2026-08-03" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-08-04" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="5 deploys on 2026-08-05" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="17 deploys on 2026-08-06" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="9 deploys on 2026-08-07" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="0 deploys on 2026-08-08" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="2 deploys on 2026-08-09" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="12 deploys on 2026-08-10" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-08-11" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="8 deploys on 2026-08-12" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-08-13" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="0 deploys on 2026-08-14" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="4 deploys on 2026-08-15" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="3 deploys on 2026-08-16" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="0 deploys on 2026-08-17" class="h-3 w-3 rounded-[2px] border border-transparent bg-muted"></span>
        <span title="6 deploys on 2026-08-18" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="15 deploys on 2026-08-19" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="4 deploys on 2026-08-20" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="7 deploys on 2026-08-21" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70"></span>
        <span title="1 deploy on 2026-08-22" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="1 deploy on 2026-08-23" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="10 deploys on 2026-08-24" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="14 deploys on 2026-08-25" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="2 deploys on 2026-08-26" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
        <span title="4 deploys on 2026-08-27" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="16 deploys on 2026-08-28" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary"></span>
        <span title="3 deploys on 2026-08-29" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45"></span>
        <span title="1 deploy on 2026-08-30" class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25"></span>
      </div>
    </div>
    <div class="mt-4 flex items-center justify-end gap-2 text-xs text-muted-foreground">
      <span>Less</span>
      <span class="h-3 w-3 rounded-[2px] border border-transparent bg-muted">
        <span class="sr-only">Level 0</span>
      </span>
      <span class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/25">
        <span class="sr-only">Level 1</span>
      </span>
      <span class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/45">
        <span class="sr-only">Level 2</span>
      </span>
      <span class="h-3 w-3 rounded-[2px] border border-transparent bg-primary/70">
        <span class="sr-only">Level 3</span>
      </span>
      <span class="h-3 w-3 rounded-[2px] border border-transparent bg-primary">
        <span class="sr-only">Level 4</span>
      </span>
      <span>More</span>
    </div>
    <table class="sr-only">
      <caption>Deploy activity by month</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">deploys</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Sep 2025</th>
          <td>72</td>
        </tr>
        <tr>
          <th scope="row">Oct 2025</th>
          <td>90</td>
        </tr>
        <tr>
          <th scope="row">Nov 2025</th>
          <td>87</td>
        </tr>
        <tr>
          <th scope="row">Dec 2025</th>
          <td>109</td>
        </tr>
        <tr>
          <th scope="row">Jan 2026</th>
          <td>111</td>
        </tr>
        <tr>
          <th scope="row">Feb 2026</th>
          <td>69</td>
        </tr>
        <tr>
          <th scope="row">Mar 2026</th>
          <td>132</td>
        </tr>
        <tr>
          <th scope="row">Apr 2026</th>
          <td>146</td>
        </tr>
        <tr>
          <th scope="row">May 2026</th>
          <td>148</td>
        </tr>
        <tr>
          <th scope="row">Jun 2026</th>
          <td>157</td>
        </tr>
        <tr>
          <th scope="row">Jul 2026</th>
          <td>170</td>
        </tr>
        <tr>
          <th scope="row">Aug 2026</th>
          <td>162</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

9 more blocks in Charts & Metrics

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Charts & Metrics

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Charts & Metrics blocks

View category

Sparkline Metric Cards

KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.

Charts & Metrics142 linesNo deps

Revenue this week

Solid is this week. Faded is the week before.

$34,500

Revenue this week
Period	This week	Previous week
Mon	$4,200	$3,800
Tue	$5,100	$4,400
Wed	$4,800	$4,900
Thu	$6,300	$5,200
Fri	$7,100	$5,800
Sat	$3,900	$3,600
Sun	$3,100	$3,000

CSS Bar Chart Panel

Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.

Charts & Metrics139 linesNo deps2 Sept

Quota & Usage Meters

Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.

Charts & Metrics172 lines1 dep2 Sept

Monthly active workspaces

Compared with the same month last year.

This year
Last year

5,000
3,500
2,000

Monthly active workspaces
Month	This year	Last year
Jan	3,120	2,980
Feb	3,260	3,010
Mar	3,180	3,090
Apr	3,540	3,120
May	3,720	3,050
Jun	3,610	3,210
Jul	3,880	3,180
Aug	4,020	3,340
Sep	3,960	3,290
Oct	4,180	3,410
Nov	4,320	3,380
Dec	4,410	3,520

Dual-Series Line Chart

A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.

Charts & Metrics277 linesNo deps13 Sept

Donut Breakdown

Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.

Charts & Metrics205 linesNo deps2 Sept

Signup funnel

Last 30 days

End to end 5.5%

Visited pricing18,420Top of the funnel
100.0% of the funnel
Started signup6,21533.7%from previous step
12,205 did not continue · 33.7% of everyone who started
Verified email4,98880.3%from previous step
1,227 did not continue · 27.1% of everyone who started · Link expires after 24 hours
Reached checkout1,10222.1%from previous step
3,886 did not continue · 6.0% of everyone who started
Biggest drop in the funnel — 77.9% of the previous step stops here
Paid1,01492.0%from previous step
88 did not continue · 5.5% of everyone who started

Counted as a cohort: every person here entered at the first step inside the window and is followed through in order. Someone who signed up last month and paid this month is not in these numbers, so this reads lower than a per-step total over the same period — and it is the one that answers “what happens to the people we get”.

Conversion Funnel

A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.

Charts & Metrics195 lines1 dep10 Sept

Alerts, and how close they are

An alert that has never fired looks identical to an alert that is broken. Showing the current distance to the threshold is what tells the two apart at a glance.

Metric Alert List

Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.

Charts & Metrics141 linesNo deps13 Sept

This month

The four numbers the team looks at

Every figure names what it is being compared against. A delta with no stated period is the most common way a dashboard misleads the people who built it.

Active workspaces: 3,412
Net revenue retention: 112%
p95 latency: 412 ms
Open incidents: 1

KPI Summary Band

The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.

Charts & Metrics118 linesNo deps

Market Price Ticker

The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.

Charts & Metrics180 lines1 dep