ComponentsUpdated Sep 9, 2026

Resizable Div

Springs a container to the size of its content whenever the content changes. Used inside ActionPopover so toolbars grow and shrink smoothly.

Import

Source: packages/ui/src/components/resizable-div

tsx

import { ResizableDiv } from '@highlight/ui'

Basic

Save

tsx

import { useState } from 'react'
import { Button, ResizableDiv } from '@highlight/ui'

const LABELS = ['Save', 'Save and share', 'Save, share and notify everyone']

export default function ResizableDivBasic() {
  const [index, setIndex] = useState(0)

  return (
    <div className="flex flex-col items-center gap-3">
      <ResizableDiv className="bg-muted rounded-xl" containerClassName="px-4 py-2 text-sm">
        {LABELS[index]}
      </ResizableDiv>
      <Button size="small" variant="secondary" onClick={() => setIndex((value) => (value + 1) % LABELS.length)}>
        Change content
      </Button>
    </div>
  )
}

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`animateWidth`	boolean	true	Animate width changes.
`animateHeight`	boolean	true	Animate height changes. With both false it renders a plain div.
`containerClassName`	string	—	Class for the measured inner wrapper.