Shadcn.io is not affiliated with official shadcn/ui
Calendar Moon Phases
A React moon phase calendar block for Next.js with lunar phase icons, phase names, illumination percentage, and monthly cycle view built with shadcn/ui and Tailwind CSS
Track the lunar cycle with this React and Next.js moon phase calendar block. View phase icons, phase names, illumination percentages, and key lunar dates across the month. Built with TypeScript, shadcn/ui Badge and Button components, and Tailwind CSS. Ideal for astronomy dashboards, gardening planners, astrology apps, and outdoor photography scheduling.
Related Components
Weather Forecast
7-day weather forecast
Monthly View
Full month calendar grid
Campaign Timeline
Marketing campaign phases
Fiscal Quarters
Quarterly revenue overview
Exam Schedule
Academic exam tracker
Leave Tracker
PTO and leave management
FAQ
Was this page helpful?
Sign in to leave feedback.
Monthly View
A full month calendar grid with event dot indicators, interactive day selection, and an event list sidebar built with React, Next.js, shadcn/ui, and Tailwind CSS
Movie Releases
A movie and show release calendar block for Next.js with release dates, genre tags, and watchlist tracking using shadcn/ui and Tailwind CSS