Accordion
BaselineReveal supporting content one section at a time.
Example
Yes. You can update your preferences whenever you need to.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'panel-ui-kit/accordion'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Accordion type="single" collapsible defaultValue="preferences"> <AccordionItem value="preferences"> <AccordionTrigger>Can I change my preferences?</AccordionTrigger> <AccordionContent>Yes. Update them whenever you need to.</AccordionContent> </AccordionItem> </Accordion> </PanelUiTheme> );}When to use
Keep headings meaningful even while their content is collapsed. Use single/collapsible when one open section is enough.
Keyboard
Enter or Space toggles a section. Arrow keys move between triggers. Home and End jump to the first and last.
Properties
| Property | Values | Default |
|---|---|---|
type | single · multiple | Required |
collapsible | boolean for single | false |
value | string · string[] | Caller owned |
motion | full · reduced · off · object | Inherited |