Collapsible

A collapsible panel controlled by a button trigger.

API Reference

Preview

Installation

Usage

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>

API Reference

Collapsible

Root component. Alias for Collapsible.Root from Base UI.

CollapsibleTrigger

Trigger button that toggles the collapsible panel. Styled wrapper for Collapsible.Trigger from Base UI.

CollapsiblePanel

Collapsible content panel. Styled wrapper for Collapsible.Panel from Base UI with animated height transitions.