AstraUI

Components

Accordion

A vertically stacked set of interactive headings that expand to reveal associated content.

Default Accordion

Default Accordion with Subtitle

Accordion with Multiple Open

Split Accordion

Props

Name	Type	Default	Description
children	ReactNode	-	The AccordionItem components to be rendered.
className	string	-	Additional classes for styling the Accordion container.
itemClassName	string	-	Additional classes for styling each AccordionItem.
border	string	-	Border style for the accordion items.
selectionMode	single, multiple	single	Determines if multiple items can be open simultaneously.
variant	default, split	default	Determines the layout style of the accordion.

Best Practices

Use accordions to organize content in a compact way, allowing users to expand sections as needed.
Ensure that the content of accordion items are descriptive and concise.
Use the multiple selection mode when users might need to compare information across different sections.
Use the split variant when you want to visually separate accordion items, especially for longer lists.