# FAQ 4 – Centered accordion with supporting panel

> A clean, centered FAQ accordion paired with a narrow sidebar version. Uses a strong section header and clear dividers for easy scanning, with an optional support link at the end. Works well for product or marketing pages where FAQs are a secondary section, not the main focus.

A shadcn/ui block from the [@shadcncraft](https://shadcncraft.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcncraft/faqs-4).

- Page, with a live preview: https://shadcn.exchange/r/shadcncraft/faqs-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcncraft/faqs-4-light-b0748921681e8e11.png
- Registry item: https://shadcncraft.com/r/faqs-4.json
- Categories: faqs
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcncraft.com/r/faqs-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `accordion`, `@shadcncraft/section-heading`

## Notes from the registry

Tip: browse, preview and install every shadcncraft block from your editor with the shadcncraft extension for VS Code and Cursor: https://shadcncraft.com/ide-extension

## Files

### `blocks/pro-marketing/faqs/faqs-4/index.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  SectionHeading,
  SectionHeadingTagline,
  SectionHeadingTitle,
} from "@/components/shadcncraft/pro-marketing/section-heading";

export function Faqs4() {
  return (
    <section className="py-12 lg:py-20">
      <div className="mx-auto flex max-w-7xl flex-col gap-16 px-5 lg:px-0">
        {/* Section Heading */}
        <div className="mx-auto w-full max-w-2xl">
          <SectionHeading alignment="center">
            <SectionHeadingTagline>FAQ</SectionHeadingTagline>
            <SectionHeadingTitle>Your questions answered</SectionHeadingTitle>
          </SectionHeading>
        </div>

        {/* FAQs Accordion */}
        <div className="mx-auto w-full max-w-2xl">
          <Accordion type="single" className="w-full">
            {faqsData.map((faq) => (
              <AccordionItem key={faq.question} value={faq.question}>
                <AccordionTrigger className="text-base">{faq.question}</AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>

        {/* Contact CTA */}
        <div className="mx-auto w-full max-w-2xl text-center">
          <p className="text-muted-foreground">
            Still have questions? We&apos;re here to help.{" "}
            <a href="#" className="text-foreground underline">
              Contact support
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

const faqsData = [
  {
    question: "What is Acme Inc.?",
    answer:
      "Acme Inc. is a productivity platform designed to help teams work smarter and faster. It provides tools for collaboration, project management, and workflow optimization.",
  },
  {
    question: "How do I get started?",
    answer:
      "Getting started is easy. Sign up for a free account, complete the onboarding process, and you'll be ready to use Acme Inc. in minutes.",
  },
  {
    question: "What are the pricing plans?",
    answer:
      "We offer flexible pricing plans to suit teams of all sizes. Visit our pricing page to see detailed information about each plan and choose the one that fits your needs.",
  },
  {
    question: "Is there a free trial?",
    answer:
      "Yes, we offer a free trial period so you can explore all features before committing to a paid plan. No credit card required.",
  },
  {
    question: "Can I cancel anytime?",
    answer:
      "Absolutely. You can cancel your subscription at any time from your account settings. There are no long-term contracts or cancellation fees.",
  },
  {
    question: "Do you offer customer support?",
    answer:
      "Yes, we provide customer support via email and chat. Premium plans include priority support with faster response times.",
  },
];
```