AccordionGroup

Updated: June 30, 2026

A container component that groups multiple Accordion components together with consistent styling and dividers between each item. It's useful for creating FAQ sections, navigation menus, and other grouped collapsible content. AccordionGroup applies smart border-radius: the first item gets top-radius, the last item gets bottom-radius, and middle items have no radius — creating a cohesive grouped appearance.

AccordionGroup

First item

Second item

Third item

<AccordionGroup
  items={[
    {
      title: "First Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the first item
        </Text>
    },
    {
      title: "Second Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the second item
        </Text>
    },
    {
      title: "Third Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the third item
        </Text>
    }
  ]}
/>

API reference

Prop	Type	Default
itemsrequired	AccordionItem[]	—
size	lms	m
autoCollapse Close the open item when another one is opened.	boolean	true
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

AccordionItem

Prop	Type	Default
title	ReactNode	—
content	ReactNode	—
headerProps	FlexProps	—

ComponentsAccordion

ComponentsAnimation

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club