shadcn.io is not affiliated with official shadcn/ui
Light Chat Message Bubble CTA Block for React Aria
A reverse split CTA for a support assistant between solid rails: an ask-me chat window in a hairline frame at the start (pick a question, watch the assistant type, read its answer) and the headline, a sentence and the Shine Button at the end.
Installation
Overview
A closing section that lets the visitor try the product's voice before signing up, for React with React Aria. The page's rails and top rule come from the Guides spine, and a solid divider that meets the top rule splits the block in two. At the start, a chat window in a hairline frame with + marks on its corners: a small header, the assistant's hello, one question already answered, and three suggested questions underneath as chips. At the end, a headline, a sentence with a bold lead, the Shine Button and a line about the trial. Choosing a chip adds your question as a bubble, shows the assistant's typing dots for a moment, then types the answer out once; the chosen chip is filled in the foreground tone, so the Shine Button stays the one primary control. On a phone the copy and the button come first and the chat follows. It's built from Bubble, Message, Typing Indicator Text, Typing Text, Button, Shine Button and Guides, with CSS only and your theme's tokens. For AI assistants, support bots and any product whose first impression is how it answers.
FAQ
How do I change the questions and answers?
Edit EXCHANGES at the top of the file: each has a question for the chip and the user's bubble, and an answer for the reply. GREETING is the assistant's first line. Keep answers to two sentences so the demo stays quick; the thread reserves the height of the tallest exchange, so a longer one just makes the chat window taller from the start.
What happens when a chip is chosen?
The chip fills in as pressed, your question appears as a bubble on the end side, and the assistant's typing dots show for 900 milliseconds. Then the answer types out once and settles as plain text. Choosing a chip while an answer is still typing starts the new exchange straight away. Nothing loops, so there is nothing to pause.
Is the assistant real?
No: the answers are fixed text in the file, so the block works with no backend. To make it live, send the question from choose to your API and put the reply in phase="answering"; the typing dots are a good place to wait for the response.
How do screen readers get the conversation?
The chips are real buttons in a labelled group that say whether they are pressed. The typing dots are hidden, and one polite live line announces the finished answer, never each typed letter. The typing component also keeps the whole answer as text for assistive technology, so nothing is read out letter by letter.
What about reduced motion?
With reduced motion the dots hold still and the answer appears whole instead of being typed, after the same short wait. The entrance fades on the copy are CSS transitions that switch off too.