Installation
One component, one stylesheet, one peer dependency. react-collapsible ships ESM and CJS with TypeScript declarations included — install the package, import the styles once, and you're set.
Install
Pick your package manager:
bun add @westopp/react-collapsible
pnpm add @westopp/react-collapsible
npm install @westopp/react-collapsible
yarn add @westopp/react-collapsible
Import the stylesheet
Every collapse and every animation lives in the package stylesheet — the component just toggles classes on it. Import it once at your app root, alongside your first component import:
import { Collapsible } from '@westopp/react-collapsible' import '@westopp/react-collapsible/styles.css'
Peer dependency
react-collapsible expects React 18 or newer already in your project. It's a peer dependency, not bundled, so you control the version and avoid duplicate copies of React in your tree. The only runtime dependency is clsx.
Browser support
The animation rides on two recent CSS features: @starting-style (the entry transition from display: none) and transition-behavior: allow-discrete (so display and visibility can participate in transitions). Both land in:
| Browser | Version | | --- | --- | | Chrome | 117+ | | Edge | 117+ | | Safari | 17.4+ | | Firefox | 129+ |
Older browsers degrade gracefully: the open/close logic is plain class toggling, so panels still show and hide correctly — they snap into place instead of animating.
TypeScript
Declarations ship with the package — no @types install. CollapsibleProps is exported from the root: the component's own props (id, open, direction, …) are fully typed, and everything else passes through as standard div props, so data-* attributes, event handlers, and style type-check as they would on a <div>.
The full prop list lives in the API reference.
What's next
That's the install. Head to Getting started for the 5-minute tour: a trigger button, the open prop, and your first animated panel.