shadcn.io is not affiliated with official shadcn/ui
Dark Theme Chat Block for React Aria
A late-night thread drawn in the theme's dark tokens with all five message kinds side by side (theirs, yours, system, code and a failed message with Retry), and a Night mode switch that turns the window's dark scope on and off.
Installation
Overview
Check how a chat reads at night, with this dark theme chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Gloamwick, a messenger for night owls, drawn with the theme's own dark tokens inside a nested scope, so it shows the five kinds of line a night reader checks together: their Message in an outlined Bubble, yours in a quiet one, a centred system line, a code line in monospace, and a message that was not sent, in the destructive bubble with the words "Not sent." and a Retry button. A Night mode Switch in the top bar turns the window's dark scope on and off, and only the window changes: the page keeps its own theme. Retry sends the message and starts a typing line; the composer's Shine Button, the only colored control, sends what you type. It's built from Message, Bubble, Switch, Shine Button and Guides, with a CSS entrance only. For chat apps with a night mode, theme previews and any thread where a failed send needs a way back.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script, Retry only marks the message as sent and starts the next reply, and nothing leaves the page. To wire it for real, call your send function where the code says so, set a message's failed flag when it rejects, and clear it in Retry when the request succeeds.
How does the dark window work without hard-coded colours?
The window carries the theme's dark class, which swaps the theme's variables for their dark values, so every surface, border and text colour in it comes from the same tokens your page uses. There is no colour in this file. With Night mode off the class is removed and the window follows the page, so on a dark page the two states look the same.
How is a failed message shown?
In words and a glyph, not only colour: the bubble uses the destructive variant, the line under it says "Not sent." with a warning icon, and Retry is an outline button. There is no time or receipt on a failed message until it goes through, then it shows "Sent" and, after the reply, "Delivered".
How are code lines handled?
A code line is a message whose text is shown in a monospace block with left-to-right direction and wrapping, so long lines never scroll sideways inside the log. Mark a message as code in your data and it is drawn the same way.
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 "Dagny Solberg, 23:14". The Night mode switch has a visible label, the status line announces both states, and Retry is an ordinary button in the tab order. Contrast holds in both states because both use the theme's own token pairs.