ComponentsUpdated Sep 9, 2026
Animated Collapse
Animates a container between zero and its measured content height with a spring. Headless: you own the open state and the trigger.
Source: packages/ui/src/components/animated-collapse
import { AnimatedCollapse } from '@highlight/ui'Change the props; the preview and the snippet update together.
Height animates to the measured content, so anything can live in here: lists, forms, a transcript. The spring is shared with ResizableDiv.
Props
Open
Animate on mount
Content
<AnimatedCollapse open> <div className="bg-background-subtle rounded-xl p-3 text-sm">Height animates to the measured content, so anything can live in here: lists, forms, a transcript. The spring is shared with ResizableDiv.</div></AnimatedCollapse>Height animates to the measured content, so anything can live in here: lists, forms, a transcript. The spring is shared with ResizableDiv.
import { useState } from 'react'import { AnimatedCollapse, Button } from '@highlight/ui' export default function AnimatedCollapseBasic() { const [open, setOpen] = useState(true) return ( <div className="flex w-80 flex-col gap-3"> <Button size="sm" variant="outline" onClick={() => setOpen((value) => !value)}> {open ? 'Collapse' : 'Expand'} </Button> <AnimatedCollapse open={open}> <div className="bg-background-subtle text-foreground-secondary rounded-xl p-3 text-sm"> Height animates to the measured content, so anything can live in here: lists, forms, a transcript. The spring is shared with ResizableDiv. </div> </AnimatedCollapse> </div> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
AnimatedCollapse- A motion div that animates its height to its content; open toggles it.
Props added on top of the underlying element or Base UI part.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Expanded or collapsed. |
animateOnMount | boolean | true | Set false to render at final height on first paint and animate only afterwards. |
containerClassName | string | — | Class for the measured inner wrapper. |
- Height is a layout property; keep this off lists of many items and prefer Collapsible where a CSS transition is enough.