Grouped FAQ Columns

Faq81: Grouped FAQ Columns

FAQ split into two labelled groups, each its own accordion of ruled questions, so a long list stays scannable by topic instead of becoming one endless column. A response-time note and an outline pill CTA close the section.

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

Base UI flavor

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

This installs the block to components/beste/block/faq81.tsx, the shadcn accordion primitive it is built on, and the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Faq81, faq81Demo } from "@/components/beste/block/faq81";

export default function Page() {
  return <Faq81 {...faq81Demo} />;
}

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

import { Faq81 } from "@/components/beste/block/faq81";

export default function Page() {
  return (
    <Faq81
      badge={{ label: "Before you write" }}
      heading="The questions that arrive in every first email."
      description="Grouped so you can skip to the part you care about."
      groups={[
        {
          title: "Working together",
          items: [
            {
              question: "Who will we actually be talking to?",
              answer: "The two people who do the work. There is no account layer.",
            },
          ],
        },
      ]}
      button={{ label: "Ask us directly", href: "/contact" }}
      labels={{ note: "Every question gets an answer within two working days." }}
    />
  );
}

Props

type FaqGroup = {
  title: string;
  items: FaqEntry[];
};

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

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

type Faq81Labels = {
  note?: string;
};

Behavior notes

• Each group is a separate Accordion type="single" collapsible, so one question can be open in each column at the same time; a single accordion across both would close the left answer when you opened a right one.
• AccordionItem values are namespaced as faq81-{group}-{item}, which keeps the two accordions from colliding when the same question index exists in both.
• Items carry border-t border-b-0, so every question opens on a rule and the group ends flush rather than closing with a trailing line.
• AccordionTrigger gets an explicit cursor-pointer and hover:no-underline, since the shadcn default underlines the trigger and leaves the arrow cursor.
• Group titles use Badge7, which is the only element in the set allowed to be monospace and letter-spaced, so the topic labels read as labels rather than as headings competing with the questions.
• The block degrades to a single column below md, stacking group two under group one with its own title intact.