Components
Accordion
A vertically stacked list of expandable items, perfect for organizing content.
Installation
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
Variants
outline
plain
solid
splitted
subtle
Sizes
sm
md
lg
Multi Accordion
Custom Icon
Unstyled Accordion
API Reference
Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "plain" | "solid" | "splitted" | "subtle" | "outline" | Visual style of the accordion. |
size | "sm" | "md" | "lg" | "md" | Size of the accordion items. |
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
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. |