Editorial

Editorial FAQ with topic filters.

Usage

import { FaqEditorial } from '@/components/blocks/faq-04'


<FaqEditorial />


// Your own copy, topics, and several answers open at once
<FaqEditorial
  intro="Everything you need to know before you ship."
  note="Can't find it? Our team answers every email."
  contactHref="/contact"
  type="multiple"
  defaultValue={['billing']}
  items={[
    { id: 'billing', topic: 'Billing', question: 'How does billing work?', answer: 'Monthly or yearly, cancel anytime.' },
    { id: 'setup', topic: 'Product', question: 'How long does setup take?', answer: 'About ten minutes.' },
  ]}
/>

Install

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

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

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

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

Source

Props

Editorial props
Prop	Type	Default	Description
title	string	= 'FAQ'	Large section heading with the animated underline.
intro	string	= Licensing and updates intro	First paragraph of the intro column.
note	string	= Contact invitation	Second intro paragraph. Pass an empty string to hide it.
contactLabel	string	= 'Contact us'	Label of the contact pill. Pass an empty string to hide it.
contactHref	string	= 'mailto:hello@example.com'	Where the contact pill links to.
items	{ id?: string; topic?: string; question: string; answer: ReactNode }[]	= Seven product questions	Questions to render. id identifies an item in value/defaultValue and falls back to the question text. topic groups items for the filter row.
showTopics	boolean	= true	Show the topic filter row when items span two or more topics.
allTopicsLabel	string	= 'All'	Label of the filter chip that shows every question.
type	'single' \| 'multiple'	= 'single'	Whether opening a question closes the others.
value	string[]	= —	Controlled list of open item ids.
defaultValue	string[]	= []	Item ids open on first render when uncontrolled.
onValueChange	(value: string[]) => void	= —	Called with the new list of open item ids whenever a question is toggled.
className	string	= —	Additional classes for the section. Other section props are forwarded.