shadcn.io is not affiliated with official shadcn/ui
Chat Floating Widget AI Block for Radix UI
A help widget open in the corner of a drawn docs page, with a typed thread and chips, that minimises to a round launcher with a count of new replies and opens again, with Escape to minimise and Close to clear.
Installation
Overview
Put a help chat on your own site, with this floating chat widget for React with Radix UI. A compact header names Cornerlark, a docs help widget, and a hairline frame with a plus mark on each corner holds a stage: a drawn greyscale docs page of bars and a code box, which does nothing, and at its end bottom corner the widget, open on load. The widget has a header with Minimise and Close buttons, a log with a typed greeting and a short thread, three chips (two questions and "Talk to a person") and a composer. Replies come from a typed script after a Typing Indicator Text; "Talk to a person" answers that no one is connected in this demo. Minimise folds the widget to a round launcher that shows how many replies arrived meanwhile; pressing it opens the widget again with focus in the field, and Escape inside the widget minimises it with focus on the launcher. The Shine Button, the only colored control, sends. It's built from Message, Bubble, Textarea, Button and Guides, with CSS only.
FAQ
What stays local, and how do I make it real?
Everything. Three typed replies answer on a word (install, plans, a person) and one fallback covers the rest. Nothing is sent and no model runs, as the line at the foot says. To make it real, mount the widget in your site's layout, send each message in post to your help desk or model, and for "Talk to a person" open your live chat or contact form instead of the typed line.
What do Minimise and Close do?
Minimise hides the widget and shows the round launcher, and keeps the thread, so opening it again shows the same conversation. Close ends the chat: it clears the thread and the draft and leaves the launcher, so the next opening starts fresh. Both say what they did in the polite status line and put focus on the launcher.
What is the number on the launcher?
The replies that arrived while the widget was minimised. Send a message, minimise before the reply lands, and the launcher shows 1 and its name says "Open chat, 1 new reply". Opening the widget clears it.
How does Escape work?
While focus is inside the widget, Escape minimises it and moves focus to the launcher. The listener only acts when the widget holds focus, so it never closes anything else on a page that has other overlays.
Is it usable with a keyboard and a screen reader?
The drawn page is inert and hidden from assistive technology, so Tab goes from the page's real controls to the widget in order. The log is a focusable region announced as a log, the chips are a labelled group of buttons, the buttons have names, and one polite line reports what changed.