Many UIs need collapsible navigation, settings panels, or toolbar clusters that adapt fluidly between horizontal and vertical layouts. Without a dedicated solution, each accordion-like UI requires hand-rolled toggle state, manual trigger rendering, and inconsistent chevron behavior across orientations—resulting in class-soup and bugs when layout direction changes mid-implementation.

AccordionPanel is a controlled compound component managing multiple collapsible sections via stable id props and value/onValueChange state. Sections compose three subcomponents—AccordionPanel.Section (the wrapper), AccordionPanel.Trigger (default chevron that adapts to open/closed state and orientation), and AccordionPanel.Content (renders children only when open). Sections can be pinned (never collapse), unstyled for full-bleed layouts, or customized via render-prop triggers. The root accepts orientation="horizontal" or orientation="vertical" to control layout direction and trigger chevron angles.

Import AccordionPanel from @particle-academy/react-fancy, pass a value array of open section IDs and an onValueChange callback, then compose sections with stable id props. For a simple menu, use <AccordionPanel value={open} onValueChange={setOpen}><AccordionPanel.Section id="home"><AccordionPanel.Trigger /><AccordionPanel.Content>Home content</AccordionPanel.Content></AccordionPanel.Section></AccordionPanel>.