shadcn.io is not affiliated with official shadcn/ui
Code Blocks Chat Block for Radix UI
A pair-programming thread where messages carry fenced code as cards with line numbers, a Copy button, a Wrap lines toggle and a fold past ten lines, and where your own fenced blocks render the same way.
Installation
Overview
Show code travelling inside a conversation, with this code blocks chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Snipdale, a pair-programming chat, with a thread between you and Liesel Varnholt: Message and Bubble rows, and under a message with a fenced block a code card with the file name and language, numbered lines in the theme's colors, a real Copy Button, a Wrap lines toggle and a Collapsible fold that holds everything past the tenth line ("Show 14 more lines"). Write three backticks, a language and a file name, then your code, and your own message draws the same card; ask for "python" and she answers with the helper in Python behind a Typing Indicator Text. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a pairing tool, a code help desk or any chat where snippets matter.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: one keyed on "python" that returns a fenced block, one for any message that holds code, a few more, then a last line that says it was the last sample reply. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send post's text to your chat service where the code says so, append the messages you receive to the same list and keep the fences as the format on the wire: the cards are drawn from the text, so a stored message redraws the same.
How are the code cards made?
Each message is cut at its lines of three backticks by one pure function, partsOf, into prose and code in order. The words after the opening fence are the language and the file name (ts retry.ts), the code between the fences is numbered line by line and colored by a small tokenizer for TypeScript and Python that uses the theme's own colors, and an unclosed fence at the end of a message still draws as code. Prose parts stay ordinary bubbles.
Does Copy really copy?
Yes. The button writes the card's code, without the line numbers, to the clipboard and the line under the composer says "Copied the code." If the browser refuses (no permission, or a page not served over HTTPS) it says so and the code stays selectable. Wrap lines is a toggle on the card: off, long lines scroll sideways in a region you can reach with the keyboard; on, they wrap.
What does the fold do?
A card shows ten lines. Past that, a button under the code says how many more there are and opens them in place; the rest of the lines are inert and hidden from assistive technology until it opens, so the keyboard never lands on a line you cannot see. Press it again to fold the card back. Change FOLD to show more or fewer lines first.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden "Liesel Varnholt, 10:03" or "You, 10:06". A code card is a labelled region you can scroll with the arrow keys; line numbers are hidden from assistive technology so the code reads as written, and code is always left to right, also in right-to-left pages. Tab runs through each card's Wrap lines, Copy and fold, then the field and Send.
How does it look on a phone?
The same single column: the project badge drops out of the top bar below the small breakpoint, the language badge drops out of each card, and code scrolls sideways inside its card rather than widening the page. The window keeps its height and only the log scrolls, even at 320 px wide.