KQ-565 · FIT/PANEL

Fit Panel

A container that is exactly as tall as what is inside it. Swap the content by changing contentKey and the outgoing copy fades away on the exit ease, the incoming fades in, and the box glides between the two measured heights on glide, so nothing below the panel jumps and nothing above it is held open by a reserve. A ResizeObserver rides the mounted content, attached by the callback ref rather than an effect, so content that grows in place carries the panel with it.

KQ-565 · FIT/PANEL

Gaugeworks R2 · 0–16 bar · 63 mm dial.

Measured 0 px

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/fit-panel

Props

children: React.ReactNode; default —; Content; change contentKey to swap it.
contentKey: string; default —; Identifies the current content. A new value fades the old copy out, the new one in, and glides the height between them.
onHeightChange: (height: number) => void; default —; Fires with each freshly measured height, in pixels.
className: string; default —; Outer classes. Padding belongs on the content, not on the panel.

Prop	Type	Default	Description
children	React.ReactNode	—	Content; change contentKey to swap it.
contentKey	string	—	Identifies the current content. A new value fades the old copy out, the new one in, and glides the height between them.
onHeightChange	(height: number) => void	—	Fires with each freshly measured height, in pixels.
className	string	—	Outer classes. Padding belongs on the content, not on the panel.