ns-ui
Masked date input whose popover calendar doubles as a moon-phase almanac: every day cell carries a canvas moon with a real synodic terminator, the field icon tracks the focused date's phase live, and committing runs an eclipse transit across the chosen numeral.
Use when a single calendar date where the lunar phase of the choice is genuinely relevant or worth the ceremony (launch dates, observation windows, editorial calendars), with a masked MM/DD/YYYY field for typists and a 42-cell grid for pointers; pick date-range-tape instead when a span and its duration are what is being decided rather than one day, or time-picker-sundial when the value is a time of day rather than a date.
Install
npx shadcn add https://design.helpmarq.comns-ui / date-picker-moon
The date picker doubles as a moon-phase almanac — every day cell carries its computed terminator, and committing a date runs a tiny eclipse across the numeral.
Last quarter · 65% illuminated
Dated Aug 4, 2026
Open the calendar (or press Arrow Down in the field), arrow through the month and watch the trailing moon track your focus. Enter commits with an eclipse transit across the chosen day.
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | Date | null | — | controlled selected date; omit for uncontrolled |
| defaultValue? | Date | null | null | — |
| onValueChange? | (date: Date) => void | — | — |
| label? | string | "Date" | — |
| disabled? | boolean | false | — |
| className? | string | — | — |