shadcn.io is not affiliated with official shadcn/ui
Compact Task List Block for Radix UI
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 Radix 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.