build69
Sign inGet API key
build69  /  Components  /  Motion — Transitions & Decorative  /  Collapse

Collapse

v1.0.1Updated 21 Jul 2026

Animates its child between zero and its natural size, measuring real content with a ResizeObserver so no fixed height or width is needed. `orientation` switches between collapsing height (accordions) and width (sidebars), and the measurement re-runs when the content changes, so dynamic children stay correct. The only transition wrapper that animates layout rather than opacity or transform.

View source← Back to catalog

Preview

Live · 4 stories
Collapse Vertical And HorizontalOpen ↗
▸Why this is recommendedcollapseexpandaccordiontransition+7

Collapse — vertical and horizontal.

Recommended for+14
  • ✓Expanding an FAQ or accordion row on click
  • ✓Collapsing a filter sidebar to widen the content area
  • ✓Showing advanced settings under a 'more options' toggle
  • ✓Revealing extra detail rows inside a table or card
Tags+6
collapseexpandaccordiontransitionanimationheightsidebarmotionmuiverticalhorizontal
Features+4
  • Animates height or width between 0 and natural content size
  • Auto-measures content via ResizeObserver — no fixed size needed
  • Vertical (accordion) and horizontal (sidebar) orientations
  • Re-measures when children change
  • Configurable duration / delay / easing per instance
  • Respects prefers-reduced-motion (snaps, no animation)
  • data-orientation + data-state attributes for debugging
Not recommended for−2
  • ✕Simple show / hide with no size change (use Fade)
  • ✕Animating opacity or transform only (use Fade, Grow, or Zoom)
  • ✕Very long content, where animating height can cost layout performance

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Collapse" })

Usage

import { Collapse } from '@/components/motion/transitions/collapse';

<Collapse in={open} duration={200}>
  <p className="px-4 pb-4 text-sm">Shipping & returns details…</p>
</Collapse>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
in

Whether the child is expanded; drives the transition

booleanyes
orientation

Collapse height (vertical) or width (horizontal). Default 'vertical'

'vertical' | 'horizontal'—
duration

Duration in ms. Default 200

number—
delay

Delay in ms before the transition starts. Default 0

number—
easing

Timing function. Default 'ease-out'

'ease' | 'ease-out' | 'ease-in' | 'linear'—
unmountOnExit

Remove the child from the DOM after exit. Default false

boolean—
className

Extra classes merged onto the wrapper element

string—
style

Extra inline styles; transition-driven properties take precedence

React.CSSProperties—
ref

Ref to the outer wrapper element (React 19 ref-as-prop)

React.Ref<HTMLDivElement>—
children

Content to collapse / expand

React.ReactNodeyes

Related

Platform docsAll componentsSource files