Accordion
Stacked sections, one or several open
A GPUix component is not a DOM node with a stylesheet: it is a tree of hosted elements the renderer lays out and paints, and the style is data the app computes.
Only the header rows are tab stops. Tab reaches the open section's content through its own controls, and a closed section's body is not mounted at all.
The panel grows to the height its body measures: it eases out on the way open and in on the way back, and the content fades in 20 ms later so the two do not race. The runtime has no transform, so the chevron cross-fades two marks instead of rotating.
ThemeFollow the platform
DensityComfortable
AccentIris
Build failuresImmediately
Weekly digestMondays
Installation
npx shadcn@latest add @sudokw/components-accordionimport { Accordion } from "@gpuixui/components";Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@gpuixui/components/accordion";
<Accordion type="single" collapsible defaultValue="surface">
<AccordionItem value="surface">
<AccordionTrigger>What is a GPUix surface?</AccordionTrigger>
<AccordionContent>
A tree of hosted elements the renderer lays out and paints.
</AccordionContent>
</AccordionItem>
<AccordionItem value="motion">
<AccordionTrigger>Why does the panel animate?</AccordionTrigger>
<AccordionContent>Its measured height is the tween target.</AccordionContent>
</AccordionItem>
</Accordion>;Composition
Accordion
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContentAPI reference
| Part | Prop | Type | Default |
|---|---|---|---|
Accordion | type | "single" | "multiple" | required |
Accordion | collapsible | boolean — single mode only | false |
Accordion | value | string | null (single) · ReadonlyArray<string> (multiple) | — ; a stored open set that is not a list means uncontrolled |
Accordion | defaultValue | the same union, for the uncontrolled form | null · [] — a stored default that is not a list opens no sections |
Accordion | onValueChange | (value: string | null) => void · (values: ReadonlyArray<string>) => void | — |
AccordionItem | value | string | required |
AccordionItem | disabled | boolean | false |
AccordionTrigger | style | StateStyle<{ open, disabled, focused }> | the recipe |
AccordionContent | children | ReactNode | — |
| any part | className | string | — |
Keyboard
- EnterSpace
- expands or collapses the focused section
- Arrow DownArrow UpCtrl+NCtrl+P
- moves to the next or previous trigger
- HomeEnd
- the first or last trigger
read from accordion.tsx
Edit this page on GitHubapps/docs/content/docs/components/accordion.mdx