easeul

Base UITransitions

Collapsible

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.

Base UI documentation1.5.0

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.

withoutno attribute
with easefuldata-motion="collapse"
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" />

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.

  1. Collapsible.Root
  2. Collapsible.Trigger
  3. Collapsible.Paneldata-motion="collapse"

Source

apps/docs/components/demos/base-ui/collapsible.tsx
20 lines
"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>
  )
}
The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.