FAQ
Freev1.0.0Searchable questions by topic, with feedback on answers and a ticket form when they fall short.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Faq } from "@/components/ui/notchset/blocks/faq";
export function Help() {
return (
<Faq
categories={["SETUP", "BILLING"]}
items={[
{ q: "How do I connect my repo?", a: "Install the CLI, log in and link the repo.", category: "SETUP", code: "$ relay link acme/relay" },
{ q: "Can I change plans mid-cycle?", a: "Yes. Upgrades apply at once and are prorated.", category: "BILLING" },
]}
onSubmitTicket={async ({ email, question }) => {
const r = await fetch("/api/support", { method: "POST", body: JSON.stringify({ email, question }) });
if (!r.ok) throw new Error("ticket failed");
return r.json();
}}
/>
);
}Props
categories–string[]The topics, in order; ALL is added in front.
items–{ q, a, category, code?, keywords? }[]The questions. A string answer is searched and highlighted; a node answer is searched by its keywords.
onSubmitTicket–({ email, question, search }) => Promise<{ id }>Adds Still stuck?. Resolve with the ticket id to show it; reject to show the failure line.
onFeedback–(item, helpful) => voidCalled with the YES or NO under an answer.
title–stringThe heading (also the section's name). Defaults to Questions, answered.
Anatomy
- Topics filter and search narrows; both counts roll.
- Search opens every match; what you close while searching stays closed until the search changes.
- Still stuck? carries the search into the ticket, so support sees what was tried.
Faqdata-slot="faq"Topics, search, the questions and Still stuck?.
Source
components/ui/notchset/blocks/faq.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/faq.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/faq.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add class-variance-authority@^0.7 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/blocks/faq.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- lib/beautiful-ui/notchset/button-variants.ts
- lib/beautiful-ui/notchset/field-classes.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
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.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A pricing or docs page that answers the same questions every week
- A help centre that hands off to a person when an answer falls short
Use something else when
- Long how-to guides: link to the docs instead
- Three or four questions with no search: an Accordion is enough
Mistakes to avoid
- Return the real ticket id from onSubmitTicket, so the number matches the email the person gets
- Give node answers keywords, or search won't find them
Agents find it by
- faq, frequently asked questions, help centre, help center, questions and answers, support questions, knowledge base, contact support, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/faq.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ ↓ / Home End
- Move between topics
- Enter / Space
- Open or close a question
- Esc
- Close the Still stuck? form
Accessibility
- Topics are a tablist controlling the list (arrow keys, Home and End); each count is part of its tab's name
- Questions are headings with buttons that report aria-expanded; a closed answer is inert, so its buttons are skipped
- The result count, feedback and form messages are announced (aria-live); the form's fields are labelled and invalid ones marked
Motion
- Answer
- Unrolls in 360ms and folds in 240ms; the plus turns into a minus
- Topic
- A 2px bar grows beside the active topic
- Counts
- Topic and result counts roll as you type
- Invalid form
- A signal edge and a short shake
- Sent
- The scanner, then the ticket number rolls in
Responsive
- Under 640px (container width) the topics become a scrolling row above the list and Still stuck? moves under it.
Performance
- Search filters in memory on each keystroke; fine for a few hundred questions.
Changelog
v1.0.0 · 2026-10-04
First release
