Two Column Accordion

Faq86: Two Column Accordion

An FAQ split across two columns of independent accordions, so opening one answer never closes another, closing on a soft support panel with two actions.

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

Base UI flavor

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

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

Quick start

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

import { Faq86, faq86Demo } from "@/components/beste/block/faq86";

export default function FaqPage() {
  return <Faq86 {...faq86Demo} />;
}

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

import { Faq86 } from "@/components/beste/block/faq86";

export default function FaqPage() {
  return (
    <Faq86
      badge={{ label: "Common questions" }}
      heading="The things practices ask before the second call"
      description="Open as many as you like, they do not close each other."
      items={[
        {
          question: "Do we need to close for the switch?",
          answer: "No. One clinic goes live first while the rest carry on unchanged.",
        },
        {
          question: "Does it work offline?",
          answer: "The member booking link keeps working from cache during an outage.",
        },
      ]}
      supportTitle="Ask us something harder"
      supportBody="Support is staffed by the people who wrote the code."
      buttons={[
        { label: "Talk to an engineer", href: "/contact" },
        { label: "Read the help centre", href: "/help" },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• Open state is an array of indices rather than a single one, so any number of answers can be open at once and toggling one never closes another. The first question starts open.
• The toggle is a pure array update: an open index is filtered out, a closed one is appended. Order in that array does not matter, since membership is all that is checked.
• Because the layout is a two-column grid filled column by column, the first half of items lands in the left column and the second half in the right. Reordering the array is how you move a question between columns.
• Opening an answer changes that column's height only, so the two columns will not stay level. That is expected, not a bug, and is the trade-off for independent accordions.
• Answers are conditionally rendered rather than hidden with CSS, so collapsed content stays out of the DOM.
• The answer panel carries pr-11, which clears the chevron so the text does not run under it.
• The support panel renders when any one of its three props is present, so a panel with only buttons and no copy is valid.
• Triggers are real button elements with aria-expanded and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.