proNew325 lines · framer-motion

FAQ Search

Type a word, watch the list find it. A full-width FAQ section with a live search box that filters questions and answers as you type, optional category chips, inline highlighted matches and an animated accordion — no page reload, no network call.

Use it for: A help centre, pricing page or docs landing that has grown past 5–6 questions and needs visitors to find their own answer fast instead of scanning a long list.
Themes: Light + dark
License: Commercial use

Live

FAQ

Answers, searchable instantly

Type a word and the list narrows in real time — no page reload, no dead ends.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width FAQ section with an instant, client-side search: a styled input
 * (no native form submit, no network call) filters a list of question/answer
 * entries as you type, with optional category chips layered on top. Matching
 * substrings are highlighted inline; each entry still expands and collapses
 * its answer on click, animated with framer-motion.
 */

export interface FaqSearchItem {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The search input is a plain styled <input> (never a native form submit); typing updates a debounced query (~120ms) that filters the question/answer list purely in the browser.
→Matching substrings inside both the question and the answer are wrapped in a signal-coloured <mark> span, built with a case-insensitive regex split, not a network search.
→Optional category chips (plain buttons, no native <select>) combine with the text query — a question must satisfy both the active category and the search text to stay visible.
→Each entry is an accordion: clicking its header animates the answer open/closed with framer-motion height/opacity; allowMultipleOpen controls whether more than one answer can stay open at once.
→When nothing matches, the list is swapped for a dashed-border empty state instead of rendering a blank gap.
→initialQuery seeds the search box on mount so the filtered/highlighted state can be demoed without typing.

Accessibility

✓The search input has a visible placeholder and an aria-label matching it; a clear button is reachable by keyboard and labelled 'Clear search'.
✓Category chips use aria-pressed to expose the active filter instead of relying on colour alone.
✓Each accordion header is a real <button> with aria-expanded reflecting its open state, so screen readers and keyboard users get the same state sighted users see.
✓Honours prefers-reduced-motion.