Shadcn.io is not affiliated with official shadcn/ui
Calendar Year Overview
React 12-month year overview calendar block for Next.js with heat map style event density per day, month grids, color-coded intensity levels, and yearly statistics using shadcn/ui and Tailwind CSS
See your entire year at a glance with this heat map calendar. Twelve compact month grids show event density per day using color intensity, making it easy to spot busy periods, plan ahead, and balance workload across months. Built with React, TypeScript, shadcn/ui components, and Tailwind CSS.
Related Components
Timeline View
Horizontal timeline with event blocks
Holiday Manager
Holiday and PTO management
Birthday Tracker
Birthday and anniversary tracking
Task Deadlines
Task deadline calendar with priorities
Sprint Timeline
Agile sprint timeline view
Countdown Timer
Event countdown display
FAQ
Was this page helpful?
Sign in to leave feedback.
Weekly Planner
A weekly planner calendar with hourly time slots, event blocks spanning time ranges, and navigable day headers built with React, Next.js, shadcn/ui, and Tailwind CSS
Accessibility Check
An accessibility compliance checklist block for React and Next.js with WCAG principles, conformance level badges, pass/fail tracking, and compliance percentage built with shadcn/ui and Tailwind CSS