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

What is a UI component?
A UI (User Interface) component is a modular, reusable element that serves a specific function within a graphical user interface. Examples include buttons, input fields, dropdown menus, sliders, and checkboxes.
Why are UI components important?
Key characteristics of UI components?

Multi Layout

What is a UI component?
Why are UI components important?
UI components promote consistency, efficiency, and scalability in software development. They allow developers to reuse code, maintain a consistent look and feel across an application, and easily make updates or modifications without affecting the entire system.
Key characteristics of UI components?
Magnified-DocFAQs