Activity Heatmap
A copy-paste calendars & date pickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Calendars & Date PickersHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-heatmap" role="img" aria-label="Activity over the last 12 weeks">
<!-- Repeat <span class="nuda-heatmap__cell nuda-heatmap__cell--N"> -->
<span class="nuda-heatmap__cell nuda-heatmap__cell--0"></span>
<span class="nuda-heatmap__cell nuda-heatmap__cell--3"></span>
<span class="nuda-heatmap__cell nuda-heatmap__cell--4"></span>
<!-- ... -->
</div>CSS
.nuda-heatmap {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 12px;
gap: 3px;
}
.nuda-heatmap__cell {
width: 12px;
height: 12px;
border-radius: 3px;
background: rgba(228, 255, 84, 0.07);
animation: nuda-hm-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
transition: transform 0.25s, filter 0.2s, background 0.25s;
}
.nuda-heatmap__cell--1 { background: rgba(228, 255, 84, 0.18); }
.nuda-heatmap__cell--2 { background: rgba(228, 255, 84, 0.36); }
.nuda-heatmap__cell--3 { background: rgba(228, 255, 84, 0.60); }
.nuda-heatmap__cell--4 {
background: #e4ff54;
box-shadow: 0 0 6px rgba(228, 255, 84, 0.5);
}
.nuda-heatmap__cell:hover {
transform: scale(1.4);
filter: brightness(1.3);
}
@keyframes nuda-hm-in {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}How to use Activity Heatmap
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.