@usevyre/react @usevyre/vue

Accordion

Collapsible sections that show and hide content. Supports single and multiple open modes, controlled and uncontrolled state.

Single (default)

useVyre is an AI-native design system built to minimise hallucinations when AI writes frontend code. It ships tokens, React, and Vue 3 components.
 
import {
  Accordion, AccordionItem, AccordionTrigger, AccordionContent
} from "@usevyre/react";

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is useVyre?</AccordionTrigger>
    <AccordionContent>
      An AI-native design system built for minimal hallucinations.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Which frameworks?</AccordionTrigger>
    <AccordionContent>React and Vue 3.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple open

Set type="multiple" to allow lebih dari satu item terbuka sekaligus.

This item is open by default because its value is included in defaultValue.
Multiple items can be open simultaneously when type="multiple".
 
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  ...
</Accordion>

Accordion props

Props

Prop Type Default Description
type "single" | "multiple" "single" Allow one or multiple items open at once.
defaultValue string | string[] — Initially open item(s). Uncontrolled.
modelValue string | string[] — Controlled open state. Use v-model / value prop.
class string — Additional CSS class.

AccordionItem props

Props

Prop Type Default Description
value string — Unique identifier for this item.
class string — Additional CSS class.
← Components Alert →