# Three-Column FAQ Grid

> FAQ grid of nine short questions and answers in three columns under a heading and a support link. Built for brief answers that read at a glance.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/faq-grid-01).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/faq-grid-01
- Screenshot: https://shadcn.exchange/shot/01orbital/faq-grid-01/light.png
- Registry item: https://01orbital.dev/r/faq-grid-01.json
- Categories: faq
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/faq-grid-01.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: `@01orbital/faq-list`, `@01orbital/heading`, `@01orbital/section`

## Files

### `blocks/faq/faq-grid-01/index.tsx`

```tsx
import {
  FaqList,
  FaqListAnswer,
  FaqListItem,
  FaqListQuestion,
} from "@/components/editorial/faq-list"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Frequently asked questions",
  support: {
    lead: "Can’t find the answer you need? Write to ",
    label: "customer support",
    tail: " and a person replies within one business day.",
  },
} as const

const FAQS = [
  {
    id: "install",
    question: "How do I install a block?",
    answer:
      "Run the command shown under the block. The CLI copies the source into your project.",
  },
  {
    id: "existing",
    question: "Does it fit an existing project?",
    answer:
      "Yes. It uses the same tokens and primitives as stock shadcn, so nothing has to be re-themed.",
  },
  {
    id: "customize",
    question: "Can I edit the copy?",
    answer:
      "Every word lives in a constant at the top of each file. Change it there.",
  },
  {
    id: "updates",
    question: "How do updates arrive?",
    answer:
      "Re-run the install command. The CLI diffs first and never overwrites an edited file silently.",
  },
  {
    id: "dark",
    question: "Is dark mode included?",
    answer: "Every block renders light and dark from the same tokens.",
  },
  {
    id: "license",
    question: "Can I use it for clients?",
    answer:
      "One license covers every project you build, for yourself or for anyone else.",
  },
  {
    id: "frameworks",
    question: "Which frameworks are supported?",
    answer: "Next.js, Vite and Remix on React 19 with Tailwind v4.",
  },
  {
    id: "refund",
    question: "What if it is not for me?",
    answer:
      "Write within fourteen days and we refund the purchase, no questions.",
  },
  {
    id: "support",
    question: "How do I get help?",
    answer:
      "Email support on every plan, with a reply within one business day.",
  },
] as const

export default function FaqGrid01() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>
          {COPY.support.lead}
          <a href="#" className="font-semibold text-foreground">
            {COPY.support.label}
          </a>
          {COPY.support.tail}
        </SectionDescription>
      </SectionHeader>
      <SectionContent>
        <FaqList cols={3}>
          {FAQS.map((faq) => (
            <FaqListItem key={faq.id}>
              <FaqListQuestion>{faq.question}</FaqListQuestion>
              <FaqListAnswer>{faq.answer}</FaqListAnswer>
            </FaqListItem>
          ))}
        </FaqList>
      </SectionContent>
    </Section>
  )
}
```