FAQ grid

Short answers in two columns to scan without clicking, and a line to the help center.

$ pnpm dlx shadcn@latest add @dashral/faq-grid

When to use

Short answers in two columns to scan without clicking.
Pages where the answers are short and all worth reading.

When not to use

Answers longer than a few lines: FAQ split's accordion.
More than ten questions: Help center.

Usage

FAQ grid with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { FaqGrid } from "@/components/dashral/blocks/faq-grid"
2
3<FaqGrid
4  faqs={faqs}
5  more={{ title: "Didn't find it?", label: "Visit the help center", href: "/help" }}
6/>

API reference

FaqGrid

Short answers you can scan without clicking: questions in two columns, each with its answer under it, then a line pointing to the full help center. One column on phones. Every part comes from props.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"FAQ"`
`title`	`React.ReactNode`	`"Good to know"`
`faqs`	`{ q: string; a: React.ReactNode }[]`	`sample`
`more`	`{ title: string; description?: string; label: string; href: string } \| null` The line under the answers pointing to more help; null hides it.	`sample`