{"repo":"gurbaaz27/shadcn-calendar-heatmap","free":true,"listed":false,"github":"https://github.com/gurbaaz27/shadcn-calendar-heatmap","clone":"git clone https://github.com/gurbaaz27/shadcn-calendar-heatmap.git","description":"Modern alternative to primitive react heatmaps.","language":"TypeScript","stars":180,"topics":["app-router-nextjs","calendar","github-streak","heat","heatmaps","nextjs","rea","shadcn-ui","calendar-hea"],"license":"MIT","category":"productivity","readme_excerpt":"shadcn-calendar-heatmap A modern, customizable calendar heatmap component built on top of react-day-picker following shadcn/ui patterns. Accessible. Unstyled. Customizable. Open Source. ✨ Features - 🎨 Fully Customizable - Style with Tailwind CSS classes - 📅 Multiple Data Modes - Use direct date arrays or weighted dates with auto-categorization - 🔢 Multi-month Support - Display any number of months - ♿ Accessible - Built on react-day-picker with full keyboard navigation - 🎯 Type Safe - Written in TypeScript with full type definitions - 🌈 Preset Variants - GitHub streaks, temperature heatmaps, rainbow colors, and more 🚀 Demo Check out the live demo at shadcn-calendar-heatmap.vercel.app 📦 Installation This component follows the shadcn/ui philosophy - copy the component directly into your project. 1. Install Dependencies 2. Copy the Component Copy components/ui/calendar-heatmap.tsx into your project's components directory. 3. Ensure you have the required utilities Make sure you have the cn utility function (standard in shadcn/ui projects): 📖 Usage Basic Example - GitHub Contribution Graph Using Weighted Dates Pass dates with numeric weights, and the component auto-categorizes them: Multi-month Display 🔧 API Reference Props Prop Type Required Description ------ ------ ---------- ------------- variantClassnames string[] ✅ Array of Tailwind CSS classes for each intensity level datesPerVariant Date[][] ⚡ 2D array where each inner array contains dates for that variant weighte","default_branch":null,"files":null,"tree":[],"storefront":"/r/gurbaaz27","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/gurbaaz27/shadcn-calendar-heatmap/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}