Live Search FAQ

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its input, label dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq85.tsx instead.

Usage

The file also exports faq85Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq85, faq85Demo } from "@/components/blocks/faq/faq85";

export default function Page() {
  return <Faq85 {...faq85Demo} />;
}

Props

Types

type FaqEntry = {
  topic: string;
  question: string;
  answer: string;
};

Behavior notes

• "use client" because the search input is a real controlled field: typing filters the visible entries via local state and a useMemo derivation, case-insensitively, across the topic, question, and answer fields.
• Every matching entry renders fully expanded on its own hairline row; there is no accordion collapse here, the search itself is the narrowing mechanism.
• An empty state message renders in place of the list when the query matches zero entries.