Live Search FAQ

Faq85: Live Search FAQ

An FAQ with a search field that narrows the list as it is typed, matching against topic, question and answer, with every answer open on its own hairline row and an empty state when nothing matches.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/faq85?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/faq85?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/faq85.tsx, the shadcn/ui input component it depends on, and the badge23 and button21 components it uses for the eyebrow and the support action.

Quick start

The installed file exports faq85Demo alongside the block: the exact props behind the preview above. Spread it to get a working FAQ in one line.

import { Faq85, faq85Demo } from "@/components/beste/block/faq85";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Faq85 } from "@/components/beste/block/faq85";

export default function FaqPage() {
  return (
    <Faq85
      badge={{ label: "Search the answers" }}
      heading="Type what you are worried about"
      description="Every answer is open by default and the list narrows as you type."
      searchLabel="Search questions"
      searchPlaceholder="Try migration, uptime, or leaving"
      items={[
        {
          topic: "Migration",
          question: "How long does moving off our current system take?",
          answer: "Two weeks end to end, and the busy part is three days in the middle.",
        },
        {
          topic: "Uptime",
          question: "What happens when the booking service goes down?",
          answer: "Member booking links keep working from cache while the admin app recovers.",
        },
      ]}
      emptyLabel="Nothing matches that yet. Ask us directly."
      support={{ label: "Still not answered?", button: { label: "Ask an engineer", href: "/contact" } }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The match is a plain substring test over topic, question and answer joined into one string, both sides lowercased and the query trimmed. There is no fuzzy matching and no word-boundary logic, so a typo returns nothing.
• Filtering happens on every keystroke over the whole array. That is fine for a few dozen entries; a much longer list would want debouncing added.
• An empty or whitespace-only query short-circuits to the full list rather than filtering, so clearing the field restores everything immediately.
• searchLabel is rendered sr-only. The field is visually labelled by its placeholder, but assistive technology still gets a real label.
• The search icon is pointer-events-none and absolutely positioned, with pl-11 on the input clearing it, so clicks pass through to the field.
• The input is a shadcn/ui Input with type="search", which is why input appears in the block's registry dependencies.
• Every answer is always visible. This block has no accordion, so the search field is the only way the list narrows.
• The support row and the empty state both sit inside the same max-w-3xl column as the list and carry their own border-t, so the rules stay continuous whether or not results are showing.