shadcn.io is not affiliated with official shadcn/ui
Task List CRUD Block for Ark UI
A flat-share's chore list with a quick line to add, rows that open in place to a title, due date and note, a progress line that counts what is done, Clear completed with one Undo, and a Remove that leaves Undo.
Installation
Overview
Keep a household's chores in one place, with this task list for React with Ark UI. A hairline frame with a plus mark on each corner holds a quick line, an Input where a chore and Enter add it at the top of the list, with its Add button the only Shine Button. A band under it says "3 of 7 done" beside a Progress bar, both derived from the list, and an outline Clear completed that appears only when something is done. Seven chores sit in a frame of fixed height: a Checkbox marks a chore done, its name and due line open it in place as a Collapsible to a title, a due date and a note, and Remove leaves the foot saying "Removed Bins out." beside an Undo. The title can't be empty, and the card shows the reason without changing height. Clear completed removes every done chore in one step, and a single Undo brings them all back. The band is ruled by Guides, and an Empty state shows when the list is cleared. For chore rotas, shopping lists, checklists and any list people tick off and tidy.
FAQ
How do I fill it with my chores?
Edit CHORES: each has an id, a title, a due day as an ISO date (or an empty string), a note and a done flag. The progress line and the bar are derived from the list, and the due line reads "Overdue since" for a day before the as-of constant AS_OF, so nothing reads the clock. New ids come from a counter in state.
How does a chore open, and what can I change?
Press its name, or Enter on it, to open it; one chore is open at a time. The card has the title, a due date in the browser's own date field and a note of up to 80 characters; changes apply as you type. An empty title is refused with a reason in a slot that is always there, and the last good title stays in the list until you fix it.
What does Clear completed do?
It removes every chore that is done in one step and says how many went and how many remain. A single Undo brings all of them back, in their old places, and focuses the first one. The button is in the layout all the time but hidden and inert when nothing is done, so the band never changes height.
How many things can Undo restore?
One: the last removal or the last Clear completed. Adding, ticking or editing replaces it, so Undo can never put back something older than what you see. It restores the whole list as it was and does not time out.
What stays local, and how do I wire a real save?
Chores live in state in this tab and a reload restores the seven; nothing is sent. In your app write each change to your API from add, tick, edit, remove and clear, and keep the Undo as a restore call. The title check in titleProblem is the only rule the block enforces.