Centred Accordion

Faq95: Centred Accordion

A centred FAQ in a single narrow column: heading over a single-open accordion, closed by one line and a pill for anything that is still unanswered.

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

Base UI flavor

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

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

Quick start

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

import { Faq95, faq95Demo } from "@/components/beste/block/faq95";

export default function Page() {
  return <Faq95 {...faq95Demo} />;
}

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

import { Faq95 } from "@/components/beste/block/faq95";

export default function Page() {
  return (
    <Faq95
      eyebrow="Good to know"
      heading="Questions, answered plainly."
      items={[
        { question: "How long is a session?", answer: "Sixty minutes as standard, seventy-five for couples." },
        { question: "Can I cancel or move a session?", answer: "Yes, with a day's notice, for free." },
      ]}
      closing="Still wondering about something?"
      button={{ label: "Ask us directly", href: "mailto:hello@beste.co", tone: "outline" }}
    />
  );
}

Props

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

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

Behavior notes

• The whole section is capped at max-w-3xl, so questions and answers keep a comfortable measure without needing a second column to hold them in.
• The accordion is type="single" with collapsible, so one answer is open at a time and the open one can be closed again.
• Item values come from the index (faq95-0, faq95-1), so duplicate questions never collide on the same accordion value.
• The heading is centred but the accordion is not: questions stay left aligned, because a centred question over a left aligned answer reads as a mistake.
• hover:no-underline overrides the shadcn trigger default, which would otherwise underline a serif question on hover.
• The closing row is skipped entirely unless closing or button is given, so the section can end cleanly on its last answer.
• Answers are plain strings with no markup rendered inside them, so a link in an answer means extending the block rather than passing HTML.