Two-column FAQ with a short heading on the left and an accordion of five install and licensing questions on the right. Answers expand one at a time on click.
import { Faq } from "@/components/editorial/faq"
import { Heading } from "@/components/editorial/heading"
import {
Section,
SectionColumns,
SectionContent,
SectionHeader,
SectionTitleGroup,
} from "@/components/editorial/section"
// The copy: change text here, not in the markup.
const COPY = {
title: "Questions before you install",
} as const
const FAQS = [
{
id: "existing-project",
question: "Does this work with an existing shadcn project?",
answer:
"Yes. Every block installs through the shadcn CLI into the components folder you already have and reads the tokens you already set.",
},
{
id: "customization",
question: "Can I change the copy and the layout?",
answer:
"The source lands in your repo as plain files. Edit the copy constant at the top of each block, or restructure the markup however you need.",
},
{
id: "frameworks",
question: "Which frameworks are supported?",
answer:
"Next.js, Vite and Remix projects on React 19 with Tailwind v4. Server Components are the default; blocks that need the browser say so at the top.",
},
{
id: "updates",
question: "How do updates reach me?",
answer:
"Re-run the install command for a block to pull its latest version. Your edits stay yours; nothing is overwritten without asking.",
},
{
id: "license",
question: "Is there a license for client work?",
answer:
"One license covers every project you build, for yourself or for clients. Redistributing the blocks themselves is the only thing it excludes.",
},
] as const
export default function FaqAccordion01() {
return (
<Section>
<SectionContent>
<SectionColumns>
<SectionHeader size="sm">
<SectionTitleGroup>
<Heading>{COPY.title}</Heading>
</SectionTitleGroup>
</SectionHeader>
<Faq faqs={FAQS} />
</SectionColumns>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/faq-accordion-01npx shadcn add @01orbital/faq-accordion-01yarn shadcn add @01orbital/faq-accordion-01bunx --bun shadcn add @01orbital/faq-accordion-01Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/faq/faq-accordion-01/index.tsx, as source you own and edit.
import FaqAccordion01 from "@/components/blocks/faq/faq-accordion-01"
export default function Example() {
return <FaqAccordion01 />
}Registry pieces it installs with it:
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.
Compare
Every Feed block side by side: whether it follows the theme or stays dark, the stock parts it is built on, and whether it is free. Open one for its preview, props and install.