Pill accordion

FAQ with question cards that lift when opened.

Usage

import { FaqSection } from '@/components/blocks/faq-01'


<FaqSection />


// Swap in your own content
<FaqSection
  title="Questions, answered"
  type="multiple"
  defaultOpen={[0, 1]}
  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.' },
  ]}
  contactHref="/contact"
/>

Install

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

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

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

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

Source

Props

Pill accordion props
Prop	Type	Default	Description
eyebrow	string	= 'Good to know'	Small label above the heading. Pass an empty string to hide it.
title	string	= 'Answers before you ask'	Section heading.
description	string	= Plans, billing and setup copy	Supporting line under the heading. Pass an empty string to hide it.
items	FaqItem[]	= Six SaaS questions	Question and answer pairs. Answers accept any ReactNode.
type	'single' \| 'multiple'	= 'single'	Whether opening a question closes the others.
defaultOpen	number \| number[]	= 0	Index or indexes of the questions open on first render.
contactText	string	= 'Can’t find what you’re after?'	Text beside the contact button.
contactLabel	string	= 'Ask a real person'	Contact button label. Pass an empty string to hide the contact row.
contactHref	string	= 'mailto:hello@example.com'	Where the contact button links to.
className	string	= —	Additional classes for the section.