FAQ split

The heading and a contact card beside an accordion of answers; stacks on phones.

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

When to use

The heading and a contact card beside an accordion of answers.
Pricing and product pages answering the questions people ask before they start.

When not to use

Long help content in categories: Help center.
Short answers worth reading all at once: FAQ grid.

Usage

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

example.tsx

1import { FaqSplit } from "@/components/dashral/blocks/faq-split"
2
3<FaqSplit
4  faqs={faqs}
5  contact={{ title: "Still unsure?", description: "We answer within a day.", label: "Contact us", href: "/contact" }}
6/>

API reference

FaqSplit

Questions on one side, a way to ask more on the other: the heading and a contact card stay put while the answers open in place. Stacks on phones. Every part comes from props.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"FAQ"`
`title`	`React.ReactNode`	`"Questions, answered"`
`description`	`React.ReactNode`	`sample`
`faqs`	`{ value: string; title: string; content: React.ReactNode }[]`	`sample`
`defaultOpen`	`string[]` The questions open at first, by value.	`["trial"]`
`contact`	`{ title: string; description?: string; label: string; href?: string; onClick?: () => void } \| null` The card to ask more; null hides it.	`sample`