Component

Collapsible

A compound component for toggling content visibility. Supports controlled and uncontrolled modes. Uses the headless @refraction-ui/collapsible core.

Examples

Click the trigger to toggle content. The second section starts open by default.

This section starts open by default using the defaultOpen prop.

Installation

$pnpm add @refraction-ui/react-collapsible

Usage

tsx

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@refraction-ui/react-collapsible'

export function MyComponent() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Toggle content</CollapsibleTrigger>
      <CollapsibleContent>
        <p>Hidden content revealed on click.</p>
      </CollapsibleContent>
    </Collapsible>
  )
}

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	--	Callback when open state changes.
`disabled`	`boolean`	`false`	Disables the collapsible.
`className`	`string`	--	Additional CSS classes.