Topic Rail FAQ

Faq82: Topic Rail FAQ

A categorised FAQ whose topic rail is derived from the questions themselves and carries live counts, switching the accordion beside it and resetting it to the first answer on every change.

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/faq82?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/faq82.tsx plus the badge23 and button21 components it uses for the eyebrow and the support action.

Quick start

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

import { Faq82, faq82Demo } from "@/components/beste/block/faq82";

export default function FaqPage() {
  return <Faq82 {...faq82Demo} />;
}

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

import { Faq82 } from "@/components/beste/block/faq82";

export default function FaqPage() {
  return (
    <Faq82
      badge={{ label: "Questions" }}
      heading="Sorted the way practices actually ask them"
      description="Every answer is written by someone who would have to fix it if it were wrong."
      items={[
        {
          topic: "Migration",
          question: "How long does moving off our current system really take?",
          answer: "Two weeks end to end for most practices, and the busy part is three days.",
        },
        {
          topic: "Security",
          question: "Where is our data stored, and can it leave the region?",
          answer: "In the region you pick at setup, and it does not leave it.",
        },
        {
          topic: "Billing",
          question: "Is there an implementation or onboarding fee?",
          answer: "No. Migration, mapping, and the first go-live are part of the subscription.",
        },
      ]}
      support={{
        label: "Still not answered? Ask the engineer who would have to fix it.",
        button: { label: "Talk to us", href: "/contact" },
      }}
    />
  );
}

Props

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

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

Behavior notes

• Topics are derived, not configured. They come from Array.from(new Set(items.map(item => item.topic))), so adding a question with a new topic adds a rail entry automatically, in first-appearance order. Counts are computed the same way per render.
• Switching topics resets the open answer to index 0 in the same handler. Without that, moving from a topic where the fourth answer was open to one with two questions would leave nothing visible.
• Panel keys are `${topic}-${index}`, so React remounts the rows when the topic changes rather than reusing them, which stops a stale open state carrying across.
• Clicking the open question sets the index to -1, so all answers can be closed and the column collapses to a plain list of hairlines.
• Answers are conditionally rendered rather than hidden with CSS, so collapsed content stays out of the DOM.
• The rail is a horizontal pill row below lg and a vertical list from lg up. The per-topic counts are lg:inline only, since they would crowd the wrapped row on mobile.
• The answer panel carries pr-11, which clears the chevron button so the text does not run under it.
• Triggers are real button elements with aria-expanded and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.