Tabbed Accordion

Faq97: Tabbed Accordion

An FAQ sorted into topics: a centred pill tab bar switches between accordions, and each group blurs into place under its own rule when its tab is chosen.

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

Base UI flavor

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

This installs the block to components/beste/block/faq97.tsx, the shadcn accordion and tabs primitives it is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Faq97, faq97Demo } from "@/components/beste/block/faq97";

export default function Page() {
  return <Faq97 {...faq97Demo} />;
}

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

import { Faq97 } from "@/components/beste/block/faq97";

export default function Page() {
  return (
    <Faq97
      eyebrow="By topic"
      heading="Everything people ask, sorted."
      button={{ label: "Ask a different question", href: "mailto:hello@beste.co", tone: "outline" }}
      groups={[
        {
          tabLabel: "Sessions",
          items: [
            { question: "How long is a session?", answer: "Sixty minutes as standard, seventy-five for couples." },
          ],
        },
        {
          tabLabel: "Fees",
          items: [
            { question: "How much does it cost?", answer: "From sixty dollars a session." },
          ],
        },
      ]}
    />
  );
}

Props

type Group = {
  tabLabel: string;
  items: FaqItem[];
};

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

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• tabLabel is the tab's value as well as its text, so two groups must not share a label; give them distinct names and the tabs track correctly.
• defaultValue is read from the first group, so the block opens on a real topic rather than with every panel closed.
• Accordion values combine both indices (faq97-0-1), so a question that appears in two topics does not open in both at once.
• Each panel has its own blur-in on animate rather than whileInView, because a tab panel is mounted when its tab is chosen and would otherwise have no moment to arrive.
• Tabs are restyled into a pill rail: the list is a rounded bg-muted track and the active trigger inverts to the ink surface with its shadow removed, which is the set's language rather than the shadcn default.
• Because these are shadcn Tabs, keyboard support comes for free: arrow keys move between topics and the panel follows.
• The section is capped at max-w-4xl, so questions keep a readable measure under a centred tab rail.