shadcn.io is not affiliated with official shadcn/ui
Presence Status Indicators Sidebar Block for React Aria
A team presence app in a fixed-height window whose slim sidebar groups ten people into three collapsible teams with online, busy and offline glyphs, and a menu that sets your own status.
Installation
Overview
See who is around, in shape and in words, with this presence status indicators sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Roomlight, a team presence app. Ten people sit in three Collapsible groups, Design, Engineering and Support, each row an Avatar with a glyph on it: filled for online, half filled for busy, a ring for offline. The word is in every row's name and tooltip, so presence never rests on shape alone and never on color. A Dropdown Menu with three radio items, Online, Busy and Offline, sets your own status from the rail's footer, and your row and every online count follow. The page is the chosen person's team, with each member's role and presence in words. It's built from Sidebar, Collapsible, Dropdown Menu, Avatar, Button and Guides, with a CSS entrance only. For team directories, chat apps and any rail that shows who is available.
FAQ
How is presence shown without color?
By shape and by word. A filled circle is online, a circle with its left half filled is busy and an empty ring is offline. Beside the glyph, the page spells it out, and each rail row's accessible name ends in the word ("Imelda Quarrie, Online"), so someone who cannot tell the shapes apart still gets the state. The glyphs are drawn in the foreground color and follow the theme.
How does my own status work?
Open the menu in the rail's footer and choose Online, Busy or Offline. Your row in the Design group changes its glyph at once, the online counts on each group's label and on the page update, and the status line says what changed. On a phone, where the rail is a sheet, the same menu sits in the top bar instead, because a menu does not open reliably from inside a sheet.
How do the groups fold?
Each group's label is the trigger of a collapsible and shows how many of its people are online ("3/4"). Folding a group hides its rows; folded to icons, the rail shows every person whatever the groups say, so nobody disappears. The group record is one piece of state.
What stays in the page, and how do I connect it?
Everything. The ten people and their presence are typed at the top of the file, and only yours changes. In your app, feed each person's presence from your realtime service, and send your own choice to it from the menu's handler. The rows are links to # whose handler shows a person's team instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive.
What happens when the sidebar collapses?
The rail folds to its icons: one avatar with its glyph per person, and a tooltip with the name and presence. The footer shows your avatar and glyph and still opens the menu. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a person closes it and shows their team. The window keeps its height, and the status line at its foot says what changed.