shadcn.io is not affiliated with official shadcn/ui
Minimal Task List Block for React
A quiet task list with no row borders or counters: ticked tasks fold into a closed Done section, rows can be renamed in place, and one field at the foot adds a task.
Installation
Overview
Keep a list out of the way, with this minimal to-do list block for React with Base UI. The frame is drawn with Guides corner marks and nothing else: no row rules, no badges, no header count, just whitespace between the tasks. Each open task is a Checkbox and a title, with Edit and Delete buttons that show on hover where the device has one, on keyboard focus, and always on touch screens. Edit swaps the title for an Input with Save and Cancel (Enter saves, Escape cancels). Tick a task and it folds away into a closed "Done (2)" section underneath, with a short height transition that is instant under reduced motion; open it, and unticking a task brings it back. A field at the foot adds a task with a round Shine Button, and an Empty state replaces the list when nothing is open. For notes apps, side panels and any place the list should stay calm.
FAQ
Where does a ticked task go?
Into the Done section, closed by default, which counts its tasks in its label. Open it with its button, then untick a task to move it back to the open list. The open list keeps a held minimum height, so ticking never pulls the field up the page.
Why aren't Edit and Delete always visible?
They fade in on hover, and they are always reachable by keyboard because the row shows them whenever focus is inside it. On touch screens, which can't hover, they stay visible. The buttons have names that include the task title.
How does editing work?
Edit replaces the title with a field holding it. Enter or Save keeps the new title, Escape or Cancel keeps the old one, and focus returns to that row's Edit button. An empty title is refused with a status message.
Related
- Pro
A plain task list with an add field, checkboxes that count what is done, delete and Clear done, and a one-line Undo that puts removed tasks back where they were.
- Pro
A late-night task list that draws each check and runs a line through a finished title, with a soft glow on the row you are on and a rolling count of what is left.
- Pro
Eighteen tasks on shared hairlines in two columns, with a Compact and Comfortable row switch that never moves the page, and an Add task button that opens a row in the first cell.
- Pro
A task list where finished tasks carry an Archive button, one header action archives them all with an Undo, and a closing Archive section restores tasks one at a time or all at once.
- Pro
A priority backlog you reorder by dragging a grip or pressing Move up and Move down, with a live numbered Order list beside it and the new position announced after every move.
- Pro
A task finder with a search field that marks matching words, All, Open and Done tabs with live counts, a foot that says what is showing, and an empty state with a way back.