ElasticHeight

PreviousNext

A container component that smoothly animates height transitions based on its content, perfect for collapsible sections, accordions, and expandable UI elements

Expandable Content

This content smoothly animates when the container expands or collapses. The ElasticHeight component automatically adjusts to the height of its children.

Perfect for accordions, collapsible sections, and any UI element that needs smooth height transitions.

'use client';

import { useState } from 'react';
import { ElasticHeight } from '@/ui/ElasticHeight';

export function ElasticHeightDemo() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="w-full max-w-md space-y-4">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
      >
        {isExpanded ? 'Collapse' : 'Expand'}
      </button>
      <ElasticHeight isExpanded={isExpanded} className="border rounded-md">
        <div className="p-4 space-y-2">
          <p className="font-semibold">Expandable Content</p>
          <p>
            This content smoothly animates when the container expands or collapses. The
            ElasticHeight component automatically adjusts to the height of its children.
          </p>
          <p>
            Perfect for accordions, collapsible sections, and any UI element that needs smooth
            height transitions.
          </p>
        </div>
      </ElasticHeight>
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/elastic-height.json

Usage

'use client';
 
import { useState } from 'react';
import { ElasticHeight } from '@/docs/lib/ui/elastic-height';
 
export function Component() {
  const [isExpanded, setIsExpanded] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsExpanded(!isExpanded)}>Toggle</button>
      <ElasticHeight isExpanded={isExpanded}>
        <div className="p-4">
          <p>This content animates smoothly when expanded or collapsed.</p>
        </div>
      </ElasticHeight>
    </div>
  );
}

API Reference

ElasticHeight

PropTypeDefaultDescription
isExpandedbooleanfalseControls whether the container is expanded (showing full content height) or collapsed (showing minimum height)
minnumber0The minimum height in pixels when collapsed. Use 0 to fully hide content or a positive value to show partial content
innerClassNamestringundefinedCSS classes applied to the inner wrapper div that contains the children. Use this to add padding, styling, or layout to the content area
classNamestringundefinedCSS classes applied to the outer container. Includes overflow-hidden and transition-all duration-500 by default

Extends all standard HTML div attributes.

Notes

  • The component uses a ResizeObserver to automatically detect content size changes and adjust the maximum height accordingly
  • The height transition has a 500ms duration with smooth easing for polished animations
  • The outer container has overflow-hidden to clip content during the transition
  • The component sets a data-expanded attribute on the outer container for styling purposes
  • Use min={0} (default) to completely hide content when collapsed, or set a positive value to show a preview
  • The component is client-side only (requires "use client" directive) due to its use of hooks and browser APIs
  • Content height is calculated using offsetHeight and updates automatically when the content or window is resized