shadcn.io is not affiliated with official shadcn/ui
Quick Chat Command Menu Block for React
A team chat's command menu shown open as a dock at the bottom end of a channel: search people and channels with unread counts, see the highlighted one's last three messages, and reply from a field under the list.
Installation
Overview
Answer a message without leaving the page with this quick chat command menu for React with Base UI. It opens from a channel in Murmurfield, team messaging, whose header holds an outline field with its ⌘ K cap, and the channel is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, the menu docked at its bottom end. The menu is the catalog Command over the conversations, people first and then channels, each with an initials avatar and its unread count. The highlighted conversation shows its last three messages in a strip under the list (two on a phone) and a reply field under the strip: Enter in the list opens the conversation, marks it read and moves focus to the reply field, and Enter there appends the reply to the strip. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same conversations, replies and query. For team chat, support desks and any app where a short answer should not cost a page load.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the channel, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a reply sent in the copy is in the strip in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the strip follow the list?
It shows the conversation of the highlighted row, or the first row while nothing is highlighted, so it is never empty. The strip has a fixed height and shows the last three messages at the bottom, so moving the highlight changes the words and never the size. On a phone it keeps two. If the search matches nothing the strip says there is no conversation and the reply field is disabled.
What do Enter in the list and in the field do?
Enter on a conversation opens it: its unread count goes to zero, the total in the foot and in the drawn channel's side list drops by that much, and focus moves to the reply field, named for that conversation. Enter in the field appends your reply, marked "You" and "now", to the strip and clears the field; an empty reply says to write one first. Replies are capped at 200 characters.
How are unread counts shown?
In words, "5 new", beside the name, with a hidden ", unread" for screen readers, and never as a colour. The foot shows the total unread while nothing is typed and the matches while you type. Avatars are initials hidden from assistive technology, so an option reads as the name.
What stays local, and how do I wire it?
All of it. The conversations, their messages and the unread counts are typed data and state in the block, and nothing is sent. In your app load START from your messaging API, send the reply from send, and clear unread from the server's read receipt.
Is it accessible from the keyboard?
Yes. Type to narrow the conversations, the arrow keys move through them, Enter opens one, Tab reaches the reply field and Send, and Escape closes the menu with focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.
Related
- Pro
Emoji Picker Command Menu
Visual pickersA team chat's emoji menu shown open over its composer: names and shortcodes, a skin-tone switch for hands and people, and Enter adds an emoji to the message under the list while the menu stays open.
- Pro
A webmail app's command menu shown open over the Inbox: start a new email, reply or forward the open message in a To, Subject and message form inside the menu, or jump to a folder, and Ctrl or Command Enter sends into the Sent count.
- Pro
A social scheduler's command menu shown open as a composer beside its queue: pick networks, write once, watch a character counter per network, and schedule into the week's next free slot.
- 92Pro
View As Command Menu
SwitchersA support console's view-as switcher as a command menu shown open under the avatar: You and Teammates with initials, role and queue size, a read-only banner with an Exit button, and a ticket list that shows only that person's queue.
- 1234Pro
Account Switcher Command Menu
SwitchersAn agency billing portal's account switcher as a command menu shown open under the account chip: four accounts with initials, role and plan, a tick on the current one, the keys 1 to 4 to switch straight to an account, and the chip and status line that follow the choice.
- Pro
Actions Command Menu
Actions and keysA signing tool's document with its actions menu shown open: nine actions in four groups, a key on the five that change the document that runs them while the menu is open, and a drawn lease whose badge and signature follow.