shadcn.io is not affiliated with official shadcn/ui
Multi Board Task List Block for Ark UI
A task window with a rail of three boards, Personal, Work and Shopping, each with its own tasks and open count, an add field that always lands on the open board, Clear done and Undo.
Installation
Overview
Keep several lists in one place, with this multi-board to-do list block for React with Ark UI. It is a fixed-height window with a rail of boards at the start, each with a count of open tasks, and the open board beside it. The top bar names the board, counts what is done ("3 of 8 done") and holds the only colored control, a Shine Button that adds the task typed in the field under it, so a task always lands on the board that is open and the rail counts follow. Tasks are Checkbox rows with a due date worked out from a fixed day. "Clear done" takes the finished tasks off the open board and a one-line Undo puts them back; clear a whole board and an Empty state fills the same space. On a phone the rail becomes a Native Select in the top bar. The frame is ruled by Guides. For task apps with more than one list, personal and work separation, and shopping lists.
FAQ
How do I load my own boards?
Replace START with your boards: each has an id, a name and its tasks (an id, a title, a done flag and an optional ISO due date, empty for none). Open counts and the "done" count are derived from the tasks. Due labels are worked out against the AS_OF constant, a fixed "today".
What stays local, and how do I save for real?
Everything. Adding, ticking, clearing and undoing change state on the page and nothing is sent anywhere, so every board resets when you reload. In your app write each change from add, toggle, clearDone and undo to your own store, keyed by the board.
Where does an added task go?
To the top of the board that is open. The Add task button in the top bar is attached to the field below it with the HTML form attribute, so pressing it, or pressing Enter in the field, submits the same form. An empty submit says "Write a task first" and keeps focus in the field.
How does Undo work?
Clear done removes the finished tasks from the open board and shows an Undo button above the list. Undo puts them back at the positions they had. Switching board or adding a task drops the Undo, so it only ever applies to the board you are looking at.