Auto Height
A wrapper whose height springs to fit whatever its content becomes, so swapping tabs, filtering a list or showing an error never jumps the layout below.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Auto Height
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
stiffness | number | 300 | |
className | string | — |
About Auto Height
Auto Height wraps content that changes size and springs its height to match, so swapping tabs, filtering a list or showing an error never makes the layout below jump. Wrap it and forget it.
Auto Height is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Auto Height
- Tab panels of different lengths.
- Forms that show validation errors.
- Filtered lists and search results.
- Accordions built by hand.
How it works
A ResizeObserver measures the inner content and Motion animates the outer height to that number. Stiffness is a prop, and reduced motion applies the new height straight away.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Auto Height
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change stiffness live, and the Code tab updates to match, so the snippet you copy already carries your values.
- stiffness (number, default 300).
Goes well with Auto Height
These display pieces share its tokens and motion language, so they sit together on one page without clashing.
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Auto Height
npx shadcn@latest add https://charcoalui.com/r/auto-height.jsonAuto Height is free and MIT licensed. The command copies auto-height.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Auto Height?
- Run npx shadcn@latest add https://charcoalui.com/r/auto-height.json. The shadcn CLI copies auto-height.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Auto Height free for commercial use?
- Yes. Auto Height is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Auto Height work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Auto Height?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Auto Height's props and source and get_install_command returns the exact command.