shadcn.io is not affiliated with official shadcn/ui
Command Palette Chat Block for React
A team channel whose composer opens a grouped list of slash commands that change the conversation: set the topic, mute, clear with a restore button, add a shrug, or send a spoiler.
Installation
Overview
Run commands from the message field with this command palette chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Slashbarrow, a chat app for small teams, drawn with "/p" typed and the command list docked above the composer: two matches, one in each group (Conversation and Text), each with an icon, an argument hint and a Kbd. The commands change the chat instead of answering a question. "/topic" sets the line under the channel name, "/mute" shows a bell-off glyph and says for how long, "/clear" empties the log into an Empty state with a Restore button, "/shrug" adds its text to your draft, and "/spoiler" sends a message hidden behind "Spoiler. Show". The arrow keys move, Enter or Tab completes a command into a chip with its hint, and typing filters by substring. The send Shine Button is the only colored control, and the frame is ruled by Guides. For a team chat, a community server or any composer with slash commands. The full-screen command menu is a separate block.
FAQ
When does the list open?
When the draft starts with a slash and has no space yet. Typing narrows it by substring, with commands that start with the text first, and an empty result names what you typed. The list closes when you finish a command's name, when you press Escape, or when the text is no longer a bare command word.
What does each command do?
"/topic text" changes the status line under the channel name and adds a system line to the log. "/mute 1h", "/mute 8h" or "/mute off" shows or clears a bell-off glyph with the duration. "/clear" empties the log and offers Restore. "/shrug text" puts your text and a shrug back in the field without sending. "/spoiler text" sends the text hidden, and its Show button reveals or hides it. An unknown command is named in the status line and nothing is sent.
Which keys work in the list?
The up and down arrow keys move the active command, Enter or Tab completes it into the field, and Escape closes the list. A completed command shows as a chip above the field with what it takes next. The field keeps focus the whole time, so nothing moves while you type.
What stays in the page, and how do I make it real?
Everything. Muting silences nothing and the topic is not saved anywhere; each command only changes this block's state, and the status line says so. In your app, run each command on your server in the handler for its id and return the new channel state.