Accordion

The Accordion component is a pixel-art styled expandable sections control.
It supports single or multiple open panels, configurable default state, disabled items, and custom styling — ideal for organizing content in collapsible sections with a retro aesthetic.

🚀 Usage

Basic Example

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3


import { Accordion } from "pixelartui-react";
 
<Accordion
    items={[
        { title: "Section 1", content: "Content for section 1" },
        { title: "Section 2", content: "Content for section 2" },
        { title: "Section 3", content: "Content for section 3" },
    ]}
    onChange={(openIndexes) => console.log(openIndexes)}
/>

Default Open

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3


<Accordion
    items={[
        { title: "Section 1", content: "Content for section 1" },
        { title: "Section 2", content: "Content for section 2" },
        { title: "Section 3", content: "Content for section 3" },
    ]}
    defaultOpenIndexes={[0]}
    onChange={(openIndexes) => console.log(openIndexes)}
/>

Allow Multiple

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3


<Accordion
    items={[
        { title: "Section 1", content: "Content for section 1" },
        { title: "Section 2", content: "Content for section 2" },
        { title: "Section 3", content: "Content for section 3" },
    ]}
    allowMultiple
    defaultOpenIndexes={[0, 2]}
    onChange={(openIndexes) => console.log(openIndexes)}
/>

With Disabled Item

Section 1▼

Content for section 1

Section 2 (Disabled)▼

Content for section 2

Section 3▼

Content for section 3


<Accordion
    items={[
        { title: "Section 1", content: "Content for section 1" },
        { title: "Section 2 (Disabled)", content: "Content for section 2", disabled: true },
        { title: "Section 3", content: "Content for section 3" },
    ]}
    onChange={(openIndexes) => console.log(openIndexes)}
/>

Custom Background

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3


<Accordion
    items={[
        { title: "Section 1", content: "Content for section 1" },
        { title: "Section 2", content: "Content for section 2" },
        { title: "Section 3", content: "Content for section 3" },
    ]}
    backgroundColor="#05EB57"
    onChange={(openIndexes) => console.log(openIndexes)}
/>

Styles

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3

Section 1▼

Content for section 1

Section 2▼

Content for section 2

Section 3▼

Content for section 3


<Accordion
    items={items}
    accordionStyle="dark"
    onChange={(openIndexes) => console.log(openIndexes)}
/>
 
<Accordion
    items={items}
    accordionStyle="light"
    onChange={(openIndexes) => console.log(openIndexes)}
/>

🔧 Props

Prop	Type	Default	Description
`items`	`AccordionItem[]`	—	Array of accordion items, each with `title`, `content`, and optional `disabled`.
`allowMultiple`	`boolean`	`false`	Allows multiple sections to be open simultaneously.
`defaultOpenIndexes`	`number[]`	`undefined`	Indices of sections that should be open by default.
`accordionStyle`	`"dark" \| "light"`	`undefined`	Applies a light or dark theme to the component.
`backgroundColor`	`string`	`undefined`	Overrides the default background color with a custom value.
`className`	`string`	`undefined`	Adds additional CSS classes for custom styling.
`onChange`	`(openIndexes: number[]) => void`	`undefined`	Callback fired when the set of open sections changes.