Animated Height

layout

Wrapper that animates height changes smoothly for expand/collapse transitions.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system

Import

import { AnimatedHeight } from "@launchapp/design-system";

Examples

Expand/collapse

const [open, setOpen] = React.useState(false);return (  <>    <button type="button" onClick={() => setOpen(!open)}>Toggle</button>    <AnimatedHeight visible={open}>      <div className="p-4 bg-muted rounded-md mt-2">        <p>Hidden content revealed with smooth animation.</p>      </div>    </AnimatedHeight>  </>);

Props

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	Content whose height is animated.
`visible`	`boolean`	`true`	When false, collapses the height to 0.

← PreviousAnimated Border

Next →Animated Text