shadcn.io is not affiliated with official shadcn/ui
Availability Status Dialog Block for Solid
A team chat channel with its status dialog shown open: five presets told apart by shape and word, a custom message with a 60-character counter, a Clear after choice with a preview line, and a status mark that follows the avatar.
Installation
Overview
Tell people whether to wait for you, with this status dialog for Solid with Ark UI. It opens from the Launch week channel on Huddlebook, a team chat: the header holds an outline Button showing your current status as a shape and a word, and the chat, a rail of channels with your avatar and name at its foot and a thread beside it, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog offers five presets as rows: Available, In a meeting, Focusing, Away and Offline, each with its own shape (a filled dot, a camera, a focus frame, a clock, a dashed ring) and a check on the chosen one, so no meaning rests on colour. Below, a message Input stops at 60 characters and counts what is left, and a Select sets when the status clears: 30 minutes, 1 hour, 4 hours, Today or Don't clear. A line under it reads the result against the demo's fixed clock, "Away until 10:00". Save status, the only Shine Button, puts the shape on your avatar and the word and message beside your name; Clear status goes back to Available. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The status button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same StatusFields component and share the block's state, so a preset chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Where does the time in the preview line come from?
From NOW_MINUTES, a fixed 09:00 on Friday 9 October 2026, so the line reads the same for everyone and on the server: 1 hour from 09:00 is "Away until 10:00". Today ends at midnight and any choice that would pass midnight says so. While you are Available there is nothing to clear, so the Select is disabled and the line says that. In your app use the user's clock and time zone and let the server do the clearing.
Why are the presets told apart by shape and not by colour?
Colour alone fails for people who can't tell the hues apart and disappears in a single-colour theme. Each preset has its own glyph and its own word, and the chosen row also gets a check and a border. The status mark on the drawn avatar uses the same glyph. To add a preset, add it to PRESETS and give it a glyph in PresetGlyph.
What does Save status do, and what stays local?
Here it keeps the preset, message and clear time in this page's state, updates the header button and the drawn avatar and name chip, and says in a polite status message that no one was told. Clear status puts you back to Available with no message. In your app send the status from save, let the server clear it at the time it computes, and broadcast the change to the people who can see you.
How does the message field behave?
It stops at 60 characters and counts down in a line under the field, "42 remaining". The message is optional: with none, the drawn chip shows the preset's word alone. Opening the dialog again starts from what you saved, and closing without saving discards the changes.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts in the message field and stays inside until it closes, and Escape, Cancel and the close button all return focus to the status button. The trigger is the the status button button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the status button. The presets are native radio buttons in a group named Status: arrow keys move between them and choose.