Fluxo UIFluxo UIv0.1.1

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.

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.

bordered

Content for section A.

filled

Content for section A.

minimal

Content for section A.

separated

Content for section A.

<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.

Chevron on left

<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.