This is the latest docs update, but there are missing components and blocks. If you wish to see the complete version, you can check it out at old docs.

Components

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

React component accordion not found in registry.

Make sure the component exists and the registry is up to date.

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

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.

On this page