---
title: FAQ
description: FAQ layouts that keep common answers easy to scan.
group: Blocks
order: 22
---

A few clean ways to answer recurring questions without taking over the page. Replace the content with what people actually ask.

## Accordion

A centered heading over a single-column accordion.

```tsx
"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

type Faq01Props = {
  className?: string;
};

const FAQS = [
  {
    value: "1",
    question: "Can I restyle blocks with my own theme?",
    answer:
      "Yes. Every block uses your theme tokens for color, radius, and type — swap the theme and the section follows.",
  },
  {
    value: "2",
    question: "How do I install a block?",
    answer:
      "Run the CLI add command for the block you want, then import it into a page. No extra setup beyond your existing UI kit.",
  },
  {
    value: "3",
    question: "Do blocks work in light and dark mode?",
    answer:
      "They do. Surfaces and text pull from semantic tokens, so both modes stay consistent without a second stylesheet.",
  },
  {
    value: "4",
    question: "Can I mix blocks freely?",
    answer:
      "That’s the point. Heroes, pricing, FAQs, and the rest are independent sections — compose them in any order.",
  },
] as const;

export function Faq01({ className }: Faq01Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-2xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            Frequently asked questions
          </h2>
          <p className="mt-2 text-sm tracking-wide text-muted-foreground">
            Quick answers about install, theming, and how blocks fit together.
          </p>
        </div>
        <Accordion type="single" collapsible className="mt-8">
          {FAQS.map((faq) => (
            <AccordionItem key={faq.value} value={faq.value}>
              <AccordionTrigger indicator="plus">{faq.question}</AccordionTrigger>
              <AccordionContent>{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add faq-01
```

### Usage

```tsx
import { Faq01 } from "@/components/blocks/faq/faq-01"
```

```tsx
<Faq01 />
```

## Split

A heading and accordion side by side in one filled card.

```tsx
"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

type Faq02Props = {
  className?: string;
};

const FAQS = [
  {
    value: "1",
    question: "What’s included when I add a block?",
    answer:
      "You get the React component and its local dependencies. Swap the copy, media, and links for your product.",
  },
  {
    value: "2",
    question: "Do I need a design file?",
    answer:
      "No. Blocks ship production-ready. Tweak spacing and tokens in code if you want them tighter or louder.",
  },
  {
    value: "3",
    question: "Can my team use these commercially?",
    answer:
      "Yes — use them in client work and products. Keep the install path and attribution wherever your license requires.",
  },
  {
    value: "4",
    question: "How often are new blocks added?",
    answer:
      "We ship in small batches — marketing first, then app surfaces. Check the blocks index for what’s live.",
  },
] as const;

export function Faq02({ className }: Faq02Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div
          data-slot="block-split"
          className="flex flex-col gap-8 rounded-xl bg-muted p-5 @[40rem]:flex-row @[40rem]:gap-10 @[40rem]:p-8"
        >
          <div className="max-w-xs shrink-0">
            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
              Questions & answers
            </h2>
            <p className="mt-2 text-sm tracking-wide text-muted-foreground">
              Still stuck? Reach out and we’ll point you at the right block or
              pattern.
            </p>
          </div>
          <Accordion type="single" collapsible className="min-w-0 flex-1">
            {FAQS.map((faq) => (
              <AccordionItem key={faq.value} value={faq.value}>
                <AccordionTrigger indicator="plus">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add faq-02
```

### Usage

```tsx
import { Faq02 } from "@/components/blocks/faq/faq-02"
```

```tsx
<Faq02 />
```

## By topic

Two topic-based accordions in separate cards, with the section title above.

```tsx
"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

type Faq03Props = {
  className?: string;
};

const GROUPS = [
  {
    title: "Product",
    items: [
      {
        value: "p1",
        question: "Can I restyle blocks with my theme?",
        answer:
          "Yes. Colors, radii, and type come from your tokens — change the theme and every block updates.",
      },
      {
        value: "p2",
        question: "Do blocks support dark mode?",
        answer:
          "They use semantic surfaces and text, so light and dark both work without a second stylesheet.",
      },
      {
        value: "p3",
        question: "Can I mix blocks freely?",
        answer:
          "They’re independent sections. Drop heroes, pricing, and FAQs in any order on a page.",
      },
    ],
  },
  {
    title: "Billing",
    items: [
      {
        value: "b1",
        question: "Is there a free plan?",
        answer:
          "Hobby covers side projects. Upgrade when you need more seats, SSO, or priority support.",
      },
      {
        value: "b2",
        question: "Can I change plans later?",
        answer:
          "Anytime. Upgrades apply immediately; downgrades take effect on the next billing cycle.",
      },
      {
        value: "b3",
        question: "Do you offer invoices?",
        answer:
          "Business and Enterprise plans support invoicing and custom contracts. Talk to us if you need one.",
      },
    ],
  },
] as const;

export function Faq03({ className }: Faq03Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="mx-auto max-w-md text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            FAQ by topic
          </h2>
          <p className="mt-2 text-sm tracking-wide text-muted-foreground">
            Product and billing answers side by side.
          </p>
        </div>
        <div className="mt-8 grid grid-cols-1 gap-3 @[40rem]:grid-cols-2">
          {GROUPS.map((group) => (
            <div
              key={group.title}
              className="min-w-0 rounded-xl bg-muted p-5 @[32rem]:p-6"
            >
              <h3 className="text-xs font-medium tracking-wide text-muted-foreground">
                {group.title}
              </h3>
              <Accordion type="single" collapsible className="mt-3">
                {group.items.map((faq) => (
                  <AccordionItem key={faq.value} value={faq.value}>
                    <AccordionTrigger indicator="plus">
                      {faq.question}
                    </AccordionTrigger>
                    <AccordionContent>{faq.answer}</AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add faq-03
```

### Usage

```tsx
import { Faq03 } from "@/components/blocks/faq/faq-03"
```

```tsx
<Faq03 />
```