Accordion

A compound component for collapsible content sections. Supports both controlled and uncontrolled modes with smooth height animations. Built with Accordion, Accordion.Button, and Accordion.Panel sub-components.

Import

import { Accordion, AccordionButton, AccordionPanel } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Accordion defaultOpen>
  {({ open }) => (
    <>
      <Accordion.Button showChevron>
        <span>Section Title</span>
      </Accordion.Button>
      <Accordion.Panel className="pt-2">
        <p>Collapsible content goes here.</p>
      </Accordion.Panel>
    </>
  )}
</Accordion>

Controlled

const [open, setOpen] = useState(false);

<Accordion open={open} onOpenChange={setOpen}>
  <Accordion.Button showChevron>Toggle</Accordion.Button>
  <Accordion.Panel>Controlled content</Accordion.Panel>
</Accordion>

Props

Accordion

Prop	Type	Default	Description
`children`*	ReactNode \| ((props: { open: boolean }) => ReactNode)	-	Content or render function receiving the open state.
`defaultOpen`	boolean	`false`	Whether the accordion is open by default (uncontrolled).
`open`	boolean	-	Controlled open state.
`onOpenChange`	(open: boolean) => void	-	Callback when open state changes.
`className`	string	-	Additional CSS class for the wrapper element.

AccordionButton

Prop	Type	Default	Description
`children`*	ReactNode	-	Button content.
`showChevron`	boolean	`false`	Show a default chevron icon that rotates when open.
`className`	string	-	Additional CSS class for the button element.

AccordionPanel

Prop	Type	Default	Description
`children`*	ReactNode	-	Panel content revealed when the accordion is open.
`duration`	number	`200`	Animation duration in milliseconds.
`className`	string	-	Additional CSS class for the inner content wrapper.