shadcn.io is not affiliated with official shadcn/ui
Status Task List Block for React Aria
A task list whose checkbox is a status button with five fixed states, To do, In progress, Done, Paused and Cancelled, each a glyph and a word, with a picker per row and a status filter with counts.
Installation
Overview
Track more than done and not done, with this status task list block for React with React Aria. In place of a checkbox every row has a status button showing a glyph and a word, and the five states are fixed: To do, In progress, Done, Paused and Cancelled. Pressing the button opens a small Popover of the five, so a status never changes by a stray click or an unseen cycle. Statuses are drawn with icons rather than emoji, which look different on every system, and each is always paired with its word. A row of filter pills with counts narrows the list to one status and scrolls sideways on a phone; the foot counts how many tasks are still open (To do or In progress). The Shine Button adds a task at the top as To do, and an Empty state fills a status with nothing in it. Guides rule the bands. For project boards, content calendars and any list with more states than a tick.
FAQ
Can I change the set of statuses?
Edit the STATUSES and FILTERS arrays and the StatusGlyph component. Keep each status to a distinct glyph and a word, since the word is what makes it readable to everyone.
Why not real emoji?
Emoji render differently on every operating system and can't take the theme's colours. Icons draw the same everywhere, follow the text colour, and are hidden from assistive technology because the status word is always beside them.
How are Done and Cancelled shown?
Both titles are muted and struck through, and the status word says which it is. Paused tasks stay in full weight because they will come back.