Skip to main content
components

Resizable

Wraps content with a motion-animated height container that smoothly transitions when content height changes.

Package@g4rcez/componentsSectionPrimitives

Examples

Toggle Content

The container animates its height when content is shown or hidden.

Toggle

Always visible content

tsx
"use client";
import { useState } from "react";
import { Resizable } from "@g4rcez/components/core/resizable";

function ToggleContent() {
  const [showExtra, setShowExtra] = useState(false);
  return (
    <div className="flex flex-col gap-4">
      <button
        type="button"
        onClick={() => setShowExtra((v) => !v)}
        className="rounded px-4 py-2 bg-primary text-primary-foreground w-fit"
      >
        {showExtra ? "Hide" : "Show"} extra content
      </button>
      <Resizable>
        <div className="border border-card-border rounded p-4">
          <p>Always visible content</p>
          {showExtra && (
            <p className="mt-4 text-secondary">
              This extra content causes the container to grow smoothly.
            </p>
          )}
        </div>
      </Resizable>
    </div>
  );
}

Growing List

Add items to a list and watch the container animate its height.

Growing list
  • Item 1
  • Item 2
tsx
"use client";
import { useState } from "react";
import { Resizable } from "@g4rcez/components/core/resizable";

function GrowingList() {
  const [items, setItems] = useState(["Item 1", "Item 2"]);
  return (
    <div className="flex flex-col gap-4">
      <button
        type="button"
        onClick={() => setItems((v) => [...v, `Item ${v.length + 1}`])}
        className="rounded px-4 py-2 bg-primary text-primary-foreground w-fit"
      >
        Add item
      </button>
      <Resizable>
        <ul className="border border-card-border rounded divide-y divide-card-border">
          {items.map((item) => (
            <li key={item} className="px-4 py-2">{item}</li>
          ))}
        </ul>
      </Resizable>
    </div>
  );
}

When to use Resizable

Use when

You need the documented Resizable interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Resizable behavior you need.

Accessibility

Keep the Resizable labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.