shadcn.io is not affiliated with official shadcn/ui
User Presence Chat Block for Solid
A people roster with presence rings that always carry a word, a local time and a status line, a select to set your own status, and a direct message that says what the other person will see.
Installation
Overview
Show who is around before you write, with this user presence chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Statusroom, a team presence app: at the start a People roster of seven members, each with a presence drawn as a ring shape and always written (Available a solid dot, In a meeting half filled, On PTO dashed, Away an open ring), a custom status line such as "Heads down until 15:00" and their local time worked out from a typed UTC offset. At the top, "Set your status" is a Native Select that updates your own row (it opens on In a meeting), and a Toggle Group limits the list to people who are Available. Choosing a member opens a direct message in Message and Bubble rows, and the line above the field says what they will see: "Kai is in a meeting. They'll see this later". Write to someone in a meeting or away and, after a short wait, their row changes to Available and they answer. The composer's Shine Button is the only colored control. On a phone the roster comes first and the message opens with Back. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a team directory, a status picker or any list where presence changes what you do.
FAQ
How is presence shown without colour?
Two ways, both always present: a ring shape (solid, half filled, dashed or open, all in the foreground colour) and the word beside it. The shape is decorative and the word is what assistive technology reads, so presence never depends on a hue and reads the same in either theme.
Where do the local times come from?
Each member has a typed offset from UTC in minutes, and the page applies it to one fixed moment (13:30 UTC on 12 October) with plain arithmetic, so the times are the same on every machine and never read the clock. In your app, compute them from each member's time zone.
Why does someone come back after I write to them?
It is the demo's scripted change. A member who is in a meeting or away returns after about two seconds, their row and top bar become Available with "Back at my desk", and they send their typed return line. A member on PTO stays away and the status line says they will see it when back. In your app the change would arrive from your presence service.
What stays in the page?
Everything: your status, the filter, the messages and the replies live in component state, and nothing is sent. To wire it for real, publish your status to your server where pickStatus runs and render the roster from your presence feed.
Is it usable with a keyboard and a screen reader?
Each row is a button whose name reads the person, their local time, presence word and status line, the chosen row is marked aria-current, the log is a focusable region announced as a log, and one status line under the window announces your status and every change. Choosing a person moves focus to the message heading.