Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Maintenance Task List Block for React

An upkeep ledger grouped by machine, where every job has an interval, a last-done date and a next-due date, a status in words, a Log as done button with Undo, and an Overdue or Due soon filter.

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

Know what is overdue before it breaks, with this maintenance to-do list block for React with Base UI. Twelve jobs are grouped by the machine they belong to in an Accordion where one machine is open at a time, and each job shows its interval ("Every 30 days"), the day it was last done and the day it is next due, worked out from the two against a fixed today. The status is a glyph and a word, never a colour: Overdue 3 days, Due in 2 days, On schedule. Log as done stamps today as the last-done date and moves the next-due date on by the interval, with a one-line Undo under the list. A Toggle Group filters the open machine's jobs to Overdue or Due soon, the sentence above counts what is overdue and due this week, and the open body keeps its height whichever filter is on. Guides rule the frame. For servers, vehicles, equipment, rentals and anything with an upkeep schedule.

FAQ

How are the statuses decided?

A job is overdue when its next-due date is before today, due soon when it falls within the next seven days (today included), and on schedule otherwise. The next-due date is the last-done date plus the interval, and nothing is typed in as a label.

What does Log as done change?

Only the last-done date, which becomes today. The interval stays, so the next-due date moves by itself. The button answers "already logged for today" instead of doing it twice, and the Undo under the list puts the earlier date back.

How does the accordion work for a keyboard?

Enter or Space opens a machine and closes the one that was open, and one is always open. Tab moves between the machines' buttons; this base does not add arrow-key movement between them.

Why doesn't the height change when I filter?

The open body reserves room for three jobs, the most any machine has, so a filter that leaves one job or none doesn't pull the rest of the frame up. A machine with nothing to show says so in a line.

What stays local, and how do I wire it for real?

The ledger and the dates live in the page and reset on reload. In an app, store a last-done date per job, write it from logDone and undo, and compute the rest on load. Editing an interval is left out on purpose: that is the Recurring block's job.

How does it look on a phone?

Each job stacks its title, its status and the Log as done button, and the machine names keep a short count of their jobs. Nothing scrolls sideways at 320 pixels.

All 100 todo list blocks