HelpTribe.

Accordion

Collapsible content sections. Supports single or multiple open panels with smooth transitions.

Installation

$ npx shadcn@latest add accordion

Preview

Usage (React/TSX)

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"

export default function FAQ() {
  return (
    <Accordion type="single">
      <AccordionItem value="q1">
        <AccordionTrigger value="q1">What industries?</AccordionTrigger>
        <AccordionContent value="q1">
          Finance, hospitality, real estate, automotive, and more.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="q2">
        <AccordionTrigger value="q2">Remote work?</AccordionTrigger>
        <AccordionContent value="q2">
          Yes, we're remote-first with 4 global offices.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props

PropTypeDefaultDescription
type"single" | "multiple""single"Whether one or multiple items can be open.
childrenReactNodeβ€”AccordionItem children.