---
title: useAnimatedAutoHeight
description: Smoothly animate a container's height as its content grows or shrinks.
icon: move-vertical
---

<PoweredBy packages={[
  { name: 'motion', url: 'https://motion.dev/' },
]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/use-animated-auto-height
```

`useAnimatedAutoHeight` returns a callback ref. Attach it to an element and, while enabled, the hook watches that element with a `ResizeObserver` and animates its `height` between measured sizes whenever the content changes — no fixed pixel values or manual measuring required. It ignores the height echoes it sets itself during an animation, so it won't fight its own updates.

Because the ref is state-backed, the effect re-runs once the node attaches — which makes it safe to use on elements that mount lazily inside a portal.

## Usage

```tsx showLineNumbers
import { useAnimatedAutoHeight } from "@/hooks/use-animated-auto-height";

function ExpandingPanel({ open }: { open: boolean }) {
  // `enabled` guards the animation — e.g. disable it while the panel is closed.
  const setNode = useAnimatedAutoHeight<HTMLDivElement>(open);

  return (
    <div ref={setNode} className="overflow-hidden">
      {open ? <TallContent /> : null}
    </div>
  );
}
```

## API

### `useAnimatedAutoHeight<T>(enabled)`

| Parameter | Type      | Description                                                                    |
| --------- | --------- | ------------------------------------------------------------------------------ |
| `enabled` | `boolean` | When `false`, no observer is attached and the element's inline height is reset. |

**Returns** `(node: T \| null) => void` — a callback ref to attach to the element whose height should animate.

:::info
The hook sets and clears an inline `height` style. Pair the animated element with `overflow: hidden` so content doesn't spill during the transition.
:::