Accordion with single/multiple open modes, buttery grid-row height animation, chevron/plus icons, and bordered/separated/filled/ghost variants.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-accordion/latest/gs-accordion.min.css"> <script src="https://cdn.get-set.it/gs-accordion/latest/gs-accordion.min.js"></script>
import Accordion from '@get-set/gs-accordion'; export default function App() { return ( <Accordion> <div className="content">Your Accordion content</div> </Accordion> ); }
A zero-dependency, fully themeable accordion with buttery height animations.
Yes — switch the mode option between single and multiple.
Variants, icons, themes and an accent color are all one option away.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| items | GSAccordionItem[] | none | Config-array items. When provided the accordion renders its own markup. If omitted, items are read from the container's child markup (header + panel pairs). |
| mode | GSAccordionMode | 'single' | `single` = one open at a time; `multiple` = independent. Default: 'single'. |
| defaultOpen | GSAccordionItemKey | GSAccordionItemKey[] | none | Items open on init. Array of indices or keys, or a single index/key. |
| collapsible | boolean | true | In `single` mode, allow the open item to be collapsed (all closed). Ignored in `multiple` mode (always collapsible). Default: true. |
| animation | boolean | true | Smooth height-slide + fade on open/close. `false` disables all motion. Default: true. |
| animationDuration | number | 300 | Slide/fade duration in ms. Default: 300. |
| animationEasing | string | 'cubic-bezier(0.4, 0, 0.2, 1)' | CSS easing applied to the height slide. Default: cubic-bezier(.4,0,.2,1). |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'. |
| icon | GSAccordionIcon | 'chevron' | Header indicator glyph. `false` hides it. Default: 'chevron'. |
| iconPosition | GSAccordionIconPosition | 'right' | Which side the icon sits on (RTL-aware). Default: 'right'. |
| iconRotate | boolean | true | Rotate/morph the icon when its item opens. Default: true. |
| customIcon | string | none | Custom icon HTML (used when `icon: 'custom'` and per-item icon is unset). |
| variant | GSAccordionVariant | 'bordered' | Visual variant of the shell. Default: 'bordered'. |
| size | GSAccordionSize | 'md' | Size preset. Default: 'md'. |
| theme | GSAccordionTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gsa-accent). |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| className | string | none | Extra class name applied to the accordion root. |
grid-template-rows animation with no snap.
Exclusive or multi-open panel modes.
Chevron or plus/minus indicators.
Bordered, separated, filled and ghost.