shadcn.io is not affiliated with official shadcn/ui
Compact Task List Block for React
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.
Installation
Overview
Fit a lot of work on one screen, with this compact to-do list block for React with Base UI. Eighteen tasks sit in two columns on shared hairlines (one column on a phone) inside a region of fixed height, each a Checkbox, a title and a due date from a fixed day. A Toggle Group switches the rows between Compact and Comfortable: compact shows every task, comfortable gives each more padding and larger text, so the region scrolls instead of growing and the page below never moves. The header's Shine Button opens an add row in the first cell with an Input; Enter adds a task at the top, Escape closes the row and focus goes back to the button. The frame and its bands are ruled by Guides, and the foot says what is showing. For dashboards, side panels and power users who read a list at a glance.
FAQ
What does the density switch change?
Row padding and text size, nothing else. The region keeps its height in both modes, so compact fills it with all eighteen tasks and comfortable scrolls inside it. The choice is local state; store it in your user settings to remember it.
How do the columns work?
The list is a grid of cells separated by one pixel of the border color, two columns from the medium breakpoint and one below it. When the count is odd, a blank cell finishes the last row so the hairlines stay whole.
How do I add a task?
Press Add task in the header. A row opens in the first cell; type and press Enter. An empty entry shows "Write a task first" and keeps the row open. Escape or Close dismisses it.
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 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.
- 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.
- 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 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
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.