shadcn.io is not affiliated with official shadcn/ui
Sleep Tracker Calendar Block for Radix UI
Seven nights drawn as floating bars from bedtime to waking on a 20:00 to 12:00 axis, with the chosen night's length, a sleep target slider, the week's debt and how much bedtimes vary.
Installation
Overview
See a week of sleep as bars with this sleep tracker calendar for React with Radix UI. A hairline frame with a plus mark on each corner holds seven nights, the ones ending Thursday 8 to Wednesday 14 October, each drawn as a bar that starts at bedtime and ends at waking on an axis from 20:00 to 12:00 (the axis and its labels always read left to right, in any language). Each night is a radio button, so the arrow keys move between them; choosing one names the bedtime, the waking time, how long it was, how many minutes it sits over or under a target, and how you woke in words ("Rested, 4 of 5") instead of a score. A slider in the header sets the target from 7 to 9 hours in quarter hours. Two figures under the chart come from the same seven nights: the sleep debt (the nights under the target, added up) and how much bedtimes vary (the latest minus the earliest). The bands are ruled by Guides, and the entrance is CSS only. For sleep diaries, wellness apps and any log that spans midnight.
FAQ
How do I change the nights?
Edit NIGHTS: each one has the clock time you went to bed, the clock time you woke, the morning it ends on and how you felt from 1 to 5. Bar positions, lengths, the debt and the variation are all worked out from those times; the axis starts at 20:00 and spans sixteen hours.
How is the sleep debt counted?
For every night shorter than the target it adds the shortfall in minutes. A night over the target does not pay anything back, and the page says so. Moving the slider recomputes every night's gap and the total at once.
Why is the axis from 20:00 to 12:00?
A night crosses midnight, so the bars sit on one continuous clock rather than two days. The bars and labels are laid out with a left-to-right direction in right-to-left pages too, because time reads that way on a chart.
How do I use it with the keyboard?
The nights are a radio group: arrow keys move between them, and the details beside the chart follow. The slider is a native range input with a spoken value ("8 h 00"), and a polite status line says what changed.