react-collapsible/Overview
react-collapsible · v1.0.0 · Stable

The CSS-first
collapsible
for React.

An animated collapsible built on CSS Grid transitions. No height measuring, no animation loops — the browser does the motion, React flips a boolean. Two axes, two hide modes, accessibility wired in.

Get startedbun add @westopp/react-collapsible
Height measurements0JSGrid tracks animate from 0fr to 1fr. Content height is the browser's problem, not yours.
$bun add @westopp/react-collapsible
Requires React 18+
Animation without measurement
grid-template · 0fr → 1fr · @starting-style
The grid track animates, the content follows. No refs, no ResizeObserver, no scrollHeight.
Entry animations on first open via @starting-style.
display and visibility transition cleanly with allow-discrete.
How it works
Two ways to hide
remove · display:none — hide · visibility:hidden
remove takes collapsed content out of the document flow entirely.
hide keeps it in the DOM — form state, focus targets, and layout survive.
Both animate identically. Pick per use case with one prop.
01

Both axes

Vertical for accordions and disclosure panels, horizontal for sidebars and drawers. Same component, one direction prop.

Horizontal collapse →
02

Conditional classes

Prefix any class with open: or closed: and it applies only in that state. Cross-fade opacity, swap borders, rotate chevrons — without wiring state into your CSS.

Conditional classes →
03

Accessible by default

Built around the aria-controls / aria-expanded contract, with aria-hidden managed for you and a dev-mode warning when the trigger wiring is missing.

Accessibility →

Collapse something in 5 minutes

A walkthrough from install to an animated, accessible disclosure panel.

Start the tutorial
NextWhy react-collapsible →