shadcn.io is not affiliated with official shadcn/ui
Image Messages Chat Block for React
A narrow thread of picture groups drawn as line scenes (one wide, two side by side, three tiled, four with a +N), captions, a lightbox with Previous, Next and arrow keys, and an Add picture button.
Installation
Overview
Show pictures in a conversation without a single photograph, with this image messages chat for React with Base UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Framebourne, a messenger for visual teams: Odalis Rennard shares a mood board for a shop window, and the log holds groups of drawn line scenes (a kettle, a hill, a bicycle, a plant, a clock) that fill the bubble for one picture, sit side by side for two, tile for three and show "+N" on the last tile past four, with a caption under a group. Pressing a group opens a Dialog lightbox with the large scene, "3 of 5" and Previous and Next buttons, and "Add picture" posts a new group. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
The scenes are SVG drawings in the file and the groups, captions and replies are typed. "Add picture" posts the next group from a short list, and nothing is uploaded or sent. To wire it for real, replace Scene with an image element on the group's file URL, keep the grid, and send the chosen files from addPicture.
How is a group laid out?
One picture fills the bubble width, two sit side by side, three put the first on top with two below, and four or more show four tiles, with the last one dimmed and marked "+N" for the pictures not shown. Tiles keep a 4 by 3 shape so the log does not jump when a group arrives.
How does the lightbox work?
The group is one button. It opens a real dialog with the large scene, its caption, "3 of 5" and Previous and Next buttons; the left and right arrow keys step through the group and wrap round. Escape or the close button shuts it and focus goes back to the group you opened.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.