shadcn.io is not affiliated with official shadcn/ui
Pet Care Calendar Block for React Aria
A pet filter over today's care tasks, each ticked with who did it and when, an inline check before a task already done is marked again, and the vet and grooming visits to come with their days away.
Installation
Overview
Keep a household's pets fed, walked and medicated without anyone doing it twice, with this pet care calendar for React with React Aria. A hairline frame with a plus mark on each corner holds a ToggleGroup to choose All, Mochi, Dumpling or Pip, then the day's care tasks as a list. Each task is a checkbox: ticking it records the time and the person ("Fed at 07:40 by Sam") with their initials in an Avatar, and a task that is still open past its time says when it was due. Ticking a task that is already done does not count it again by accident: a band under the list asks "Already done at 07:40 by Sam. Mark again?" and waits for Mark again or Keep as is, with no dialog and no layout shift. Under it, the vet and grooming visits to come show a Badge for the kind and the days away, worked out from the fixed "now", Wednesday 14 October 2026. The list holds its height under any filter, and a pet with no visit shows an empty line in the same place. The bands are ruled by Guides. Below the small breakpoint the rows keep their two lines and the band's buttons sit under the question. It's built from ToggleGroup, Button, Avatar, Badge and Guides, with a CSS entrance only. For pet apps, household chore logs and any app where several people share one list of care.
FAQ
How do I add my own pets and tasks?
Edit PETS, TASKS and VISITS. A task has a pet, a name, the past-tense word shown after a tick (did, such as "Fed"), a due time and a log of { at, by } entries for what has already been done today. A visit has a date, a time, a title and a kind. The counts, the overdue state and the "in 3 days" words are all worked out from these and from the fixed "now" in AS_OF.
What is the check before marking a task again?
A care task done twice is usually a mistake (a double dose, a second breakfast). Ticking a task that already has an entry opens the band under the list instead of adding one. Mark again adds a second entry and the row then reads "2 times"; Keep as is leaves the task alone. Focus moves to the band and returns to the checkbox, and a polite status line says what happened.
Why is it always Wednesday 14 October?
Nothing here reads the clock. AS_OF is "now" for the overdue words, the days away and the time stamped on a tick (09:30), so the block looks the same on the page, in /view and in the gallery on any day. Change AS_OF to move it.
How do I use it with the keyboard?
The pet filter is one tab stop and the arrow keys move between pets. Each task is a native checkbox, so Space ticks it, and the Mark again and Keep as is buttons come next in the tab order. Every control has a name that includes the pet.
What stays local, and how do I wire it up?
The ticks live in the page and reset on reload; nothing is saved, sent or shared with the other people in the household. To keep them, send each new entry from tick and again to your own API and start the state from what it returns, including who is signed in instead of the fixed "Jo".