FAQ section

FAQs as an accordion, a topic rail, or a searchable list that highlights matches.

$npx shadcn@latest add @silicon-ui/faq-section

Installation

$npx shadcn@latest add @silicon-ui/faq-section

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/faq-section/faq-section.tsx
- components/silicon-ui/blocks/faq-section/faq-section.module.css
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/search-field/search-field.tsx shared
- components/silicon-ui/search-field/search-field.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { FaqSection } from "@/components/silicon-ui/blocks/faq-section/faq-section";

Prop	Type	Default
`variant` `accordion` is one centered list, `columns` groups questions beside a category rail, `search` filters as you type.	`FaqSectionVariant` `"search""columns""accordion"`	`"accordion"`
`title`	`string`	`"Frequently asked questions"`
`description`	`string`	`"Everything you need to know before you install your first component."`
`items`	`FaqItem[]`	`faqExampleItems`
`multiple` Allow several answers open at once. Defaults to false.	`boolean`	`false`
`value` Open item ids (controlled).	`string[]`	—
`defaultValue` Initially open item ids when uncontrolled.	`string[]`	—
`onValueChange`	`(value: string[]) => void`	—
`category` Active category in the columns variant (controlled).	`string`	—
`onCategoryChange`	`(category: string) => void`	—
`query` Search text in the search variant (controlled).	`string`	—
`onQueryChange`	`(query: string) => void`	—
`contact` A way to reach a person when the answer isn't here. Pass null to hide it.	`{ label: string; description?: string; href?: string; onClick?: () => void } \| null`	`{ label: "Still have a question?", description: "Our team replies within a day." }`
`className`	`string`	—

Also accepts the props of HTMLAttributes.

Prop	Type	Default
`variant`	`FaqSectionVariant` `"search""columns""accordion"`	`"accordion"`