Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Recurring Task List Block for Ark UI

A routine list where each repeating task carries a rule and a Next date, ticking one rolls Next to the following date its rule allows, and a Repeats popover changes the rule on the spot.

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 routines moving without re-entering them, with this recurring to-do list block for React with Ark UI. Each repeating task has a Badge for its rule (Daily, Every weekday, Weekly on Thu, Monthly on the 1st) and a "Next" date worked out from it against a fixed today. Ticking the Checkbox records today's turn and rolls Next to the following date the rule allows, so the row stays on the list and says "Done today. Next: Fri 16 Oct"; unticking takes the turn back. A Repeats Popover on each row holds a Segment Group for the kind of rule and a Native Select for the day, and Next is worked out again as you change it. Two one-off tasks sit beneath as ordinary rows. Guides rule the bands. For household routines, chores and any list where finishing a task should schedule the next one.

FAQ

How is the next date worked out?

A small pure function looks for the first day after the later of the task's Next date and today that the rule allows: any day, Monday to Friday, a chosen weekday, or a chosen day of the month. Ticking an overdue task rolls it forward from today, so one missed turn doesn't leave it overdue for ever.

What does unticking do?

It gives the row back the Next date it had before the tick, as if the tick hadn't happened. The turn you recorded is dropped with it.

What can the Repeats popover change?

The kind of rule and, for weekly and monthly rules, the day. Months are limited to days that every month has, so "the 28th" is the last choice and no rule ever skips a short month. The popover shows the new Next date as you choose.

Does it read today's date from the clock?

No. Today is a fixed Wednesday 14 October in the data, so the dates and the words "Overdue 2 days" or "Tomorrow" read the same on every visit. In your app, pass the real date into the same functions.

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

The rules, the ticks and the dates live in the page and reset on reload. In an app, save the rule and the last completed date on the task, derive Next on the server or when you load, and write from toggle, setRule, setWeekday and setMonthday.

How does it look on a phone?

Each row keeps the checkbox, the title, and a second line with the rule and the Next date, with the Repeats button at the end. The popover is as wide as the screen allows and nothing scrolls sideways.

All 100 todo list blocks