Accordion

A flexible accordion component for organizing content into collapsible panels. Supports multiple variants, sizes, color schemes, and both single and multiple open modes. Perfect for FAQs, content sections, and collapsible lists.

Basic Usage

What is uiplex?

uiplex is a modern React component library built with TypeScript, featuring beautiful, accessible, and customizable UI components.

How do I install uiplex?

Is uiplex free to use?

import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from 'uiplex';

<Accordion defaultIndex={0}>
  <AccordionItem index={0}>
    <AccordionButton index={0}>What is uiplex?</AccordionButton>
    <AccordionPanel index={0}>
      uiplex is a modern React component library...
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem index={1}>
    <AccordionButton index={1}>How do I install uiplex?</AccordionButton>
    <AccordionPanel index={1}>
      You can install uiplex using npm, yarn, or pnpm...
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Variants

Default

Default Variant

This is the default variant with a simple border between items.

Item 2

Bordered

Bordered Variant

This variant has borders around each item.

Item 2

Filled

Filled Variant

This variant has a filled background for each item.

Item 2

<Accordion variant="default">...</Accordion>
<Accordion variant="bordered">...</Accordion>
<Accordion variant="filled">...</Accordion>

Sizes

Small

Small Size

This is a small sized accordion.

Medium

Medium Size

This is a medium sized accordion (default).

Large

Large Size

This is a large sized accordion.

<Accordion size="sm">...</Accordion>
<Accordion size="md">...</Accordion>
<Accordion size="lg">...</Accordion>

Color Schemes

Blue

Blue color scheme

Item 2

Green

Green color scheme

Item 2

Red

Red color scheme

Item 2

Purple

Purple color scheme

Item 2

<Accordion colorScheme="blue">...</Accordion>
<Accordion colorScheme="green">...</Accordion>
<Accordion colorScheme="red">...</Accordion>
<Accordion colorScheme="purple">...</Accordion>
<Accordion colorScheme="yellow">...</Accordion>
<Accordion colorScheme="gray">...</Accordion>

Multiple Items Open

Item 1

Multiple items can be open at the same time when allowMultiple is enabled.

Item 2

This item is also open by default.

Item 3

<Accordion allowMultiple defaultIndex={[0, 1]}>
  <AccordionItem index={0}>
    <AccordionButton index={0}>Item 1</AccordionButton>
    <AccordionPanel index={0}>Content 1</AccordionPanel>
  </AccordionItem>
  <AccordionItem index={1}>
    <AccordionButton index={1}>Item 2</AccordionButton>
    <AccordionPanel index={1}>Content 2</AccordionPanel>
  </AccordionItem>
</Accordion>

With Custom Icons

Information

This accordion item has a custom icon on the left.

Warning

Success

import { Info, AlertCircle } from 'feather-icons-react';

<Accordion>
  <AccordionItem index={0}>
    <AccordionButton
      index={0}
      icon={<Info size={16} />}
      iconPosition="left"
    >
      Information
    </AccordionButton>
    <AccordionPanel index={0}>Content</AccordionPanel>
  </AccordionItem>
</Accordion>

Controlled Mode

Controlled Item 1

This accordion is controlled. Open indexes: 0

Controlled Item 2

Controlled Item 3

const [openIndexes, setOpenIndexes] = useState<number[]>([0]);

<Accordion
  index={openIndexes}
  onChange={setOpenIndexes}
  allowMultiple
>
  <AccordionItem index={0}>
    <AccordionButton index={0}>Item 1</AccordionButton>
    <AccordionPanel index={0}>Content</AccordionPanel>
  </AccordionItem>
</Accordion>

Disable Toggle

Item 1 (Cannot Close)

When allowToggle is false, you cannot close an open item by clicking it again. You can only open other items.

Item 2

Item 3

<Accordion defaultIndex={0} allowToggle={false}>
  <AccordionItem index={0}>
    <AccordionButton index={0}>Item 1</AccordionButton>
    <AccordionPanel index={0}>Content</AccordionPanel>
  </AccordionItem>
</Accordion>

API Reference

Accordion Props

Prop	Type	Default	Description
defaultIndex	number \| number[]	-	Initial open index(es) for uncontrolled mode
index	number \| number[]	-	Controlled open index(es)
onChange	(indexes: number[]) => void	-	Callback when open indexes change
allowMultiple	boolean	false	Allow multiple items to be open simultaneously
allowToggle	boolean	true	Allow closing an open item by clicking it again
variant	"default" \| "bordered" \| "filled"	"default"	Visual variant of the accordion
size	"sm" \| "md" \| "lg"	"md"	Size of the accordion buttons
colorScheme	"blue" \| "green" \| "red" \| "yellow" \| "purple" \| "gray"	"blue"	Color scheme for active state
className	string	-	Additional CSS class name
style	React.CSSProperties	-	Inline styles

AccordionItem Props

Prop	Type	Default	Description
index	number	0	Unique index for this item
className	string	-	Additional CSS class name
style	React.CSSProperties	-	Inline styles

AccordionButton Props

Prop	Type	Default	Description
index	number	0	Index of the associated item
icon	React.ReactNode	-	Custom icon element
iconPosition	"left" \| "right"	"right"	Position of the icon
className	string	-	Additional CSS class name
style	React.CSSProperties	-	Inline styles

AccordionPanel Props

Prop	Type	Default	Description
index	number	0	Index of the associated item
className	string	-	Additional CSS class name
style	React.CSSProperties	-	Inline styles

Keyboard Navigation

Enter / Space: Toggle the focused accordion item