Launch FAQ Accordion

ComingSoon13: Launch FAQ Accordion

A centered coming-soon section that stacks an eyebrow badge, heading, and description above one or more titled FAQ groups, each rendering its question and answer pairs as a shadcn accordion, closed by an optional footer line with a contact link.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon13.tsx.

Quick start

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

import { ComingSoon13, comingsoon13Demo } from "@/components/beste/block/comingsoon13";

export default function Page() {
  return <ComingSoon13 {...comingsoon13Demo} />;
}

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

import { ComingSoon13 } from "@/components/beste/block/comingsoon13";

export default function Page() {
  return (
    <ComingSoon13
      badge={{ label: "FAQ", variant: "secondary" }}
      heading="Questions about the launch"
      description="Everything you need to know about what's coming and when."
      groups={[
        {
          title: "General",
          initialOpenIndex: 0,
          items: [
            {
              question: "When is the expected launch date?",
              answer: "We're targeting Q3, with beta users getting access four weeks early.",
            },
            {
              question: "Is there a free tier?",
              answer: "Yes, the free tier includes all core features with generous limits.",
            },
          ],
        },
      ]}
      labels={{
        footerText: "Still have questions?",
        contactText: "Reach out to our team",
        contactHref: "/contact",
      }}
    />
  );
}

Props

interface FaqItem {
  question: string;
  answer: string;
}

interface FaqGroup {
  title: string;
  items: FaqItem[];
  initialOpenIndex?: number;
}

Behavior notes

• Each group renders its items inside a shadcn Accordion set to type="single" with collapsible, so at most one question per group is open at a time and clicking an open one closes it.
• The block is a client component that watches a min-width: 768px media query with useState and useEffect; only on desktop does a group honor its initialOpenIndex as the accordion's defaultValue, and the accordion is re-keyed across the breakpoint so the default is reapplied.
• The group layout adapts to count: one or two groups lay out in a centered flex row, three become a three-column grid, and four or more become a two-column grid.
• The footer row renders when either labels.footerText or labels.contactText is set, and the contact link only appears when both contactText and contactHref are provided.
• Questions and answers are rendered as plain text with no inline markup parsing, so HTML passed into either shows as escaped text.