Search for a command to run...
Smoothly animates a container's height as its contents change. Pair with conditional rendering (or a controlled `isVisible` prop) to avoid jump-cuts when a section expands or collapses.
Two-part primitive: the outer AnimateHeight is a layout slot; the inner AnimateHeightContent measures its child and tweens the container height. Toggling isVisible plays an opacity fade alongside the height tween so the content fades + collapses together.
AnimateHeightOuter layout slot. Accepts every native <div> prop and renders a data-slot="animate-height" div. Use to scope styles or attach aria-* to the animated region.
AnimateHeightContentThe measured surface. Wraps content in a motion.div that animates height against the measured bounds of its child. Forwards every Motion <motion.div> prop.
| Prop | Type | Default | Description |
|---|---|---|---|
isVisible | boolean | true | When false, the content fades out and the container collapses to 0. When true, content fades in and the container grows to the measured height. |
The height tween runs 250ms with easeInOut. The opacity fade runs 150ms — slightly faster so the content reads as a single motion rather than two.
Use AnimateHeight when a section's body changes size in response to state — expandable rows,
conditional details, reveal-on-toggle. The smooth tween prevents the surrounding layout from
jump-cutting.
Drive visibility with isVisible rather than conditionally rendering AnimateHeightContent.
The component needs to stay mounted to measure its child; toggling isVisible is what plays the
exit animation.
Use AnimateHeight for an Accordion. Accordion already has a height-tween animation driven
by Radix's --radix-accordion-content-height CSS variable — AnimateHeight is for one-off
sections, not accordion items.
Animate height on tall content that streams in. The measurement runs every render — long lists or chat streams will retrigger the tween on each item and feel jittery.