Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Task Comments List Block for Ark UI

A team task list with a message count on each task; pick a task to read its thread of avatars, names and times and send a reply with Enter.

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

Talk about the work where it lives, with this to-do list with comment threads block for React with Ark UI. Tasks sit at the start of the frame, each a Checkbox with a message-count button; pressing the button picks the task and its thread appears at the end, with an initials Avatar, a name, a fixed time such as "Tue 13 Oct, 16:40" and the comment. A reply field under the thread sends on Enter, breaks the line on Shift+Enter and has the block's one Shine Button, "Reply"; the reply is added, the count goes up and the status line says it was added on this page and nothing was sent. A thread with no comments shows an Empty state in the same space. The split is ruled by Guides, and on a phone the thread drops under the tasks. For team boards, review queues and any list where a task needs a conversation.

FAQ

How do I load my own tasks and threads?

Replace START. A task has an id, a title, a done flag and a comments array; a comment has an id, an author, a body and an ISO local time in at. Initials and the "Tue 13 Oct, 16:40" text are worked out from those by initialsOf and stampOf.

What stays local, and how do I send replies for real?

Replies are added to the page's state only: nothing is posted, nobody is notified, and the threads return to the starting comments on reload. Replace the body of reply with a request to your API, add the saved comment to the task when it succeeds, and set REPLY_AT from the server's time.

What do Enter and Shift+Enter do?

Enter sends the reply and Shift+Enter starts a new line. An empty reply is refused with "Write a reply first." under the field and focus stays in it. The Reply button does the same as Enter, so touch users have a target.

Why are the times fixed text?

Comment times are stored as ISO strings and shown as a weekday, date and clock time, never as "2 hours ago", so the server and every visitor see the same words. Each is a time element with its machine value.

Is it accessible?

Each count button is named with the task and its comment count and reports whether it is the open thread. The thread is a named, scrollable region, the reply field has a label that includes the task, and one polite status message announces the thread you opened and each reply.

All 100 todo list blocks