shadcn.io is not affiliated with official shadcn/ui
Water Intake Calendar Block for React
A week of seven day buttons with eight squares each, filled to the share of a daily goal, over the chosen day's eight two-hour windows with a plus and a minus for every glass.
Installation
Overview
Log a day's water with this water intake calendar for React with Base UI. A hairline frame with a plus mark on each corner holds a strip of seven day buttons, Monday 12 to Sunday 18 October, each drawing eight squares filled to the share of the daily goal that was drunk, with the count under them ("7/8"). The days after the fixed "now", Wednesday 14 October, are locked and say so. The chosen day lists its eight two-hour windows from 08:00 to 22:00, and each window has a minus and a plus button for the glasses in it, up to three. A Select sets the goal to 6, 8 or 10 glasses, and a Progress bar, the day's "3 of 8 glasses" and the average of the days so far all re-derive from the same counts. The squares are foreground weights, never blue. The strip scrolls sideways on a narrow phone, the bands are ruled by Guides, and the entrance is CSS only. For hydration trackers, wellness apps and any log that counts a small thing in time slots.
FAQ
How do I change the starting logs?
Edit START: each day is a list of eight numbers, the glasses in each window from 08:00 to 22:00. The squares, the day total, the bar and the average are all worked out from those lists and the goal; none of them is typed twice.
How are the eight squares filled?
They show the share of the goal as eighths, rounded, and at least one square once any water is logged. With a goal of 8, one square is one glass; with 10, a glass is a little less than a square. The exact count is always written under the squares.
Why can't I choose a later day?
A log records what already happened, so days after the fixed "now" in AS_OF are disabled radio buttons that read "not open yet" to a screen reader. Past days and today stay editable, and the week's average counts only those.
How do I use it with the keyboard?
The days are one radio group, so the arrow keys move between them and skip the locked ones. In the window list each plus and minus is a named button ("Add a glass at 10:00"). A polite status line says what changed, the day total and the goal, and also answers a press at zero or at three glasses.