components/beautiful-ui/glass-faq.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

FAQProv1.1.0

A liquid-glass FAQ block in dark and light: glass accordion rows with a cell glyph, search with highlights, categories with the gliding lens, direct links to every question and rich answers with code, lists and a docs link.

Sound by @web-kits/audio

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/glass-faq

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Preview

Open several

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

itemsdefaultGlassFaqItems (30 Lumen questions)
GlassFaqItem[]
{ id?, category?, question, answer, popular?, docsHref?, searchText? }. answer is a GlassFaqBlock[] ({ type: "p", text } | { type: "list", items } | { type: "code", lang?, code } | { type: "custom", content, searchText? }) or any ReactNode (give it searchText so search finds it). New arrays re-filter in place; open ids that disappear are ignored.
categoriesthe items' categories, capitalised
{ id; label }[]
Tab order. "Popular" (when any item is popular) and "All" are added first. Items whose category is not listed still show under All.
title["Questions, answered.", "Before you commit."]
string | [lead, muted?] | null
The headline; the second half is muted. null hides it (then give the root an aria-label).
subline"What teams ask most before moving their analytics to Lumen."
ReactNode | null
The sentence under the headline (max 360px).
contactHref"#contact"
string | null
Still unsure? Talk to our team → and the empty state's "ask us directly". null hides both.
allowMultipletrue
boolean
More than one question open at a time. Always single below singleBelow; EXPAND ALL hides when only one can open.
open / defaultOpen / onOpenChange–
string[] / string[] / (open, { id, reason }) => void
Controlled or uncontrolled open question ids. reason: "toggle", "expand-all", "collapse-all" or "hash".
query / defaultQuery / onQueryChange–
string / string / (q) => void
Controlled or uncontrolled search. Plain case-insensitive substring (regex characters are literal; ’ and ' match each other).

Show all 29 props

category / defaultCategory / onCategoryChange"popular" (or "all" when nothing is popular)
string / string / (id) => void
The category tab: "popular", "all" or a category id. An unknown id shows All. Searching always searches everything (the lens moves to All).
searchThreshold10
number
Search and categories show when there are more items than this.
filtermatchGlassFaq
(item, query) => "question" | "answer" | null
Swap the matcher (e.g. fuzzy or synonyms). "question" highlights the query in the question; "answer" shows the IN ANSWER tag.
getItemIdfaqSlug(question)
(item, index) => string
Ids for items without one. Ids are de-duplicated (-2, -3…); a question with no Latin letters falls back to faq-<n>. Ids are DOM ids and #hashes: prefix them when two FAQs share questions on one page.
renderCode–
(block, { item, id }) => ReactNode
Render a code block's contents (e.g. Shiki or Prism output). The glass header, COPY and the sideways scroll stay.
onCopyCode / onCopyLink–
(code, item) => void / (url, item) => void
Called after a successful copy (analytics). Copying uses the Clipboard API, falls back to execCommand, and shows FAILED / Couldn’t copy when both fail.
syncHashtrue
boolean
Opening writes #id with history.replaceState (closing clears it); on load and on hashchange a matching #id switches to All, opens and scrolls to it. false turns all of it off.
scrollOffset32
number
Space above a deep-linked question (px), e.g. the height of your sticky header + 16.
stickyTop32
number | string
The left column's sticky top on wide layouts.
stackBelow / singleBelow900 / 700
number / number
Container widths (the block's own width, not the viewport): below stackBelow the left column moves above the list and categories become a sideways row; below singleBelow only one question opens at a time.
hotkeytrue
boolean
"/" focuses the search (ignored while typing in a field). With several FAQs on a page it goes to the one holding focus, else the one nearest the middle of the screen, else the first.
linkComponent"a"
ElementType
Renders the docs and contact links, e.g. Next's Link.
titleAs / questionAs"h2" / "h3"
"h1"–"h4" / "h2"–"h6"
Heading levels for the title and for each question (the button sits inside the heading).
structuredDatafalse
boolean
Adds schema.org FAQPage JSON-LD for text answers. glassFaqStructuredData(items) returns the same object for your own <script>.
backgroundtrue
boolean
Paints the block's own background and indigo/cyan glows. false keeps it transparent over your page.
labelsdefaultGlassFaqLabels
Partial<GlassFaqLabels>
Every string: eyebrow, searchPlaceholder(total), search, clearSearch, categories, popular, all, stillUnsure, contact, countWord(n, searching), countAnnouncement(n, searching), expandAll, collapseAll, inAnswer, inAnswerHint, docs, copyLink, linkCopied, linkCopyFailed, copyCode, codeCopied, codeCopyFailed, copyCodeAria(lang), code(lang), emptyTitle(query), emptyHint(contactLink), emptyContact, noItems, emptyCategory.
motion"full"
"full" | "subtle" | "off"
full: the designed motion. subtle: calm curve, 30% shorter, no stagger. off: instant. prefers-reduced-motion always wins: instant layout, 150ms fades.
theme"system"
"system" | "dark" | "light"
system follows a .dark / .light class or data-theme on an ancestor, else the OS.
soundtrue
boolean | "subtle"
Built-in sound: true plays Lumen cues when a GlassSoundProvider (glass-sound) enables sound; false silences this instance (its cues and its clicks); "subtle" plays at 55%. Without a provider it is silent.
className / style / ref / …section props–
HTML section props
Spread on the root <section> (labelled by the title), which is also the container the layout queries.
CSS variables–
CSS
On the root or any ancestor: --glass-accent (number, glyph, bullets, lens tints; -dark / -light per theme), --glass-good / --glass-good-text (copied), --glass-faq-accent-text (-dark / -light; links, IN ANSWER, the open number in light), --glass-faq-highlight-text (light search highlight), --glass-faq-padding (default 64px 20px 120px), --glass-faq-max-width (1120px), --glass-faq-code-max-height (480px).

Anatomy

Takes a fixed set of props rather than arranging parts.
Plays Lumen sound cues on questions and topics.
Passes anything it doesn't read straight through.
Dark and light, designed separately.

GlassFaqdata-slot="faq"
The FAQ: search with a rolling count, topic tabs and the accordion.

Part of

FAQ is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.1.0 · 2026-09-28All 2 entries

v1.1.0 · 2026-09-28
Built-in sound: open / close on questions, select on categories, toggles on expand all, copy on copies, tick on arrow moves (with a GlassSoundProvider); the sound prop silences or softens one instance
v1.0.0 · 2026-09-27
First release, dark and light, from the Glass FAQ handoff

Keyboard

/: Focus the search (unless you are typing in a field)
Escape (search): Clear the search
↓ (search): Move to the first question
↑ / ↓ (question): Previous / next question (↑ on the first returns to the search)
Home / End (question): First / last question
Enter / Space: Open or close the question
↑ / ↓ (categories): Move between categories in the column (the list follows)
← / → (categories): Move between categories in the sideways row, mirrored in RTL (the list follows)
Home / End (categories): First / last category

More in Marketing

Logo Carousel

Landing Hero