shadcn.io is not affiliated with official shadcn/ui
Cleanup Tasks Kanban Block for React Aria
A three-column household cleanup board (To do, Doing, Done) of ten chores with a room chip on each and a done-this-week count worked out from finished dates.
Installation
Overview
Keep a house in order with this cleanup board for React with React Aria. A hairline frame with a plus mark on each corner holds three columns, To do, Doing and Done, and ten chores. Each card shows the chore and the room or area it belongs to in an outline Badge; a chore in Done also shows the day it was finished. A strip of three counts above the board reads "Done this week", "Still open" and "Areas with a chore open", and the first follows every move: moving a chore into Done stamps it with the fixed as-of day, moving it out clears the stamp, and chores finished before the week began never count. The sentence under the heading is worked out from the same cards. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the board. On a phone the columns scroll sideways in one named region. For home and office chores, rota boards and any list with a weekly tally.
FAQ
How do I fill it with my own chores?
Edit COLUMNS and START. A chore has an id, the column it starts in, an area, a title and a doneOn ISO date, which is empty until it is done. The counts and the header sentence are calculated from the cards.
How is the done-this-week count worked out?
From each Done card's doneOn date against two fixed constants, WEEK_FROM (the Monday the week starts) and AS_OF (the day the board is read at). Nothing reads the clock, so the page renders the same on the server and in the browser. To use the real date, compute both constants when the page loads and keep the rest.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
What stays in the demo?
Everything: moves and finished dates live in the component's state, nothing is saved, and a reload or Reset restores the starting board. To save for real, call your API from put, the one function every finished move goes through, and use the saved date instead of AS_OF.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The count strip stays above the board and the three counts share one row. Touch drags from the grip only; the menu moves a card with a single tap.