Components
Accordion
Collapsible content panels with animated open/close transitions.
Accordion
Collapsible content sections with smooth spring-based open/close animations. Built on Animate UI primitives.
Import
import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
A React component library with Synthwave Dark aesthetics.
.tsx
<Accordion defaultValue={['item-1']}>
<AccordionItem value="item-1">
<AccordionHeader>
<AccordionTrigger>What is mks-ui?</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>
A React component library with Synthwave Dark aesthetics.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionHeader>
<AccordionTrigger>How do I install it?</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>
Run: npm install @mks2508/mks-ui
</AccordionPanel>
</AccordionItem>
</Accordion>Multiple Open
Multiple Open
Content A
Content B
.tsx
<Accordion defaultValue={['a', 'b']}>
<AccordionItem value="a">
<AccordionHeader>
<AccordionTrigger>Section A</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>Content A</AccordionPanel>
</AccordionItem>
<AccordionItem value="b">
<AccordionHeader>
<AccordionTrigger>Section B</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>Content B</AccordionPanel>
</AccordionItem>
</Accordion>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | string[] | — | Initially open panel(s) |
value | string | string[] | — | Controlled open panel(s) |
onValueChange | (value) => void | — | Change handler |
variant | 'default' | 'bordered' | 'filled' | 'default' | Visual style |