Accordion

Ready

Collapsible sections to organize and hide content

Single Open Item

Only one item can be open at a time

Multiple Open Items

Multiple items can be open simultaneously

Large Variant

Increased size and weight for FAQ sections

Installation

npm install @radix-ui/react-accordion

Usage

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

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>
          Content for section 1
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Features

  • Keyboard navigation - Arrow keys, Home, End support
  • Smooth animations - 200ms accordion slide transitions
  • Single or multiple - Control how many items can be open
  • Collapsible - Optional collapse when clicking open item