shadcn.io is not affiliated with official shadcn/ui
Intercom Style Chat Block for Radix UI
A support widget with a home screen and a conversation: a greeting, a Send us a message button, the last conversation with an unread dot, three article rows, and a Back button.
Installation
Overview
Show a support widget the way visitors expect one, with this intercom style chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Helmsdale, a small-business tool, drawn as the widget itself. The home screen has a branded top bar ("Helmsdale help", "We usually reply in a few minutes"), a greeting, a "Send us a message" Button, the last conversation as a row with its latest line and an unread dot, and three help-article rows with an arrow. The conversation screen swaps a Back button into the top bar and shows grouped Message and Bubble rows, a Typing Indicator Text and the composer. The button and the row open the conversation, where focus lands in the composer and the unread dot clears; Back returns to the greeting. 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. The style only: the name, mark and colors are the shop's own.
FAQ
What stays in the page, and how do I make it real?
Everything. The conversation, the article titles and the replies are typed in the file, and the article rows only say that article pages are not included. To wire it for real, load the visitor's conversations from your help desk, link the article rows to your help center, and send messages where post is.
How do the two screens work?
One piece of state decides which is shown; the other stays in the page but is hidden and inert, so its scroll and draft are kept. Opening the conversation moves focus to the composer, and Back moves it to the home greeting, so a keyboard user never lands in nowhere.
What does the unread dot do?
It shows that the last line came from the agent and has not been read; opening the conversation clears it, and its row says "1 unread message" in words. It is a filled dot with a hidden label, never a color alone.
What do the article rows do?
In this demo they only say that article pages are not included, in the status line. In your app make them links to your help center, or open the article inside the widget with the same Back button.