Fluxo UIFluxo UIv0.4.93

Accordion

Multi-item collapsible panel group with single or multi expand modes, five visual variants, and full keyboard navigation.

Basic Usage

Basic Accordion

Single-open mode.

FluxoUI is a React component library built with TypeScript, Vite, and Tailwind CSS v4. It ships tree-shakable components with TypeScript types, hooks, icons, and a custom state-management store.

Install via npm: `npm install fluxo-ui`. Then import the components you need and include the stylesheet once at your app root.

FluxoUI uses CSS custom properties for all themeable values. Five brand themes plus dark mode are available out of the box via body classes.
import { Accordion } from 'fluxo-ui';

<Accordion items={items} mode="single" defaultOpen={['overview']} />

Variants

Variants

Five visual styles for different contexts.

default

Content for section A.

Content for section B.

Content for section C.
bordered

Content for section A.

Content for section B.

Content for section C.
filled

Content for section A.

Content for section B.

Content for section C.
minimal

Content for section A.

Content for section B.

Content for section C.
separated

Content for section A.

Content for section B.

Content for section C.
<Accordion items={items} variant="bordered" />
<Accordion items={items} variant="filled" />
<Accordion items={items} variant="separated" />

Modes & Chevron Position

Multi Mode & Chevron Position

Multi expand and left chevron.

Multi mode

Yes — set mode="multi" to allow any number of panels open at once.

Arrow up/down moves focus between headers, Home/End jump to the ends, Space/Enter toggles a panel.

Yes — set disabled on the item. The header becomes un-focusable and un-togglable.
Chevron on left

Yes — set mode="multi" to allow any number of panels open at once.

Arrow up/down moves focus between headers, Home/End jump to the ends, Space/Enter toggles a panel.

Yes — set disabled on the item. The header becomes un-focusable and un-togglable.
<Accordion items={items} mode="multi" defaultOpen={['q1', 'q2']} />
<Accordion items={items} mode="single" chevronPosition="left" />

Import

import { Accordion } from 'fluxo-ui';
import type { AccordionProps, AccordionItemDef } from 'fluxo-ui';

Props

items
AccordionItemDef[]

Array of { id, title, content, icon?, disabled? }.

mode
'single' | 'multi'"'single'"

Whether multiple panels can be open at once.

variant
'default' | 'bordered' | 'filled' | 'minimal' | 'separated'"'default'"

Visual style.

chevronPosition
'left' | 'right'"'right'"

Where the expand chevron appears in the header.

defaultOpen
string[]

Initial open item ids (uncontrolled).

value
string[]

Controlled open item ids.

onChange
(openIds: string[]) => void

Called when the set of open items changes.

ariaLabel
string

Accessible name for the accordion if needed.

headingLevel
1 | 2 | 3 | 4 | 5 | 6"3"

Heading level used for each item title (h1-h6) so the page heading outline is correct.

unmountOnCollapse
boolean"false"

Unmount panel content when collapsed (useful for heavy content that should not stay in the DOM).

className
string

Additional CSS class for the accordion wrapper.