# FAQ Section v2

> Minimal centered FAQ with a simple headline and clean divider accordion.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/faq-section-v2).

- Page, with a live preview: https://shadcn.exchange/r/uiception/faq-section-v2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/faq-section-v2-light-56666326ec96db6b.png
- Registry item: https://uiception.com/r/faq-section-v2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/faq-section-v2.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`

## Files

### `registry/new-york/blocks/faq-section-v2/page.tsx`

```tsx
import FaqSectionV2 from "./components/faq-section-v2"

export default function Page() {
  return <FaqSectionV2 />
}
```

### `registry/new-york/blocks/faq-section-v2/components/faq-section-v2.tsx`

```tsx
import FaqAccordion from "./faq-accordion"
import { faqSectionMeta } from "../lib/faq-content"

export default function FaqSectionV2() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-4xl px-4">
        <div className="mb-10 md:mb-12">
          <p className="text-base text-muted-foreground">Learn More</p>
          <h2 className="mt-2 text-3xl font-medium tracking-tight sm:text-4xl">
            {faqSectionMeta.title}
          </h2>
        </div>

        <FaqAccordion />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/faq-section-v2/components/faq-accordion.tsx`

```tsx
"use client"

import { MinusIcon, PlusIcon } from "lucide-react"

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

import { faqItems } from "../lib/faq-content"

export default function FaqAccordion() {
  return (
    <Accordion type="single" collapsible className="w-full">
      {faqItems.map((item) => (
        <AccordionItem key={item.id} value={item.id} className="border-border">
          <AccordionTrigger className="py-5 text-base font-medium hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
            <span className="flex w-full items-center justify-between">
              {item.question}
              <PlusIcon className="size-4 shrink-0 group-aria-expanded/accordion-trigger:hidden" />
              <MinusIcon className="size-4 shrink-0 hidden group-aria-expanded/accordion-trigger:inline" />
            </span>
          </AccordionTrigger>
          <AccordionContent className="text-base leading-relaxed text-muted-foreground">
            {item.answer}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

### `registry/new-york/blocks/faq-section-v2/lib/faq-content.ts`

```ts
export type FaqItem = {
  id: string
  question: string
  answer: string
}

export const faqSectionMeta = {
  title: "Frequently Asked Questions",
  description: "Quick answers about billing, plans, and your account.",
}

export const faqItems: FaqItem[] = [
  {
    id: "free-trial",
    question: "Is there a free trial?",
    answer:
      "Yes. Every plan includes a 14-day free trial with no credit card required. You can upgrade, downgrade, or cancel at any time.",
  },
  {
    id: "billing-cycle",
    question: "How does billing work?",
    answer:
      "Plans are billed monthly or annually. Annual plans include a 20% discount. You'll receive an invoice by email at the start of each cycle.",
  },
  {
    id: "change-plan",
    question: "Can I change my plan later?",
    answer:
      "Yes. You can upgrade or downgrade at any time from your account settings. Upgrades take effect immediately; downgrades apply at the next billing cycle.",
  },
  {
    id: "team-seats",
    question: "How do team seats work?",
    answer:
      "Each seat covers one user. You can add or remove seats at any time and only pay for what you use, prorated to the day.",
  },
  {
    id: "refunds",
    question: "What is your refund policy?",
    answer:
      "We offer a full refund within 30 days of your first payment if you're not satisfied. Reach out to support and we'll sort it out, no questions asked.",
  },
]
```