Shadcn.io is not affiliated with official shadcn/ui
React Year Overview Calendar Block
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.
React Year Overview Calendar Block preview
Installation
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.
React Weekly Calendar Planner Block
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
React A/B Test Experiment Results Carousel Block
Animated A/B test experiment results carousel slider for React and Next.js with variant comparison bars, conversion rates, winner indicators, confidence levels, sample sizes, and status chips using shadcn/ui Carousel, framer-motion, and Tailwind CSS