ns-ui
A time-of-day picker as a flat sundial — drag the outer ring to set the hour and the inner ring for 5-minute detents, while a soft blurred gnomon shadow points at the hour and lengthens from a short AM wedge into a long PM one as you keep dragging past noon.
Use when a time of day set by dragging rather than typing, hour on the outer ring and 5-minute detents on the inner one, with the gnomon shadow lengthening past noon so AM and PM stay readable without a separate control; pick date-picker-moon instead when the value is a calendar date, or stepper-needle when the time is better entered as a bounded numeric field than found on a dial.
Install
npx shadcn add https://design.helpmarq.comns-ui / time-picker-sundial
Drag the outer ring for the hour, the inner ring for 5-minute detents. Keep dragging past 12 and the shadow lengthens into PM.
| Prop | Type | Default | Description |
|---|---|---|---|
| hour? | number | — | 0-23, controlled. |
| minute? | number | — | 0-59, controlled — only 5-minute values are reachable via the UI. |
| defaultHour? | number | — | — |
| defaultMinute? | number | — | — |
| onChange? | (hour: number, minute: number) => void | — | — |
| className? | string | — | — |