Components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@murasakijs/ui";<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>API Reference
Accordion
| Prop | Type | Default |
|---|---|---|
type | "single" | "multiple" | — (required) |
collapsible | boolean (only when type="single") | false |
value / defaultValue | string (single) or string[] (multiple) | — |
onValueChange | (value) => void | — |
Other subcomponents
| Component | Description |
|---|---|
AccordionItem | A single collapsible section. Accepts value (required). |
AccordionTrigger | The clickable heading; renders a rotating chevron automatically. |
AccordionContent | The collapsible panel, animated in/out via CSS. |
The disclosure state, keyboard navigation, and ARIA relationships are provided
by React Aria Components. Murasaki preserves the value-based API.