shadcn.io is not affiliated with official shadcn/ui
Moon Phases Calendar Block for React
A month of drawn moons worked out from the 29.53-day cycle, with the chosen day's phase, share lit, age and the next full and new moon, and a switch that mirrors the moons for the southern hemisphere.
Installation
Overview
Plan an observing night around the dark days with this moon phase calendar for React with Base UI. A hairline frame with a plus mark on each corner holds a month as a table, Monday first, whose days each carry a small drawn moon with its lit part worked out from the mean synodic month, 29.53 days, counted from a typed new moon on 10 October 2026. Previous and next Buttons page between September and December 2026. Choosing a day, with a click or the arrow keys, fills the facts panel: a larger moon, one of eight phase names in a Badge, the share lit in percent, the moon's age in days, and the next full and new moon counted from the fixed "now", 14 October, with how many days away they are. A Switch for the southern hemisphere mirrors every moon, and the grid itself never flips. The moons are drawings with a text name on every day, and the bands are ruled by Guides. Below the medium breakpoint the month comes first and the facts sit under it. It's built from Button, Badge, Switch and Guides, with a CSS entrance only. For almanacs, gardening and fishing calendars, astronomy apps and anything that needs to show the moon.
FAQ
How accurate are the phases?
They are worked out from the mean length of the lunar month, not from an ephemeris, so a phase can be a day off the printed almanac, and the quarters are named only on the day nearest their exact moment. That's fine for planning and not for a tide table. The copy says "accurate to about a day"; for more, replace ageOf with a call to an astronomy library or your own data.
How do I change the reference date?
Edit REFERENCE_NEW_MOON, any real new moon as a UTC time, and ageOf counts every day's age from it. The further a month is from the reference the more the mean cycle drifts from the real one, so pick one near the months you show, and change FIRST_MONTH and LAST_MONTH to set how far the arrows can page.
What does the southern hemisphere switch do?
The same moon is lit on the opposite side in the south, so the switch mirrors every drawing and nothing else: the weekday columns, the page order and right-to-left layouts stay as they are. The phase names and the percentages don't depend on the hemisphere.
How do I move around with the keyboard?
The month is one tab stop. The arrow keys move a day or a week, Home and End go to the ends of the week, Page Up and Page Down turn the month, and Enter or Space chooses a day. Each day is a button named with its date, the phase and the share lit ("Thursday 15 October, Waxing crescent, 25 percent lit"), and a polite status line says it again.
What stays local, and how do I wire it up?
Everything is computed in the page from the constants at the top of the file, and nothing is saved or sent. The "now" is fixed at 14 October 2026 so the block looks the same on any day; to follow the real date set AS_OF from your own clock and keep the rest.