# FAQ Section v4

> Two-column FAQ with left marketing copy and CTAs, plus a plus/minus accordion on the right.

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

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

## Install

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

## Files

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

```tsx
import FaqSectionV4 from "./components/faq-section-v4"

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

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

```tsx
import { Button } from "@/components/ui/button"

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

export default function FaqSectionV4() {
  return (
    <section className="bg-background py-16 md:py-20 lg:py-24">
      <div className="mx-auto max-w-6xl px-4">
        <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
          <div className="flex flex-col gap-6 lg:max-w-md">
            <p className="text-sm font-medium tracking-wide text-muted-foreground">
              [{faqSectionMeta.eyebrow}]
            </p>
            <div className="flex flex-col gap-4">
              <h2 className="text-3xl font-medium leading-[1.15] tracking-tight text-foreground sm:text-4xl">
                {faqSectionMeta.title}
              </h2>
              <p className="text-[0.9375rem] leading-relaxed text-muted-foreground">
                {faqSectionMeta.description}
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <Button variant="default" size="lg">
                {faqSectionMeta.primaryCta}
              </Button>
              <Button variant="ghost" size="lg">
                {faqSectionMeta.secondaryCta}
              </Button>
            </div>
          </div>

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

### `registry/new-york/blocks/faq-section-v4/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 rounded-sm border border-border px-5"
    >
      {faqItems.map((item) => (
        <AccordionItem
          key={item.id}
          value={item.id}
          className="border-border last:border-b-0"
        >
          <AccordionTrigger className="py-5 text-left text-base font-medium hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
            <span className="flex w-full items-center justify-between gap-4">
              {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-v4/lib/faq-content.ts`

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

export const faqSectionMeta = {
  eyebrow: "FAQ",
  title: "The questions everyone asks before signing up.",
  description:
    "Everything you need to know about Acme. Can't find what you're looking for?",
  primaryCta: "Get started",
  secondaryCta: "Contact us",
}

export const faqItems: FaqItem[] = [
  {
    id: "getting-started",
    question: "How long does it take to get started?",
    answer:
      "Most teams are up and running in under 10 minutes. Connect your workspace, drop in your knowledge base, and Acme starts answering with your brand voice right away.",
  },
  {
    id: "data-privacy",
    question: "Is my company data used to train models?",
    answer:
      "No. Your prompts, documents, and conversations stay private to your workspace. We never use customer data to train foundation models.",
  },
  {
    id: "integrations",
    question: "Which tools does Acme integrate with?",
    answer:
      "Acme connects with Slack, Notion, Google Drive, Confluence, Zendesk, and more via native integrations or webhooks. You can also bring your own API endpoints.",
  },
  {
    id: "model-choice",
    question: "Can I choose which AI models to use?",
    answer:
      "Yes. Route each workflow to GPT, Claude, Gemini, or your own fine-tuned models. Switch providers anytime without rewriting your prompts.",
  },
  {
    id: "team-collaboration",
    question: "How does team collaboration work?",
    answer:
      "Invite teammates with role-based access, share prompt templates, and review AI outputs together. Admins can set guardrails and approve high-impact actions.",
  },
  {
    id: "billing-cancel",
    question: "What if I need to cancel or change plans?",
    answer:
      "Upgrade, downgrade, or cancel anytime from billing settings. Changes are prorated, and you keep access through the end of your current billing period.",
  },
]
```