Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Anonymous Chat Block for Solid

A narrow chat with a stranger known only by an animal alias and glyph: Next person pairs you with the next of three typed strangers, shared interests are worked out, and End chat leaves an empty state with Find someone.

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

Pair people with someone new, with this anonymous chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Whisperdale, a talk-to-someone-new app: you are chatting with a stranger known only by an animal alias and a drawn animal glyph, with no name and no photo, and the log is flat, compact rows. A system line says what you share, worked out from your interests and theirs ("You both like hiking and jazz"). "Next person" in the top bar ends the chat with a "Lynx has gone" line, shows "Finding someone" for a moment and pairs you with the next of three typed strangers; "End chat" in the foot leaves for good and the log shows an Empty state, "Chat ended", with a "Find someone" button. The composer's Shine Button, the only colored control, sends what you type, and a typing line shows before a reply from the stranger's script. It's built from Button, Empty, Message, Shine Button and Guides, with a CSS entrance only. For random-chat apps, peer support rooms and any one-to-one conversation without profiles.

FAQ

What stays in the page, and how do I make it real?

Everything. The three strangers, their interests and their lines are typed in this file, the pairing wait is a short timer, and nothing is saved or sent. To wire it for real, ask your server for a match when "Next person" or "Find someone" is pressed, send and receive messages for that pairing, and keep nothing once it ends, as the copy promises.

How are shared interests worked out?

By one small function that compares your list (chess, hiking, jazz) with the stranger's three and writes the sentence: one shared word, two joined with "and", or "You share no interests yet" when none match. Lynx shares chess with you, Heron shares two and Marten none, so you can see all three cases by pressing "Next person".

What happens when I press Next person?

A line says the stranger has gone, the composer and both buttons pause, "Finding someone" shows with a turning glyph (still under reduced motion), and after under a second a new alias arrives with a fresh thread. Focus moves to the log while it waits and to the message field when the next person arrives.

What does End chat do?

It adds "You ended the chat", disables the field, and the log shows the empty state "Chat ended" with a "Find someone" button, which starts a new pairing. Nothing from the chat is kept.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log. Every line starts with a hidden "You:" or the alias, the animal glyphs are hidden from assistive technology because the alias is always in text, and one polite status line announces pairing, sending and ending.

How does it look on a phone?

The same single column: "Next person" stays in the top bar, "End chat" in the foot, and the window keeps its height while only the log scrolls, down to 320 px.