Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Dark Minimal Task List Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make finishing a task feel like something, with this minimal to-do list block for React with React Aria. 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.

What stays local, and how do I save for real?

Adding, ticking and deleting change the page state only; a reload brings back the starting list. Save from add, toggle and remove. The "left" count is derived from the tasks, so it stays right.

Is a drawn check still accessible?

Yes. The checkbox keeps its role and state and is named by its title; the drawing is only the look. A polite status message says what you finished and how many are left, and the focus glow is an extra cue next to the browser's own focus ring.

All 100 todo list blocks