Accordion Component

A vertically stacked set of interactive headings that each reveal a section of content.

Accessible, follows WAI-ARIA Accordion pattern
Support for multiple accordion items open simultaneously
Smooth animations for expanding and collapsing content
Fully customizable styling

Installation

The Accordion component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the accordion in your project.

React TSX
1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/modern-ui/accordion"

React TSX
1<Accordion type="single" collapsible>
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Section 1</AccordionTrigger>
4    <AccordionContent>
5      Content for section 1
6    </AccordionContent>
7  </AccordionItem>
8</Accordion>

Examples

Basic Accordion

Multiple Accordion Items

Custom Styled Accordion

API Reference

Accordion

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Determines whether one or multiple items can be opened at the same time
`collapsible`	`boolean`	`false`	When `type` is `'single'`, allows closing content when clicking the trigger for an open item
`defaultValue`	`string \| string[]`	-	The default open item value(s)
`value`	`string \| string[]`	-	The controlled open item value(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Event handler called when the value changes
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	AccordionItem components

AccordionItem

Prop	Type	Default	Description
`value`	`string`	Required	A unique value for the item
`disabled`	`boolean`	`false`	Whether the item is disabled
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	AccordionTrigger and AccordionContent components

AccordionTrigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content of the trigger

AccordionContent

Prop	Type	Default	Description
`forceMount`	`boolean`	`false`	Force mounting when closed
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content to reveal

Is it accessible?

Is it styled?