Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Archive Task List Block for React

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.

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

Keep a list short without losing anything, with this archive to-do list block for React with Base UI. An add band with an Input and a Shine Button feeds the open list, where each task is a Checkbox and a finished one shows its own Archive button. The header's outline "Archive 3 done" button sweeps every finished task at once, and a one-line strip says "3 archived" with an Undo that puts them back at the same positions. The closing band is a disclosure, "Archive" with a Badge count, that lists the archived tasks with a Restore button on each and Restore all; a restored task returns to the top of the open list, unticked. Opening and closing it doesn't move anything above, and an Empty state shows when no task is open. Guides rule the bands. For task apps, projects and any list that outlives its tasks.

FAQ

What does Archive N done do?

It moves every ticked task out of the open list into the archive, in one step, and says how many in the strip below the list. The button stays focusable when nothing is ticked and answers "No tasks are done yet" instead of doing nothing.

What does Undo restore?

The tasks you just archived, exactly as they were: ticked, and at the positions they had. Restoring from the archive is a different action: those tasks return to the top, unticked, because they are being picked up again.

How does the archive section behave?

It is a disclosure button with aria-expanded and a count. Closed, its content is hidden and can't be tabbed into; open, it shows up to a few rows and scrolls inside itself. Restore buttons name the task they restore.

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

Both lists live in the page and reset on reload. Persist from sweep, undo, restoreOne and restoreAll; an archive is usually a flag on the task (archivedAt) rather than a second list.

How does it look on a phone?

The header button sits under the sentence, the Archive and Restore buttons show only their icons with names kept for screen readers, and the open list keeps its height so the archive band doesn't jump.

  • Pro

    Basic Task List

    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

    Minimal Task List

    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

    Search and Filter Task List

    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

    Compact Task List

    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

    Dark Minimal Task List

    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

    Drag to Sort Task List

    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.

All 7 todo list blocks