# Centered FAQ Accordion

> FAQ accordion centered under a heading, with five collapsible questions covering plans, plan changes, free trials, billing, and data security.

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

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

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/faqs-1.json
```

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

## Dependencies

- npm packages: `@base-ui/react`
- Registry items: `accordion`

## Files

### `registry/blocks/faqs/1/faqs-block.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const faqs = [
  {
    q: "What is included in each plan?",
    a: "Every plan includes the core platform, unlimited projects, and access to the component library. Higher tiers add advanced analytics, priority support, and SSO.",
  },
  {
    q: "Can I change my plan later?",
    a: "Yes. You can upgrade or downgrade at any time from your billing settings, and changes are prorated automatically.",
  },
  {
    q: "Do you offer a free trial?",
    a: "All paid plans come with a 14-day free trial. No credit card is required to get started.",
  },
  {
    q: "How does billing work?",
    a: "We bill monthly or annually, and annual plans save you two months. You can cancel anytime with no hidden fees.",
  },
  {
    q: "Is my data secure?",
    a: "Your data is encrypted in transit and at rest, and we run regular third-party security audits to keep it safe.",
  },
]

export default function FaqsBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
      <div className="w-full max-w-2xl">
        <div className="text-center">
          <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl">
            Frequently asked questions
          </h2>
          <p className="mt-3 text-muted-foreground">
            Answers to the questions we hear most often.
          </p>
        </div>

        <Accordion defaultValue={[faqs[0].q]} className="mt-10">
          {faqs.map(({ q, a }) => (
            <AccordionItem key={q} value={q}>
              <AccordionTrigger className="py-4 text-base font-medium">
                {q}
              </AccordionTrigger>
              <AccordionContent className="pb-4 text-base text-muted-foreground">
                {a}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}
```