Searchable FAQ
A free searchable FAQ section that filters an animated accordion live and highlights the matches.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Searchable FAQ is a free FAQ component for Next.js and React, a searchable faq react section built with Motion and Tailwind. A labelled search field filters the list live on a case-insensitive match of every question and answer, matching items fade in while non-matching ones fade out with a spring reflow, and the matched run in each question is wrapped in a highlight.
Each item is an accessible disclosure: a real button wrapped in an h3, wired with aria-expanded and aria-controls to a labelled region whose height opens by interpolating grid-template-rows from 0fr to 1fr, so nothing jumps and no height is measured in JavaScript. A polite live region announces the settled results count, filtered-out questions leave the accessibility tree, focus is always visible, and with prefers-reduced-motion enabled filtering and toggling are instant while every answer stays fully available.
Frequently asked questions
Search the list to find an answer fast.
Most teams are live within a day. Connect your repository, pick a template and the first deploy runs end to end in under ten minutes; the rest of the day is usually spent wiring up your domain and inviting the team.
Yes. Add the domain in your project settings and point a CNAME record at your deployment. Certificates are issued and renewed automatically, and apex domains are supported through ALIAS or ANAME records.
Nothing breaks. Your project keeps running and we email you before any soft limit is enforced. You can raise limits from the dashboard at any time, and overage pricing is metered per request rather than in bulk tiers.
Every paid plan comes with a 30 day money back guarantee. If the product is not a fit, reply to your receipt email within 30 days of purchase and the full amount is returned, no questions asked.
Yes. All stored data is encrypted with AES 256 and every connection is served over TLS. Backups are encrypted with the same keys and rotated on a fixed schedule so a lost snapshot never exposes plaintext.
Invite as many teammates as your plan allows and assign each one a role of owner, admin or viewer. Roles map to granular permissions, so you can let contractors ship to preview without granting production access.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/faq-search-filterUsage
import { FaqSearchFilter } from "@/components/faq-search-filter";
const items = [
{
question: "How long does onboarding take?",
answer: "Most teams are live within a day.",
},
{
question: "Do you offer refunds?",
answer: "Every paid plan comes with a 30 day money back guarantee.",
},
];
export default function Page() {
return <FaqSearchFilter items={items} placeholder="Search questions" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { question: string; answer: string }[] | required | The full FAQ set. |
| placeholder | string | "Search questions" | Placeholder for the search input. |
| noResultsLabel | string | "No matching questions." | Shown when the filter matches nothing. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Searchable FAQ declares no tokens of its own; it consumes the global semantic tokens through Tailwind utilities and reads the shared motion tokens --dur-2 and --ease-out-quart for the accordion open and close, with the library defaults as fallbacks. The highlight uses the primary token at low opacity. Retheme it through those tokens from :root, or restyle the section through the className prop:
:root {
--dur-2: 250ms;
--border: oklch(from var(--color-neutral-50) l c h / 0.16);
}
<FaqSearchFilter items={items} className="max-w-2xl" />Frequently asked questions
- Is Searchable FAQ free for commercial use?
- Yes. Searchable FAQ is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Searchable FAQ accessible for keyboard and screen reader users?
- Yes. The filter is a labelled search field and a polite live region announces the settled results count, debounced past typing. Each question is a real button wrapped in an h3, so Enter and Space toggle it natively and focus is always visible, and the answer panel is a region labelled by its question. Filtered-out questions leave the accessibility tree, and with reduced motion enabled filtering and toggling are instant while every answer stays fully available.
- How does the live filter and highlight work, and can I retune the animation?
- Typing filters the list on a case-insensitive substring of every question and answer; matching items fade in and non-matching ones fade out with a Motion spring reflow that moves only transforms and opacity, and the matched run in each question is wrapped in a mark element built by slicing the string in JSX rather than injecting HTML. The accordion opens by interpolating grid-template-rows from 0fr to 1fr on the shared --dur-2 and --ease-out-quart tokens, so overriding those from :root retunes it along with the rest of the library.