Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Timeline Task List Block for React

Ten tasks in due-date order down one hairline spine, with gap labels, a Today marker where the fixed day falls, Overdue words above it, and a Hide done switch that does not shift rows.

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

Show how close each deadline is, with this timeline to-do list for React with Base UI. Tasks run in due-date order down a single hairline spine, and each task's Checkbox is its node on that line. Between nodes a quiet label says how far apart they are ("3 days later"), a "Today, Wed 14 Oct" marker sits where the fixed day falls, and the open tasks above it say "Overdue" in a heavier weight. Ticking a task never moves its node. A Switch called Hide done folds away the tasks that are done at that moment; a task you tick afterwards stays until you flip the switch off and on again, so nothing slides under the pointer. The list sits in a held-height scroll region with an Empty state for when everything is done and hidden. The text sits beside the spine in one column, never alternating sides. The frame is ruled by Guides, and the only motion is a CSS entrance. For deadline paths, project plans and any list where the gaps between dates matter.

FAQ

How do I load my own tasks?

Replace START with your tasks (an id, title, due ISO date and done flag). The order, the gap labels, the Today marker and the Overdue words are worked out from the dates and the fixed AS_OF day, so point AS_OF at the current date when you use real data.

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

Everything. Ticking and hiding change state on the page and nothing is sent, so the line resets on reload. In your app write the done flag from toggle to your own store.

Why does a task I tick stay visible while Hide done is on?

Hide done takes a snapshot of the tasks that are done when you switch it on. Hiding the one you just ticked would move every node below it while you are still pointing at the list, so it stays until you switch Hide done off and on again.

Where does the Today marker go if nothing is due today?

Between the last task before the fixed day and the first one after it. If every remaining task is in the past, or all later tasks are hidden, it sits at the end of the line.

Is it accessible?

The tasks are an ordered list in a labelled scroll region, each checkbox is named by its title, the gap labels and the Today marker are read as list items, and a polite status message announces each tick and the switch. Overdue is a word, not just a color.

How does it look on a phone?

The spine, checkboxes and text keep one column; titles truncate on one line and the date and Overdue word sit under them, and the Hide done switch drops under the sentence.

All 100 todo list blocks