Collapsible

Single-item expand/collapse with smooth height animation. Lighter than Accordion when you just need one toggleable section — sidebar groups, advanced-options panels, FAQ items that don't need single-open enforcement.

Every primitive — Dialog, Popover, Combobox, DataTable, Toast — is implemented in this repo. No headless library to upgrade alongside React, no version mismatch when you bump.

Compatible by design. Tokens are plain CSS custom properties, every primitive accepts className and forwards refs.

GSAP is a peer dependency — you only pay the bundle cost when you import a motion primitive (Tilt, Ripple, ScrollReveal, etc.).

Usage

import { Collapsible } from '@bwo-ui/react';

<Collapsible trigger={<span>Advanced options</span>}>
  <Field label="Custom domain" />
  <Field label="Build command" />
</Collapsible>

// Controlled
const [open, setOpen] = useState(false);
<Collapsible trigger={...} open={open} onOpenChange={setOpen}>
  …
</Collapsible>

Props

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Trigger row content rendered inside the button.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Fires when the state changes.
`duration`	`number`	`220`	Transition duration in ms.