Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Chatbot-Style FAQ Block for Radix UI

An FAQ you ask like a chat, for a local council: a chat window with six question chips that posts your choice, shows a typing indicator and replies with the FAQ's own answer.

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

A chatbot-style FAQ for React with Radix UI. A header with an honest note sits at the start, and at the end a chat window on a card in card that follows your theme: a title bar with a status dot and a Start over button, the six question chips and a transcript. The window greets you and says it isn't a person. Choosing a chip posts the full question as your message, shows a typing indicator for a moment, and replies with that question's answer from the FAQ, word for word, with the name of the entry it came from. Nothing is generated: the chips are the only questions it knows, and it says so. It's built from Message, Bubble, Avatar, Typing Indicator Text, Status, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help pages where visitors would rather ask than scan.

FAQ

Is there a real chatbot behind it?

No, and the window says so. QUESTIONS holds six questions with a short label for the chip, the full question that's posted as your message and the answer that comes back, so every reply is text you wrote. There is no model, no free typing and no network request. To connect a real assistant, add a text field and replace ask with a call to it; keep the line that says what it is.

How does it work for a screen reader?

The transcript is a named log, role="log" with an accessible name, so each new message is announced politely as it's added: your question, then the typing indicator's "Looking through the FAQ", then the answer. The window keeps a fixed height and scrolls inside it; because it scrolls, it takes a Tab stop with a visible focus ring, so keyboard users can scroll it with the arrow keys.

Can I ask the same question twice, or while it's typing?

You can ask the same chip again: it's posted as a new message and answered again. While a reply is on its way, extra clicks are ignored, so the answers never arrive out of order. THINKING sets the wait in milliseconds; with reduced motion the dots hold still but the wait stays.

What does Start over do?

It clears the transcript back to the greeting and returns focus to the first chip. It's disabled while the window is already empty.

How are the messages coloured?

Replies are muted bubbles with a small avatar; your messages are solid foreground bubbles. The primary colour isn't used: this block has no Shine Button, since the chips are the only actions. All of it follows your theme in light and dark.

How does it fit on a phone?

The header stacks above the window and the chips wrap onto as many lines as they need. The transcript keeps its own height and scrolls inside it, so the page never grows as the conversation does, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks