shadcn.io is not affiliated with official shadcn/ui
Plant Watering Calendar Block for Vue
Six houseplants grouped by room or ordered by thirst, each with an interval, a last-watered day, a derived next day and a thirst bar, and a Water now button that re-derives them.
Installation
Overview
Know which plant needs water today with this plant watering calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a ToggleGroup that switches between By room and Thirstiest first, and a count of how many plants are due today or overdue. By room, each room is a Collapsible band, open on load, with its plants listed under it. Each plant shows its light as a glyph and a word, how often it needs water, and the next day worked out from its last-watered day and its interval: "3 days overdue", "Due today" or "In 2 days", over a thin thirst bar that fills as the interval runs out. Pressing Water now sets the last-watered day to the fixed "now", Wednesday 14 October 2026, and the next day, the words, the bar and the counts all update. In Thirstiest first the plants form one list, ordered when you press it so a row never jumps away while you are watering it. The two views share one cell, so the panel keeps its height. The bands are ruled by Guides. Below the small breakpoint each row keeps its name, its next day and its button. It's built from ToggleGroup, Collapsible, Button and Guides, with a CSS entrance only. For houseplant apps, garden journals and any app that schedules care by interval.
FAQ
How do I add my own plants and rooms?
Edit ROOMS and PLANTS. A plant has a room, an interval in days, a last watered day as ISO and its sun, one of Bright, Partial or Low. The next day is last plus interval, the thirst bar is the share of the interval already used, and the words come from the fixed "now" in AS_OF; none of them is typed.
Why does the order only change when I press Thirstiest first?
If the list re-sorted itself on every watering, the plant you just watered would jump away under your pointer. The order is worked out when you press the button and is kept until you press it again, so a watered plant stays where it was and shows its new date.
How is the thirst bar read without colour?
The bar is a drawing; the facts are in text. Its fill gets heavier as the plant gets thirstier (light, then medium, then solid once it is overdue) and the row always says "3 days overdue", "Due today" or "In 5 days" beside the date.
How do I use it with the keyboard?
The order buttons are one tab stop with the arrow keys. Each room's header is a button that opens or closes its band with Enter or Space, and a closed band is not in the tab order. Water now is named with the plant, such as "Water now, Basil", and a polite status line says the plant's next day.