shadcn.io is not affiliated with official shadcn/ui
Dark Minimal Task List Block for React
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.
Installation
Overview
Make finishing a task feel like something, with this minimal to-do list block for React with Base UI. A capture band holds an Input and a Shine Button that adds a task to the end of "Tonight"; below it, each row is a Checkbox and a title. Ticking draws the check stroke by stroke, a line then runs through the title from its start edge and the text settles to the muted tone; the row you are on takes a soft ring of focus, and the "left" count rolls with a Sliding Number. All of it is CSS and instant under reduced motion. The block follows the page theme, light or dark: the original was a fixed dark card, and only its URL is kept. Bands are ruled by Guides. For wind-down lists, habit apps and any list that should feel good to finish.
FAQ
Why is a block called dark minimal not dark?
It follows the theme of the page it sits on, so it reads as a dark card in a dark theme and a light one in a light theme. Its look comes from structure and motion, not a forced dark surface.
How is the check drawn?
The checkbox's check icon has its stroke dashed and offset, and a CSS transition on the offset draws it when the box is ticked. The line through the title is a pseudo-element scaled from zero to full width with its origin at the start edge, which flips automatically in right-to-left layouts.
What if the visitor prefers reduced motion?
The transitions are switched off, so the check, the line and the count change instantly. The finished state looks the same.
Related
- 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 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
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.