FAQ Section
A two-column FAQ with topic chips that slide between states and questions that expand in place with a plus-to-minus toggle. Answers render inline code, and an empty topic offers a way back to all questions.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Questions, answered plainly.
PrequelUI is MIT-licensed, installs with one command, and copies code you can read. Here is what people ask before adding their first block.
Can't find your answer? Ask on GitHub — the same place the source lives.
Ask on GitHubReplies within two working days.
- Run
npx shadcn@latest add https://prequelui.terravidhal.me/r/area-chart.json. The CLI copies the component into your project, so you can edit it, rename it, or remove the parts you don't need. It expects React 19, Tailwind CSS 4, and motion.
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/faq-section.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { FaqSection } from "@/components/prequel/faq-section/faq-section";
export default function DashboardPage() {
return <FaqSection />;
}import { FaqSection } from "@/components/prequel/faq-section/faq-section";
export default function DashboardPage() {
return <FaqSection />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
title | string | — |
intro | string | — |
contactText | string | — |
contactLabel | string | — |
contactHref | string | — |
items | FaqSectionItem[] | — |
topics | string[] | Topics rendered as filter chips. Defaults to Billing, Install, Licence. |
showFilter | boolean | Show the topic filter. Defaults to true. |
allowMultiple | boolean | Allow more than one panel open at a time. Defaults to false. |
defaultOpenIds | string[] | Ids open on first render. Defaults to the first question. |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.