# Collapsible

Host: Base UI. Path: transitions. Preset: `collapse`. Built against [@base-ui/react 1.5.0](https://www.npmjs.com/package/@base-ui/react/v/1.5.0).

Same preset name as Radix, different mechanism underneath. The consumer never picks which. This is the host that made the height version fail everywhere but Chromium: its panel sits at height auto while open and idle, and auto to zero cannot interpolate.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Base UI documentation](https://base-ui.com/react/components/collapsible)

The same component in other hosts: [Radix UI](/radix/collapsible.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
Collapsible.Root
  Collapsible.Trigger
  Collapsible.Panel  data-motion="collapse"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-open / data-closed, plus data-ending-style` |
| easeful matches | `[data-motion~="collapse"][data-ending-style] { grid-template-rows: 0fr }` |
| what runs | `transition: grid-template-rows 150ms` |
| you write | `<Collapsible.Panel data-motion="collapse" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `collapse` | the default |
| `fade` | [fade](/base-ui/collapsible#motion=fade) |
| `scale-fade` | [scale-fade](/base-ui/collapsible#motion=scale-fade) |
| `slide-up` | [slide-up](/base-ui/collapsible#motion=slide-up) |
| `fade collapse` | [fade collapse](/base-ui/collapsible#motion=fade%20collapse) |
| `fade slide-up` | [fade slide-up](/base-ui/collapsible#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/base-ui/collapsible#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/base-ui/collapsible.tsx`

```tsx
"use client"

import { Collapsible } from "@base-ui/react/collapsible"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiCollapsible({ motion }: DemoProps) {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger className="btn">Toggle panel</Collapsible.Trigger>
      <Collapsible.Panel data-motion={motion}>
        <div className="panel" style={{ marginTop: 12 }}>
          <p className="panel__body">
            The same preset as Radix, on the transition path instead of the keyframe one. The
            single child is what gets clipped.
          </p>
        </div>
      </Collapsible.Panel>
    </Collapsible.Root>
  )
}
```