shadcn.io is not affiliated with official shadcn/ui
Compact Dense Chat Block for Radix UI
An IRC-style channel with one monospace line per message, a prompt, a nick list at the end where pressing a nick addresses them, /me action lines, and a Chat or Nicks switch on a phone.
Installation
Overview
Show a channel the way a hackerspace reads it, with this compact dense chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Hollowbyte, a hackerspace's chat network: one line per message in a monospace face, "[09:41] <nick> text", with no avatars and no bubbles. Nicks are told apart by weight and a prefix, not color: an op is "@nick" in bold and you are underlined, and joins and the topic are italic system lines. At the end, a nick list shows who is online with the ops first; pressing a nick writes "nick: " at the start of the prompt and returns focus to it, and that nick answers from a short typed script. The prompt is a ">" and a single-line Input with the Shine Button, the only colored control, and "/me waves" makes an action line. Below the medium breakpoint a Toggle Group switches between Chat and Nicks. The frame is ruled by Guides, and everything moves with CSS only. For a developer community, a log viewer with a prompt or any dense channel.
FAQ
How does the nick list work?
It lists every nick in the channel with the ops first, a count in its heading and a button per nick other than you. Pressing one writes "nick: " at the start of the prompt (replacing an earlier address if the line began with one), keeps the rest of what you typed and puts focus back in the prompt. If you send a line that begins with a nick's name and a colon, that nick answers.
What does /me do?
A line that begins with "/me " is sent as an action: "/me waves" appears as "* orrin waves", in italics, like the join lines. Anything else is an ordinary message. The line under the prompt mentions it.
What stays in the page, and how do I make it real?
Everything. The answers come from a short typed script, picked by a word in your line, by the nick you address, or in turn, and the status line says "Sample replies" and which nick is typing. Nothing is sent and no model runs. To wire it for real, send the prompt's line to your IRC bridge where the code says so and append what arrives to the same list.
Why no colored nicks?
Color alone cannot carry who said what, so nicks differ by weight and prefix instead (bold with "@" for ops, underline for you), and the colors are your theme's: the log is plain text on the card, in light and dark. Each line also starts with a hidden "ria, 09:33" for a screen reader, since the symbols are not read well.