Skip to content
RefineUI

Collapsible

Show and hide a section from a trigger.

Order #4189

StatusShipped

Shipping address

100 Market St, San Francisco

Items

2x Studio Headphones

Installation

Section titled “Installation”
npm install @refineui/react @refineui/tokens

Usage

Section titled “Usage”
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@refineui/react";


<Collapsible defaultOpen>
  <CollapsibleTrigger>Details</CollapsibleTrigger>
  <CollapsibleContent>
    Hidden until the trigger opens it.
  </CollapsibleContent>
</Collapsible>

open and onOpenChange make it controlled. CollapsibleTrigger renders a Button ghost by default (layout, size, and other Button props pass through); use asChild to merge onto a custom child. Closed content stays mounted and is hidden.