ElasticHeight

'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-ultramarine px-4 py-2 text-white hover:bg-blue-700"
      >
        {isExpanded ? 'Collapse' : 'Expand'}
      </button>
      <ElasticHeight isExpanded={isExpanded} className="border rounded-md" min={24}>
        <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

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

Usage

Copy'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

Extends all standard HTML div attributes.

Implementation Details

• The component uses CSS Grid with grid-rows-[1fr] (expanded) and grid-rows-[0fr] (collapsed) for smooth height animations
• No JavaScript height calculations required - the browser handles sizing automatically
• The height transition has a 500ms duration (duration-500) 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 and testing purposes
• The inner container respects the min prop via minHeight inline style
• Use min={0} (default) to completely hide content when collapsed, or set a positive value to show a preview

Benefits of CSS Grid Approach

• Performance: No JavaScript calculations or ResizeObserver overhead
• Simplicity: Pure CSS solution with no imperative DOM manipulation
• Reliability: Works consistently across all browsers that support CSS Grid
• Automatic sizing: Content height adjusts naturally without manual measurement