Playground
Every major prop, one live panel. Flip the controls, toggle the collapse, and watch the behavior change — the readout underneath shows the equivalent JSX for whatever configuration you've dialed in.
<button
aria-controls='playground-panel'
aria-expanded={open}
onClick={() => setOpen(!open)}
>
Toggle
</button>
<Collapsible
id='playground-panel'
open={open}
>
{children}
</Collapsible>Props sitting at their defaults are omitted.
What each control is doing
Each control maps to one prop, and each prop has a page that explains it properly.
open is the whole state model — the component never toggles itself, your useState does (controlled state). The direction switch swaps which grid track animates, 0fr to 1fr on rows or columns (how it works; horizontal collapse covers the layout gotchas).
Hide mode decides what "collapsed" means: remove takes collapsed content out of layout and the accessibility tree with display: none; hide keeps it rendered but invisible — visibility: hidden plus aria-hidden — and children stay mounted either way (hide modes). Duration lands as an inline transitionDuration style (custom transitions). The conditional-classes toggle adds open:/closed:-prefixed classes that fade the content in sync with the collapse (conditional classes).
You can swap direction or hide mode while the panel is open — they resolve to different class names on the container, so the change takes effect on the next transition. No remount, no teardown.
Reading the JSX
The readout omits props sitting at their defaults: no direction means 'y', no hideMode means 'remove', and no transitionDuration means the stylesheet's 500ms. The trigger is part of the output too — aria-controls pointing at the panel's id and a live aria-expanded are the accessibility contract, and the component warns in dev if the trigger is missing.