shadcn.io is not affiliated with official shadcn/ui
Collaborative Task List Block for React
A shared task list showing who is here and who is viewing each task, where pressing Edit claims a task and a task someone else holds says why it can't be edited.
Installation
Overview
Show who is working where, with this collaborative to-do list block for React with Base UI. A band at the top stacks initials in an Avatar Group and says "4 people here". Each task lists who is viewing it, and when someone is editing it shows a ringed avatar and the words "Dara is editing". Pressing Edit on an open task claims it: the row says "You're editing", the title becomes an Input with Done and Cancel, and a task someone else holds has an Edit button that stays focusable, is marked aria-disabled and gives the reason to screen readers. A "Last edited by Imani Okello at 09:12" line follows each task. A demo Switch makes Dara take or drop the first task, so both states can be seen without a second visitor. The list sits in a fixed-height scroll region and Guides rule the bands. For shared task pages, team workspaces and any list more than one person opens at a time.
FAQ
What does Edit actually claim?
It marks the task as held by you, so the row shows "You're editing" and others would see your ringed avatar. You can hold one task at a time: pressing Edit on a second one says to finish the first. Done saves the new title and stamps the task as last edited by you; Cancel releases it without a change.
Why is Edit still focusable when someone else is editing?
A disabled button drops out of the tab order and says nothing. Here it keeps focus, is marked aria-disabled, points to a sentence saying who holds the task, and answers when pressed ("Dara is editing 'Draft the launch brief'").
Is the presence real?
No. Who is here, who views which task and who edits are typed in PEOPLE and START; the Switch is a demo control. In a real app, subscribe to a realtime channel (a WebSocket or a presence service), write a claim when Edit is pressed and release it on Done, Cancel, a timeout or a closed tab.