Accordion
Accordion is a vertically stacked set of headings, each revealing a section of content when you open it.
Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/accordion.tsx@viliha/vui-react/accordionThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@viliha/vui-react/accordion";
export function Example() {
return (
<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
Built on the Radix Accordion primitive; all of its props pass through.
| Prop | Type | Default |
|---|---|---|
| type | "single" | "multiple" | — |
| collapsible | boolean | false |
| defaultValue | string | string[] | — |
| value | string | string[] | — |
| onValueChange | (value) => void | — |
Accordion props
It takes no props of its own. Everything you pass reaches the underlying AccordionPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.
AccordionContent props
It takes no props of its own. Everything you pass reaches the underlying AccordionPrimitive.Content primitive, so every attribute it accepts works here unchanged and nothing is invented on top.
AccordionItem props
It takes no props of its own. Everything you pass reaches the underlying AccordionPrimitive.Item primitive, so every attribute it accepts works here unchanged and nothing is invented on top.
AccordionTrigger props
It takes no props of its own. Everything you pass reaches the underlying AccordionPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.