Collapsible

A high-quality, styled React collapsible component built with @base-ui/react that displays a panel controlled by a button.

The Collapsible component displays a collapsible panel controlled by a toggle button with height animations.

Usage

import { Collapsible } from "@/components/ui/collapsible";

export function ExampleCollapsible() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle Recovery Keys</Collapsible.Trigger>
      <Collapsible.Panel>
        <div>alien-bean-pasta</div>
        <div>wild-irish-burrito</div>
        <div>horse-battery-staple</div>
      </Collapsible.Panel>
    </Collapsible.Root>
  );
}

Preview

Anatomy

import { Collapsible } from "@base-ui/react/collapsible";

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Panel />
</Collapsible.Root>;

API Reference

Collapsible.Root Props

Prop	Type	Default	Description
`open`	`boolean`	`undefined`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Event handler called when panel opens or closes.
`disabled`	`boolean`	`false`	Disables user interaction.