shadcn.io is not affiliated with official shadcn/ui
Family Organizer Chat Block for React
A family group chat where Make a chore on any message opens a popover for who and which day, adds it to a This week pane grouped by person with checkboxes and tallies, and saves the week as a real .ics calendar file.
Installation
Overview
Turn what the family says into who does what, with this family organizer chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Hearthfold, a family planner: the thread is flat rows with a name and a time, and every message from someone else has a "Make a chore" button that opens a Popover to pick who and which day this week. The chore lands in the This week pane at the end, grouped by person with a Checkbox each and a tally such as "Sam 2 of 3" worked out from the ticks; ticking one adds a quiet line to the thread, "Sam finished: take out bins". Download .ics saves the week's chores as a calendar file made in the browser. Replies come from a typed script after a Typing Indicator Text, the composer's Shine Button is the only colored control, and on a phone a Chat and This week switch shows one pane at a time. It's the starting point for a family app, a household rota or any chat that creates tasks.
FAQ
What stays in the page, and how do I make it real?
Everything but the file. The chores, the ticks and the replies live in this page's state and are gone on reload; nothing is sent and no model runs, as the line under the composer says. The .ics download is real: the browser builds the file and saves it. To wire it for real, save each chore to your planner where make and tick run and push other people's changes into the same state.
How does a message become a chore?
Make a chore opens a small non-modal popover with a radio list of people and a native day select. Add to this week copies the message, shortened to about 44 characters, into the chosen person's list for the chosen day and writes a system line to the thread. Your own messages have no button, since the thread is where others ask for things.
Where do the tallies come from?
They are never typed. One helper filters the list by person and counts the ticked ones, and the header, the pane and the status line all read the same list, so "Sam 2 of 3" can't drift from what is checked.
What is in the calendar file?
One all-day event per chore, titled with the person and the task, on its date in the week of 12 October 2026, with CRLF line ends as the format asks. Dates are typed, so the file is the same on every visit.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. Make a chore is a real button that opens a labelled popover which Escape closes and returns focus from; every chore is a labelled checkbox and each person's group has a heading. Done is struck through and also changes the tally, never only a color.