shadcn.io is not affiliated with official shadcn/ui
Sidebar Panel Chat Block for React Aria
A release checklist with its team chat docked at the end: six ticks counted as 4 of 6 done, an 18rem chat panel that folds to a 3rem rail with an unread count, and sample messages that arrive while it is folded.
Installation
Overview
Keep a conversation next to the work it is about, with this sidebar panel chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Releasebay, a release planner. The start side is a real page: "Release 3.4 checklist" with six rows, each a Checkbox, a title and a long detail line, and a count ("4 of 6 done") derived from the ticks; ticking posts nothing to the chat. The end side is an 18rem chat of compact Message and Bubble rows with small avatars and a one-row composer. A button in the page's top bar folds the chat to a 3rem rail with a chat glyph and an unread Badge: the page takes the freed width and its detail lines lengthen, nothing else moves. While the chat is folded, two sample messages arrive one after the other and raise the count; opening the rail clears it. On a phone two buttons at the foot choose the page or the chat. For planners, trackers and any page with a team behind it.
FAQ
What stays local, and how do I make it real?
The checklist, the chat and the sample replies are typed in this file, and nothing is sent. Persist the ticks in your backend in tick, send chat messages to your service in post, and replace the LATER messages with your socket's; the unread count is a number you set when a message arrives while the panel is folded.
What does folding do to the layout?
The chat's width changes from 18rem to 3rem and the page takes the difference; the window's height never changes and the rows keep their height, with only their detail line getting longer. The fold button has aria-expanded and aria-controls, and its name is "Hide chat" or "Show chat".
How does the unread count work?
Two sample messages arrive 2.5 seconds apart once the chat is folded (started by your press, and bounded to two), each raising the count on the rail and in the status line. Opening the panel from the rail or the top bar clears it and puts focus on the fold button.
Does ticking an item post to the chat?
No. The page and the chat are independent on purpose: the count above the list is computed from the ticks, and the chat only holds what was typed in it.