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.

Import

Source: packages/ui/src/components/animated-collapse

tsx

import { AnimatedCollapse } from '@highlight/ui'

Basic

Height animates to the measured content, so anything can live in here: lists, forms, a transcript. The spring is shared with ResizableDiv.

tsx

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="small" variant="secondary" onClick={() => setOpen((value) => !value)}>
        {open ? 'Collapse' : 'Expand'}
      </Button>
      <AnimatedCollapse open={open}>
        <div className="bg-muted text-foreground/70 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>
  )
}

Props

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.

Notes

Height is a layout property; keep this off lists of many items and prefer Collapsible where a CSS transition is enough.