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

1<Accordion defaultValue={['item-1']} multiple>
2  <AccordionItem value='item-1'>
3    <AccordionHeader></AccordionHeader>
4    <AccordionPanel></AccordionPanel>
5  </AccordionItem>
6  <AccordionItem value='item-2'>
7    <AccordionHeader></AccordionHeader>
8    <AccordionPanel></AccordionPanel>
9  </AccordionItem>
10  <AccordionItem value='item-3'>
11    <AccordionHeader></AccordionHeader>
12    <AccordionPanel></AccordionPanel>
13  </AccordionItem>
14</Accordion>

Props

Prop	Type	Default	Description
defaultValue	string	string[]	undefined
multiple	boolean	false	Whether the accordion allows multiple items to be active at the same time
children	ReactNode[]	undefined	The accordion items, including their headers and panels
className	string	''	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-Doc FAQs