Components
Accordion
A vertically stacked list of expandable items, perfect for organizing content.
Loading...
Installation
NPM packages are currently unstable and may cause issues. Use it at your own risk.
npm install @mijn-ui/react-accordionUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@mijn-ui/react-accordion";<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>Examples
Multi Accordion
Loading...
Accordion Variants
Loading...
Custom Icon
Loading...
Accordion Trigger With Icon
Loading...
Accordion Controlled
Loading...
Unstyled Accordion
Loading...
Accordion Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Accordion | Applies styles to the root Accordion component. |
item | AccordionItem | Styles the individual accordion item container. |
triggerWrapper | AccordionTrigger | Styles the wrapper around the trigger. |
trigger | AccordionTrigger | Applies styles to the actual trigger element. |
icon | AccordionTrigger | Styles the icon inside the trigger (if any). |
contentWrapper | AccordionContent | Styles the wrapper around the accordion content. |
content | AccordionContent | Applies styles to the actual content element. |