Three-Column FAQ Grid

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>
  )
}

pnpm dlx shadcn add @01orbital/faq-grid-01

npx shadcn add @01orbital/faq-grid-01

yarn shadcn add @01orbital/faq-grid-01

bunx --bun shadcn add @01orbital/faq-grid-01