Does FAQ Chat work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

FAQ Chat

FAQ as a support chat: tap a question and a teammate types the answer back.

Type: FAQ section
Styles: Light, Colorful
Licence: Charcoal UI Pro

About FAQ Chat

FAQ Chat presents common questions as a conversation. Visitors tap a question, it appears as their message, a teammate shows a typing indicator and then answers, which makes support feel human before anyone has to email.

It is a full-width faq section for React and Tailwind CSS 4, in a light and colorful style. Preview it at any width above, then install it with one command.

When to use FAQ Chat

Consumer apps and subscriptions.
Events and meetups.
Coaching and therapy services.
Stealth and pre-launch pages.

How it is built

Uses Typing Indicator and Avatar Group, scrolls new answers into view, and the agent name and questions are props.

It is composed from Avatar Group, Typing Indicator, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with FAQ Chat

FAQ Chat is part of 10 full templates, so you can see it in a finished page.

Lattice template: Generate, keep, sell.
Terminus template: A terminal with taste.
Groove template: One great record, every month.
Launch Night template: One evening, one RSVP.
Paperclip template: Get paid faster, freelancer.
Nourish template: A coach in your pocket, a plan on your plate.
Lingo template: Speak a new language in 15 minutes a day.
Gather template: Monthly meetups, sorted.
Backstage template: Members-only videos, done properly.
Stealth template: Say little. Collect emails.
FAQ Split: A free React FAQ section: heading and contact on the left, a springy accordion
FAQ Grid: A React FAQ grid for short answers with a contact card
FAQ Search: A help-centre React FAQ with instant search, highlighted matches and topics
FAQ Support: A React FAQ accordion with a sticky support card, live status and reply time
Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
Typing Indicator: A React typing indicator: a bubble with rippling dots that tells screen readers who is typing

Install FAQ Chat

npx shadcn@latest add @charcoal/faq-chat

FAQ Chat is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does FAQ Chat work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
Typing Indicator: A chat bubble that pops in with three dots rippling in a wave, and tells screen readers who is typing.

FAQ Chat as Markdown