Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Floating Widget Chat Block for Svelte

A chat launcher on a store page: a drawn shop with six products, a round launcher with an unread count and a teaser, and a chat panel that opens, closes on Escape and returns focus.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show the chat launcher where visitors meet it, on the page, with this floating widget chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height drawn as the store itself: a title bar for Brightcombe, a clothing shop, and a grid of six drawn products that are decoration only. At the bottom end a round Button opens a 22 rem chat panel with a header, three bubbles and the composer; it turns into "Close chat" and reports aria-expanded and aria-controls. The panel is open on load. Escape inside it closes it and returns focus to the launcher. Close it before writing and, two seconds later, a short line arrives: the launcher shows an unread count and a teaser bubble ("Need help choosing a size?"), and opening clears the count. Messages are Message and Bubble rows. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. Not a docs page with a minimise loop: the page is the stage.

FAQ

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

Everything. The shop, the replies and the proactive line are typed in the file, and nothing is sent. To wire it for real, mount the panel on your own pages, send messages where post is, and trigger the teaser from your own rule, such as time on a product page.

How does the launcher work?

It is a button with a name that changes between "Open chat" (with the unread count when there is one) and "Close chat", and it reports whether the panel is open and which element it controls. The count is a small badge hidden from assistive technology, because the name already says it.

What happens on Escape?

Escape anywhere inside the open panel closes it and puts focus back on the launcher, so a keyboard user returns to where they were. The closed panel is hidden and inert, but its messages and your draft are kept.

Why does a line arrive after I close it?

It shows the unread state in the demo: closing the panel before writing arms one timer, bounded to a single use, that adds an agent line, raises the count on the launcher and shows the teaser. Opening clears the count. Nothing loops.

Is it usable with a keyboard and a screen reader?

The drawn shop is hidden and cannot take focus, so Tab goes to the chat only. The panel is a named, non-modal dialog, its log is a focusable region announced as a log, and one status region says when the chat opens or closes.

How does it look on a phone?

The panel takes the width of the window with a margin, above the launcher, and never taller than the window. The products drop to two columns and the window keeps its height.

All 200 chat blocks