🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Accordion

A vertically stacked set of interactive headings that reveal or hide associated content

You can install ReacUI using npm or yarn: npm install reacui or yarn add reacui.

Installation

The Accordion component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Accordion component into your React component.

import { Accordion } from 'reacui';

Basic Accordion

A basic accordion component with a header and content section.

<Accordion>
  <Accordion.Item>
    <Accordion.Header>Section 1</Accordion.Header>
    <Accordion.Content>
      Content for section 1
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple Accordions

Multiple accordion items can be grouped together. By default, only one item can be opened at a time.

<Accordion>
  <Accordion.Item>
    <Accordion.Header>Section 1</Accordion.Header>
    <Accordion.Content>
      Content for section 1
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Section 2</Accordion.Header>
    <Accordion.Content>
      Content for section 2
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Section 3</Accordion.Header>
    <Accordion.Content>
      Content for section 3
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Customization

The Accordion component can be customized with different styles and behavior.

<Accordion variant="primary" allowMultiple>
  <Accordion.Item>
    <Accordion.Header>Customized Accordion</Accordion.Header>
    <Accordion.Content>
      This accordion has custom styling with primary color theme.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

API Reference

The following props are available for the Accordion components.

Component	Prop	Type	Default	Description
Accordion	allowMultiple	boolean	false	Allow multiple accordion items to be expanded at once.
Accordion	variant	string	'default'	Visual style variant: 'default', 'primary', etc.
Accordion.Item	className	string	''	Additional CSS classes to apply.
Accordion.Header	className	string	''	Additional CSS classes for the header.
Accordion.Content	className	string	''	Additional CSS classes for the content.