Accordion

A flexible multi-expand accordion component with smooth animations and customizable styling. Built with React, TypeScript, and Tailwind CSS for modern web applications. Perfect for FAQs, content organization, and collapsible sections.

Installation

npx uilayouts@latest add accordion

Structure

<Accordion defaultValue={['item-1']} multiple>
  <AccordionItem value='item-1'>
    <AccordionHeader></AccordionHeader>
    <AccordionPanel></AccordionPanel>
  </AccordionItem>
  <AccordionItem value='item-2'>
    <AccordionHeader></AccordionHeader>
    <AccordionPanel></AccordionPanel>
  </AccordionItem>
  <AccordionItem value='item-3'>
    <AccordionHeader></AccordionHeader>
    <AccordionPanel></AccordionPanel>
  </AccordionItem>
</Accordion>

Props

PropTypeDefaultDescription
defaultValuestringstring[]undefined
multiplebooleanfalseWhether the accordion allows multiple items to be active at the same time
childrenReactNode[]undefinedThe accordion items, including their headers and panels
classNamestring''Optional CSS class for styling the accordion wrapper

Example

Single Layout

Multi Layout

Magnified-DocFAQs