Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

WhatsApp Style Chat Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a family messenger, with this wallpaper style chat for React 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.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Receipts and states are a glyph and a word, never a color. Tab runs through the controls, the field and Send.

How does it look on a phone?

The same single column. The wallpaper select stays in the top bar, the bubbles take most of the width and the window keeps its height with only the log scrolling.