Soft cards

FAQ with question cards and a closing chat prompt.

Usage

import { FaqSoftCards } from '@/components/blocks/faq-03'


<FaqSoftCards />


// Swap in your own content
<FaqSoftCards
  title="All your questions, answered"
  type="multiple"
  defaultOpen={[0]}
  items={[
    { question: 'Is there a free plan?', answer: 'Yes, free forever for small teams.' },
    { question: 'Can I cancel anytime?', answer: 'Of course, straight from billing settings.' },
  ]}
  contactLabel="Talk to sales"
  contactHref="/contact"
/>

Install

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

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

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

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

Source

Props

Soft cards props
Prop	Type	Default	Description
eyebrow	string	= ''	Optional small label above the heading.
title	string	= 'Answers for busy shop owners'	Section heading.
description	string	= ''	Optional supporting line under the heading.
items	FaqSoftCardItem[]	= Five commerce questions	Question and answer pairs. Answers accept any ReactNode.
type	'single' \| 'multiple'	= 'single'	Whether opening a question closes the others.
defaultOpen	number \| number[]	= —	Index or indexes of the questions open on first render.
contactTitle	string	= 'Want to talk it through?'	Heading of the closing call to action.
contactText	string	= Short call invite copy	Supporting text under the call-to-action heading.
contactLabel	string	= 'Pick a time'	Button label. Pass an empty string to hide the call to action.
contactHref	string	= 'mailto:hello@example.com'	Where the button links to.
className	string	= —	Additional classes for the section.