shadcn.io is not affiliated with official shadcn/ui
Rich Text Input Chat Block for React Aria
A team chat composer with an Aa toggle that opens a formatting row for bold, italic, strikethrough, code and link, Ctrl or Cmd B and I shortcuts, and a live preview line drawn by the same small parser that shows sent messages.
Installation
Overview
Format the line and see it before you send with this rich text input chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Boldface, a team chat: the top bar names Hanne, and the log is a day label and a run of Message and Bubble rows whose text carries its formatting. An "Aa" Toggle opens a formatting row above the field with Bold, Italic, Strikethrough, Code and Link buttons and a small address field: each wraps the selected text in markers, or takes them off when they are already there, and Ctrl or Cmd with B and I do the same for bold and italic. A preview line under the field draws the draft through the same small typed parser as the log, so what you see is what is sent, and the composer opens on "Shipping Friday, see v2.4". The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. It's for a team chat, a support inbox or any composer where people need bold and code without a full editor.
FAQ
What stays in the page, and how do I make it real?
Everything. The formatting is plain text with markers and a small parser in this file turns it into elements; nothing is sent, and the sample replies come from a short script, as the line under the composer says. To wire it for real, send the marked-up text to your server where post says so and render stored messages through the same renderRich function, or swap in your own parser and keep the toolbar.
Which markers does it use?
Two asterisks for bold, an underscore for italic, two tildes for strikethrough, backticks for code, and square brackets with a parenthesised address for a link. The buttons wrap the selection or, with nothing selected, put the markers around the caret. Pressing a button again on already-wrapped text takes the markers off.
Is the rendering safe?
Yes. The parser cuts the text into pieces and renders each as an element, so nothing from the field is ever injected as HTML. A link needs an http or https address, opens in a new tab with rel="noopener noreferrer", and a link whose address fails the check stays plain text. The Link button refuses a bad address and says so in the status line.
Which keys work in the field?
Enter sends, Shift and Enter add a line, and Ctrl (Cmd on a Mac) with B or I formats the selection. The shortcut hint under the field reads Cmd after the page loads on an Apple device. During text composition (an IME) Enter is not taken.
Is it usable with a keyboard and a screen reader?
The formatting row is a labelled group of named buttons ("Bold", "Italic", "Link") and the Aa toggle exposes its pressed state. After a format the selection returns to the field. The log is a focusable region announced as a log, and the preview repeats what you typed in the field, so it adds nothing hidden for a screen reader.