#What is Shadcn Calendar Heatmap?

Shadcn Calendar Heatmap is a free, open-source React component by Gurbaaz27, designed to extend shadcn-ui with a modern, customizable calendar heatmap inspired by GitHub’s contribution graph. It’s ideal for developers building data visualization tools, habit trackers, or analytics dashboards in Next.js or React projects, where highlighting date-based activity is needed.

Built with Next.js, TypeScript, Tailwind CSS, shadcn-ui, and react-day-picker, it offers flexible styling through variant classnames and supports two data input methods: datesPerVariant (grouped dates) or weightedDates (weighted date entries). It integrates via shadcn CLI and addresses the limitations of primitive React heatmaps like react-calendar-heatmap (SVG-based).

#Features ⚡️

• GitHub-Style Heatmap: Visualizes date activity with customizable color variants.

• Two Data Inputs:

  • datesPerVariant: Group dates into arrays for specific styles (e.g., green shades).

  • weightedDates: Assign weights to dates, auto-slotted into variants by weight.

• Custom Styling: Pass Tailwind CSS classes via variantClassnames for each intensity level.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance via react-day-picker.

• Responsive Layout: Tailwind CSS ensures adaptability across devices.

• Event Handling: Supports onSelect, onDayClick for interactive use cases like booking systems.

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Seamlessly matches shadcn-ui’s aesthetic and accessibility.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• Flexible Data Handling: Supports grouped or weighted date inputs for diverse use cases.

• Modern Alternative: Improves on SVG-based libraries like react-calendar-heatmap.

• Community Interest: 111 stars and positive Reddit feedback (June 2024).

#Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, react-day-picker, and Next.js dependencies.

• Client-Side Focus: Data rendering is client-side; server-side logic requires custom setup.

• Limited Features: Lacks advanced heatmap options like tooltips or dynamic range scaling (unlike nivo.rocks/calendar).

• No Native Localization: Requires manual date-fns integration for non-English locales.

#Included Components

• CalendarHeatmap: Main component rendering the heatmap with variant-based styling.

• DayPicker: react-day-picker for calendar structure and navigation.

• Button: shadcn-ui buttons for navigation (ChevronLeft/Right from lucide-react).

#Pricing 💸

Shadcn Calendar Heatmap is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for the component.

• shadcn-ui: Provides accessible calendar primitives.

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Bootstrapped with create-next-app for project setup.

• TypeScript: Ensures type safety.

• react-day-picker: Powers calendar rendering and date handling.

• lucide-react: Icons for navigation buttons.

• date-fns: Utility for date manipulation.

• next/font: Optimizes Inter Google Font loading.