optics
componentauto-heightsource: ok · hit
Auto Height
Auto height component for dynamic height animations.
npx shadcn add "https://optics.agusmayol.com.ar/r/auto-height.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationmotion
Registry dependencies
https://optics.agusmayol.com.ar/r/use-auto-height.jsonhttps://optics.agusmayol.com.ar/r/slot.json
Files1 · source cached 10/8/2026, 9:42:04 PM
registry/optics/helpers/primitives/effects/auto-height.jsx
"use client";
import * as React from "react";
import { motion } from "motion/react";
import { useAutoHeight } from "@/registry/optics/hooks/use-auto-height";
import { Slot } from "@/registry/optics/helpers/primitives/animate/slot";
function AutoHeight({
children,
deps = [],
transition = {
type: "spring",
stiffness: 300,
damping: 30,
bounce: 0,
restDelta: 0.01,
},
style,
animate,
render,
...props
}) {
const { ref, height } = useAutoHeight(deps);
const motionProps = {
style: { overflow: "hidden", ...style },
animate: { height, ...animate },
transition,
};
if (render) {
return (
<Slot {...motionProps} {...props}>
{React.cloneElement(render, {
children: (
<>
{render.props.children}
<div ref={ref}>{children}</div>
</>
),
})}
</Slot>
);
}
return (
<motion.div {...motionProps} {...props}>
<div ref={ref}>{children}</div>
</motion.div>
);
}
export { AutoHeight };