FAQ SectionProv1.0.0
Questions and answers grouped by topic, with a search that narrows as you type and says how many match. Topics sit beside the list as a quiet index on wide screens and above it on narrow ones; answers open and close as Lumen Accordion items.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-faq-sectionNeeds 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.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { FaqSection, type FaqItem } from "@/components/ui/lumen/blocks/faq-section";
const faqs: FaqItem[] = [
{ id: "trial", topic: "Billing", question: "Is there a free trial?", answer: "Yes. Every plan starts with 14 days free, no card needed." },
{ id: "cancel", topic: "Billing", question: "Can I cancel any time?", answer: "Yes. You keep access until the end of the period you paid for." },
{ id: "sso", topic: "Security", question: "Do you support single sign-on?", answer: "On Team and Scale, with SAML and SCIM." },
];
export function PricingFaq() {
return <FaqSection title="Questions, answered" items={faqs} />;
}Props
items–FaqItem[]FaqItem = { id, question, answer (string or nodes), text? (the answer as plain text, for search, when answer is nodes), topic? }.
title / description–ReactNode / ReactNodeThe section heading and its line.
searchablemore than six questionsbooleanShow the search.
defaultOpen–string[]Questions open at first.
labels–{ search?, topics?, matches?(n), empty?, other? }Words, for i18n; other names questions with no topic.
Source
components/ui/lumen/blocks/faq-section.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
