Fumadocs on TanStack Start

Overview

The Collapsible component provides an expandable/collapsible container for content. It includes smooth height-based animations and a toggle icon that rotates to indicate the open/closed state.

Import

import { Collapsible } from "@px-ui/core";

Usage

<Collapsible.Root className="w-md mx-auto">
      <Collapsible.Trigger className="text-ppx-sm">
        <Collapsible.ToggleIcon />
        <span>Show more details</span>
      </Collapsible.Trigger>
      <Collapsible.Panel>
        <div className="text-ppx-sm mt-2">
          <p>
            This is the collapsible content that can be expanded or collapsed.
            Click the trigger above to toggle visibility.
          </p>
        </div>
      </Collapsible.Panel>
    </Collapsible.Root>

Examples

With Custom Trigger

Use a custom styled trigger with the toggle icon to create an interactive header.

<Collapsible.Root>
  <Collapsible.Trigger className="group flex w-full items-center justify-between rounded-md border px-4 py-3 hover:bg-gray-50">
    <span className="font-medium">Advanced Settings</span>
    <Collapsible.ToggleIcon />
  </Collapsible.Trigger>
  <Collapsible.Panel>
    <div className="px-4 py-3">
      <p>Configure advanced options here.</p>
    </div>
  </Collapsible.Panel>
</Collapsible.Root>

Nested Collapsibles

Collapsible components can be nested to create hierarchical content structures.

<Collapsible.Root>
  <Collapsible.Trigger className="group flex items-center gap-2">
    <Collapsible.ToggleIcon />
    <span>Parent Section</span>
  </Collapsible.Trigger>
  <Collapsible.Panel>
    <div className="ml-4">
      <Collapsible.Root>
        <Collapsible.Trigger className="group flex items-center gap-2">
          <Collapsible.ToggleIcon />
          <span>Child Section</span>
        </Collapsible.Trigger>
        <Collapsible.Panel>
          <p>Nested content here.</p>
        </Collapsible.Panel>
      </Collapsible.Root>
    </div>
  </Collapsible.Panel>
</Collapsible.Root>

Controlled

Use the open and onOpenChange props to control the collapsible state externally.

Panel is closed

const [open, setOpen] = React.useState(false);

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger className="text-ppx-sm">
    <Collapsible.ToggleIcon />
    <span>Click here or use button above</span>
  </Collapsible.Trigger>
  <Collapsible.Panel>
    <div className="mt-2 text-ppx-sm text-gray-600">
      <p>This collapsible is controlled externally.</p>
    </div>
  </Collapsible.Panel>
</Collapsible.Root>

Anatomy

Components that make up Collapsible:

`Collapsible.Root`

The root container that manages the collapsible state and coordinates all child components.

Custom Props:

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

Inherited Props: Inherits all props from Base UI Collapsible.Root

`Collapsible.Trigger`

The interactive element that toggles the collapsible open/closed state. Should be used with group class to enable icon rotation.

Inherited Props: Inherits all props from Base UI Collapsible.Trigger

`Collapsible.Panel`

The container for content that expands and collapses with a smooth animation.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Collapsible.Panel

`Collapsible.ToggleIcon`

A chevron icon that rotates 90 degrees when the collapsible is open. Must be used inside a trigger with group class.

Note: This component has no props. It uses the parent trigger's group-data-[panel-open] state to rotate.

API Reference

See the Anatomy section above for detailed component props.

Collapsible

On this page