shadcn.io is not affiliated with official shadcn/ui
Kanban Task Chat Block for React Aria
A sprint-planning thread with task cards that have an assignee, a priority and a status select, system lines when a status moves, All, Mine and Open filters, and an Add task form.
Installation
Overview
Show tasks living inside a conversation, with this kanban task chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Sprintholm, a sprint-planning app: the log holds three task cards, one in To do, one in Doing and one in Review, each with the title, the assignee's initials, the priority as a word with an arrow and a status Native Select. Changing the status updates the card in place and posts a system line such as "You moved Fix signup copy to Review". A Toggle Group above the log filters the cards to All, Mine or Open and counts them, and "Add task" opens a Popover form that posts a card. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
The people, the tasks and the replies are typed in the file. Moves and new tasks live in the page's state only and nothing is sent. To wire it for real, call your tracker in move and addTask, load the tasks from it, and keep the system line as the thread's record of the change.
What do the filters do?
All shows every card, Mine only the ones assigned to you and Open the ones not yet Done. The strip says how many of the cards show. Cards that do not match are hidden from the log, which keeps its height and scrolls, and messages and system lines stay.
What happens when I change a status?
The select changes the card at once, the badge under it follows, the log gains a system line naming the move, and the status line announces it. A card moved to Done drops out of the Open filter.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.