shadcn.io is not affiliated with official shadcn/ui
WhatsApp Style Chat Block for Solid
A family thread over a chat wallpaper you choose (Plain, Dots, Grid or Lines), with the time and a quiet word inside each bubble's bottom end and a centred Today chip.
Installation
Overview
Show a family messenger, with this wallpaper style chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Wallflower, a family messenger. The log sits on a wallpaper drawn from the theme's border color, a pattern and never a fill, and a select in the top bar restyles it live between Plain, Dots, Grid and Lines; it starts on Grid. Hers are outlined on a card surface so the pattern never runs under a word, yours soft, and each Bubble keeps its time and one quiet word ("Sent" or "Seen") inside its bottom end, so a short message stays short. A centred "Today" chip opens the day. The composer's Shine Button is the only colored control, and a Typing Indicator Text shows before a typed reply. The frame is ruled by Guides, and everything moves with CSS only. For a family or friends app that wants a personal touch.
FAQ
How is the wallpaper drawn, and is the choice saved?
Each wallpaper is a CSS background image built from the border color variable: radial dots, crossed hairlines or diagonal lines, with no gradient fill. The choice is local state and the status line says it stays in this tab; to keep it, store the value with the user's settings.
How does the time sit inside the bubble?
It is a floated span at the bubble's bottom end, so short messages stay short and long ones wrap around it. Yours say "Sent" until a reply follows, then "Seen"; both are derived words, not ticks or colors.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Each reply is keyed on a word in your message, such as Sunday or pumpkin. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.