Navigation
Accordion
A compound expand/collapse group supporting single or multiple open sections. Panels stay mounted and are hidden with CSS, so transitions are simple to add.
AccordionAccordionItemAccordionTriggerAccordionContentPreview
Free shipping on orders over $50, 3–5 business days.
30-day returns on unworn items with original tags.
Usage
tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@vesture/react";
<Accordion type="single" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content for section 1.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Section 2</AccordionTrigger>
<AccordionContent>Content for section 2.</AccordionContent>
</AccordionItem>
</Accordion>Behavior
- "single" mode allows collapsing the only open item back to none. "multiple" toggles membership in an array.
- Content panels always mount — visibility is driven by data-open, not conditional rendering.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Required. Selection mode. |
| value / defaultValue | string | null (single) · string[] (multiple) | — | Controlled / uncontrolled open value(s). |
| onValueChange | (value) => void | — | Fires on toggle. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Required. Unique key for the item. |