Many UI surfaces need collapsible sections—FAQs, settings groups, documentation sidebars. Without a primitive, you build toggles by hand: manage openItems state in the parent, pass props down, handle a11y attributes, wire up CSS transitions, and add an icon. Every accordion reinvents the same logic, drifts in styling, and breaks when the design system changes.

Accordion is a controlled compound component with stable item values and named subcomponents—Accordion.Item, Accordion.Trigger, Accordion.Content. It supports two modes: type="single" (one section open at a time) or type="multiple" (many at once). Each item holds a stable value prop that identifies it in the open array, making it agent-bridgeable via data-react-fancy-accordion-* attributes.

Import from @particle-academy/react-fancy, wrap your items in <Accordion type="single" defaultOpen={["first"]}>, then place an Accordion.Item value="first" inside with Accordion.Trigger and Accordion.Content as children. Agents can read openItems and call toggle(value) via an MCP bridge using the stable value identifiers.