shadcn.io is not affiliated with official shadcn/ui
Disappearing Messages Chat Block for Radix UI
A narrow private messenger thread with a Switch for disappearing messages, a choice of 5, 10 or 30 seconds, a ring and countdown on each message you send, a Pause timers button, and a one-line replacement when a message disappears.
Installation
Overview
Show messages that disappear with this disappearing messages chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Wispford, a private messenger. A bar under the name holds a Switch "Disappearing messages", a Native Select of 5, 10 or 30 seconds (short for the demo) and a "Pause timers" button. With the switch on, each Message and Bubble you send carries a small ring and its seconds, counted down by one demo clock that starts on your send; when the time is up the message is replaced by "1 message disappeared" in the same place, so the log doesn't jump. Two earlier messages show a typed "Disappears 1 h after reading" with no ring, and the thread opens with one message mid-timer and the timers paused. The Shine Button sends, and Guides rule the frame. It's for a private messenger or any thread whose messages are not meant to stay.
FAQ
What stays in the page, and how do I make it real?
Everything. The countdown is one setInterval in this file that ticks once a second, at most 30 seconds per message, and the replies come from a short script; nothing is stored and nothing is deleted anywhere. To wire it for real, set an expiry on your server when a message is sent or read, delete it there, and have the client remove it when the server says so; the clock here is only the picture.
When does a timer start, and what does Pause do?
On your send, never at load. "Pause timers" stops the one clock for every message at once and the button becomes "Resume timers"; the thread opens paused so you can read it first. Turning the Switch off affects only new messages, and changing the seconds does the same, so a message keeps the time it was sent with.
What happens under reduced motion?
Nothing counts down. Each timed message says "Disappears after 10 s" with a "Delete now" button that replaces it at once, so the feature works without any ticking. The ring is not drawn.
What replaces a message that disappeared?
A short line, "1 message disappeared", with a timer glyph; messages that disappear next to each other join into one line ("2 messages disappeared"). The status line says how many have disappeared so far. The faded look of other designs is dropped because it fails contrast.
Is it usable with a keyboard and a screen reader?
The Switch and the select have names, the ring is hidden from assistive technology and each timed message says "Disappears in 7 seconds" in text. The ticking numbers are not read out every second; the disappearance is spoken once through the polite status line.