First Call Questions

Faq94: First Call Questions

A first-call FAQ: a sticky column of heading, intro and pill action beside a single-open accordion whose serif questions sit on rules of their own.

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

Base UI flavor

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

This installs the block to components/beste/block/faq94.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 faq94Demo alongside the block: the exact props behind the preview above. Spread it to get a working FAQ section in one line.

import { Faq94, faq94Demo } from "@/components/beste/block/faq94";

export default function Page() {
  return <Faq94 {...faq94Demo} />;
}

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

import { Faq94 } from "@/components/beste/block/faq94";

export default function Page() {
  return (
    <Faq94
      eyebrow="Before you begin"
      heading="The things people ask on the first call."
      description="If your question is not here, ask it anyway."
      button={{ label: "Ask something else", href: "/contact", tone: "outline" }}
      items={[
        {
          question: "Do I need to know what I want to talk about?",
          answer: "No. Many people arrive with a feeling rather than a topic.",
        },
        {
          question: "Can we meet online?",
          answer: "Yes. About half of our sessions happen on video.",
        },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• The accordion is type="single" with collapsible, so one answer is open at a time and the open one can be closed again, leaving the list fully collapsed.
• Item values are derived from the index (faq94-0, faq94-1), so nothing has to be unique in your content for the accordion to track which panel is open.
• The trigger's chevron is styled through an [&>svg] selector rather than being passed as a prop, because the shadcn trigger renders its own icon; that is also where its size and muted colour come from.
• hover:no-underline is set deliberately: the shadcn default underlines a hovered trigger, which fights a serif question set at this size.
• Left column is md:sticky md:top-28 so the heading and action stay in view down a long list, and falls back to normal flow below md where a sticky column would cover the questions.
• The whole accordion animates in as one block rather than per item, since a staggered list of collapsed rows reads as a loading state rather than as an arrival.
• Answers are plain strings, so no markup is rendered inside them; a link in an answer needs the block extended rather than HTML passed in.