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

1import { ResizableDiv } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Save

Props

Content

Animate width

Animate height

tsx

1<ResizableDiv className="bg-background-subtle rounded-xl" containerClassName="px-4 py-2 text-sm">2  Save3</ResizableDiv>

Basic

Save

tsx

1import { useState } from 'react'2import { Button, ResizableDiv } from '@highlight/ui'3 4const LABELS = ['Save', 'Save and share', 'Save, share and notify everyone']5 6export default function ResizableDivBasic() {7  const [index, setIndex] = useState(0)8 9  return (10    <div className="flex flex-col items-center gap-3">11      <ResizableDiv className="bg-background-subtle rounded-xl" containerClassName="px-4 py-2 text-sm">12        {LABELS[index]}13      </ResizableDiv>14      <Button size="sm" variant="outline" onClick={() => setIndex((value) => (value + 1) % LABELS.length)}>15        Change content16      </Button>17    </div>18  )19}

Parts

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.

ResizableDiv: A div that animates its height to its content as the content changes.

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.