Accordion

Height-animated disclosure with a diamond marker that morphs between states.

Live — this one is real

Usage

import { Accordion, AccordionItem } from "mizu-ui";

export function Faq() {
  return (
    <Accordion>
      <AccordionItem value="a" title="First question">
        The answer, revealed with a 450ms expo height animation.
      </AccordionItem>
    </Accordion>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect composite/Accordion.tsx

Source is included in the npm package under src/composite/Accordion.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
allowMultiple	boolean	false	Allow several items open at once.
value	string	—	Item identity.
title	string	—	Item heading.

Accessibility

Native button with aria-expanded and aria-controls; panel is a labelled region.

Motion

450ms expo height animation; the marker rotates 45°→0° and scales down when open.

Works alongside

Tabs Dialog Nav