Delphi Design

Smoothly animate height transitions when content changes.

Demo

Toggle content

Want to read the rest of this article?

Usage

import { AnimateHeight, Button } from "@delphi/ui";

export function Example() {
  const [expanded, setExpanded] = useState(false);

  return (
    <AnimateHeight.Root className="rounded-2xl border p-5">
      <Button onClick={() => setExpanded(!expanded)}>
        Read {expanded ? "less" : "more"}
      </Button>
      <AnimateHeight.Content isVisible={expanded}>
        <p>Expandable content goes here.</p>
      </AnimateHeight.Content>
    </AnimateHeight.Root>
  );
}

API Reference

AnimateHeight.Root

A simple wrapper <div> for the animate height context.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

AnimateHeight.Content

Prop	Type	Default	Description
`isVisible`	`boolean`	`true`	Controls whether content is shown
`className`	`string`	-	Additional CSS classes

Use for expandable sections like "read more" or collapsible panels

Wrap the toggled content inside AnimateHeight.Content

Use for content that changes frequently — the animation should feel intentional

Nest multiple AnimateHeight components — use an accordion instead