Accordion
Accordion is a vertically stacked set of headings, each revealing a section of content when you open it.
Installation
pnpm add @viliha/vui-uiThen import from @viliha/vui-ui/accordion.
Usage
accordion-demo.tsx
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@viliha/vui-ui/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 | — |