shadcn.io is not affiliated with official shadcn/ui
Pinned Messages Chat Block for React Aria
A project room with a collapsible pinned bar that reads Pinned 2 of 3, jumps to and rings the pinned message, and a More menu on every message to pin or unpin up to three.
Installation
Overview
Keep the few messages everyone needs at the top of a room with this pinned messages chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for the Harbour project room of Corkboard, a project chat. Under the top bar a Collapsible bar reads "Pinned 2 of 3" with the newest pin in one line and opens, as it is at load, to the list of pins; pressing a pinned line scrolls the log to that message, rings it and moves focus to it. Every message has a More Dropdown Menu with Pin or Unpin, and a pinned message wears a pin and "Pinned by Roswitha". The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The thread and the two starting pins are typed, replies to what you send come from a short script, and pinning changes only this page. The pins belong to the room, not to you, so a real version stores them with the room: send togglePin to your API and render pins from what comes back.
What happens at three pins?
The Pin item on an unpinned message stays in the menu but says "3 of 3 used", is marked aria-disabled, and pressing it only writes "Unpin one to pin another." in the status line. Unpinning any message frees a place. The limit is the LIMIT constant.
How does the jump work?
It scrolls the log, never the page, so the message sits about a third from the top, rings it for a moment and focuses it (the row can take focus but is not a tab stop). With reduced motion the ring stays until the next jump. The bar stays as it was, open or closed.
Where is the More menu on a computer and on a phone?
Under each message, next to the time. On a computer it appears when you hover the message or move focus into it; on a touch screen it is always visible. It is always in the tab order, so a keyboard user reaches it by Tab and it shows on focus. Closing the menu or choosing an item puts focus back on its button.