FAQ — Accordion

FAQ section with accordion for expandable questions and answers.

FAQ accordion

Installation

npx shadcn@latest add @saastro/faq-01

Preview

Frequently Asked Questions

Everything you need to know about the blocks.

Source Code 

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { cn } from '@/lib/utils';

type FaqItem = {
  question: string;
  answer: string;
};

type Faq01Props = {
  title?: string;
  description?: string;
  items: FaqItem[];
  className?: string;
};

export function Faq01({
  title = 'Frequently Asked Questions',
  description,
  items,
  className,
}: Faq01Props) {
  return (
    <section className={cn('w-full px-6 py-24 md:py-32', className)}>
      <div className="mx-auto max-w-3xl">
        <div className="mb-12 text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
          {description && <p className="mt-4 text-lg text-muted-foreground">{description}</p>}
        </div>
        <Accordion type="single" collapsible className="w-full">
          {items.map((item, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="text-left text-base">{item.question}</AccordionTrigger>
              <AccordionContent className="text-muted-foreground">{item.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}

Registry Setup

Add the Saastro registry to your components.json: 

{
  "registries": {
    "@saastro": "https://ui.saastro.io/r/{name}.json"
  }
}
← CTA — Gradient Banner Testimonials — Card Grid →