Components

Accordion

DocsApi ReferenceStyle Source

A vertically stacked list of expandable items, perfect for organizing content.

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.
npm install @mijn-ui/react-accordion

Usage

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

Variants

There are three variants available for the accordion component: default, outlined, and filled.

Outlined

Filled

Custom Icon

Unstyled Accordion

Accordion Style Slots

Slot NameTargeted ComponentPurpose
baseAccordionApplies styles to the root Accordion component.
itemAccordionItemStyles the individual accordion item container.
triggerWrapperAccordionTriggerStyles the wrapper around the trigger.
triggerAccordionTriggerApplies styles to the actual trigger element.
iconAccordionTriggerStyles the icon inside the trigger (if any).
contentWrapperAccordionContentStyles the wrapper around the accordion content.
contentAccordionContentApplies styles to the actual content element.
Edit on GitHub

Previous

Responsive Variants

Next

Alert

On this page