Grid cards

FAQ with two columns of question cards.

Usage

import { FaqGrid } from '@/components/blocks/faq-05'


<FaqGrid />


// Your own copy, several answers open at once, in a single column
<FaqGrid
  title={'Still curious?\nAsk away.'}
  type="multiple"
  columns={1}
  defaultOpen={[0]}
  items={[
    { question: 'Is there a free trial?', answer: 'Every plan starts with 14 days free.' },
    { question: 'Can I change plans later?', answer: 'Upgrade or downgrade any time.' },
  ]}
  ctaLabel="Book a demo"
  ctaHref="/contact"
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/faq-05

npx shadcn@latest add @pastaui-pro/faq-05

yarn dlx shadcn@latest add @pastaui-pro/faq-05

bunx --bun shadcn@latest add @pastaui-pro/faq-05

Source

Props

Grid cards props
Prop	Type	Default	Description
eyebrow	string	= ''	Optional small label above the heading.
title	string	= 'Questions before you ship?\nWe have you covered.'	Section heading. Use \n to break it onto a new line.
description	string	= ''	Optional supporting line under the heading.
items	FaqGridItem[]	= Eight component-library questions	Question and answer pairs. Answers accept any ReactNode. With two columns, the first half fills the left column and the rest the right.
type	'single' \| 'multiple'	= 'single'	Whether opening a question closes the others.
columns	1 \| 2	= 2	Columns from the md breakpoint up. Always one column on small screens.
defaultOpen	number \| number[]	= 4 for the default items, otherwise none	Index or indexes of the questions open on first render.
open	number[]	= —	Controlled indexes of the open questions.
onOpenChange	(open: number[]) => void	= —	Called with the next open indexes when a question is toggled.
ctaLabel	string	= 'Talk to our team'	Button label. Pass an empty string to hide the button.
ctaHref	string	= 'mailto:hello@example.com'	Where the button links to.
className	string	= —	Additional classes for the section. Other section props are forwarded.