Does FAQ Support 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 Support

FAQ accordion beside a sticky support card with the team, live status and reply time.

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

About FAQ Support

FAQ Support pairs an accordion of answers with a sticky card showing the support team's faces, a live online dot, the typical reply time and buttons for chat, email and docs.

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

When to use FAQ Support

SaaS with a support promise.
Clinics, telehealth and therapy.
Insurance and finance products.
AI support tools.

How it is built

Uses Accordion, Avatar Group and Live Dot. The questions, team names and reply time are props.

It is composed from Accordion, Avatar Group, Button, Live Dot, 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 Support

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

Halcyon template: Support that answers in seconds.
Brightside template: A dentist people don't dread.
Canopy template: Insurance explained in plain English.
Carebridge template: See a doctor today, from your sofa.
Kindred template: Find a therapist you actually click with.
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 Chat: A chat-style React FAQ where a teammate types each answer back
Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline

Install FAQ Support

npx shadcn@latest add @charcoal/faq-support

FAQ Support 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 Support 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

Accordion: Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.
Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Live Dot: A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.

FAQ Support as Markdown