# FAQ Section v6

> Two-column FAQ with a large pixel-font title on the left and a custom dashed-ruled accordion table on the right.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/faq-section-v6
- Screenshot: https://shadcn.exchange/shot/uiception/faq-section-v6/light.png
- Registry item: https://uiception.com/r/faq-section-v6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/faq-section-v6.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: `geist`, `radix-ui`

## Files

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

```tsx
import FaqSectionV6 from "./components/faq-section-v6"

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

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

```tsx
import { GeistPixelSquare } from "geist/font/pixel"

import FaqAccordion from "./faq-accordion"

export default function FaqSectionV6() {
  return (
    <section className="py-16 md:py-20 lg:py-24">
      <div className="mx-auto max-w-6xl px-4">
        <div className="grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1.7fr)] md:gap-16 lg:gap-24">
          <div className="md:sticky md:top-24 md:self-start">
            <h2
              className={`${GeistPixelSquare.className} text-6xl leading-none tracking-tight text-foreground sm:text-7xl lg:text-8xl`}
            >
              FAQ
            </h2>
          </div>

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

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

```tsx
"use client"

import { PlusIcon } from "lucide-react"
import { Accordion as AccordionPrimitive } from "radix-ui"

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

export default function FaqAccordion() {
  return (
    <AccordionPrimitive.Root type="single" collapsible className="w-full">
      {faqItems.map((item) => (
        <AccordionPrimitive.Item
          key={item.id}
          value={item.id}
          className="border-b border-dashed border-border"
        >
          <AccordionPrimitive.Header className="flex">
            <AccordionPrimitive.Trigger className="group/faq flex flex-1 items-start justify-between gap-5 py-6 text-left text-xl font-medium tracking-tight text-foreground outline-none transition-colors hover:text-foreground/70 focus-visible:underline sm:text-2xl">
              {item.question}
              <PlusIcon className="mt-1 size-7 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]/faq:rotate-45" />
            </AccordionPrimitive.Trigger>
          </AccordionPrimitive.Header>
          <AccordionPrimitive.Content className="overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
            <p className="pb-6 pr-12 font-mono text-base leading-relaxed text-muted-foreground sm:text-lg">
              {item.answer}
            </p>
          </AccordionPrimitive.Content>
        </AccordionPrimitive.Item>
      ))}
    </AccordionPrimitive.Root>
  )
}
```

### `registry/new-york/blocks/faq-section-v6/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.",
  },
]
```