# FAQ Section v3

> Dark-background FAQ with a serif headline, italic subtitle, numbered rows, and chevron accordion.

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

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

## Install

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

```tsx
import FaqSectionV3 from "./components/faq-section-v3"

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

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

```tsx
"use client"

import { Instrument_Serif } from "next/font/google"

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

const instrumentSerif = Instrument_Serif({
  subsets: ["latin"],
  weight: ["400"],
  style: ["normal", "italic"],
})

export default function FaqSectionV3() {
  return (
    <section className="bg-background py-16 md:py-20 lg:py-24">
      <div className="mx-auto max-w-3xl px-4">
        <div className="mb-14 text-center">
          <h2 className={`${instrumentSerif.className} text-5xl font-normal tracking-tight text-foreground sm:text-6xl`}>
            {faqSectionMeta.title}
          </h2>
          <p className={`${instrumentSerif.className} mt-3 text-2xl italic text-muted-foreground sm:text-3xl`}>
            {faqSectionMeta.subtitle}
          </p>
        </div>
        <FaqAccordion />
      </div>
    </section>
  )
}
```

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

```tsx
"use client"

import { ChevronDownIcon } 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, index) => (
        <AccordionItem key={item.id} value={item.id} className="border-border">
          <AccordionTrigger className="py-5 text-base hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
            <span className="flex w-full items-center gap-6">
              <span className="w-7 shrink-0 font-mono text-sm text-muted-foreground/60">
                {String(index + 1).padStart(2, "0")}.
              </span>
              <span className="flex-1 text-left font-normal text-foreground">
                {item.question}
              </span>
              <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180" />
            </span>
          </AccordionTrigger>
          <AccordionContent className="pb-5 pl-13 text-base leading-relaxed text-muted-foreground">
            {item.answer}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

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

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

export const faqSectionMeta = {
  title: "Got Questions?",
  subtitle: "We've got answers",
}

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 during or after the trial.",
  },
  {
    id: "billing",
    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 billing 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: "data-security",
    question: "Is my data secure?",
    answer:
      "Yes. All data is encrypted in transit and at rest using AES-256. We are SOC 2 Type II certified and conduct regular third-party security audits.",
  },
  {
    id: "integrations",
    question: "What integrations do you support?",
    answer:
      "We integrate with Slack, Notion, GitHub, Jira, Zapier, and dozens more. You can also connect any tool via our REST API or webhooks.",
  },
  {
    id: "support",
    question: "What kind of support is available?",
    answer:
      "All plans include email and chat support with a 24-hour response time. Pro and Enterprise plans include priority support and a dedicated success manager.",
  },
  {
    id: "cancel",
    question: "Can I cancel at any time?",
    answer:
      "Yes. You can cancel your subscription at any time from your account settings with no cancellation fees. Your access continues until the end of the current billing period.",
  },
]
```