Collapsible Reveal

reveal x height

Smooth height-reveal collapsible section. From Bundui.

collapsiblerevealheightbundui

The row animates from 0fr to 1fr, so the panel reveals smoothly without measuring the content or hard-coding a pixel height.

Code

collapsible-reveal.tsx

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";

/* The 0fr → 1fr grid-row trick animates to the content's natural height —
   no measuring, no hard-coded max-height that clips long content. */
export function CollapsibleReveal({ title, children }: { title: string; children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="rounded-xl border border-border">
      <button onClick={() => setOpen(!open)} aria-expanded={open}
        className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium">
        <span>{title}</span>
        <ChevronDown className={`size-4 transition-transform duration-300 ${open ? "rotate-180" : ""}`} />
      </button>
      <div className="grid transition-[grid-template-rows] duration-300 ease-out" style={{ gridTemplateRows: open ? "1fr" : "0fr" }}>
        <div className="overflow-hidden">
          <div className="px-4 pb-4 text-sm text-muted-foreground">{children}</div>
        </div>
      </div>
    </div>
  );
}

Icons: npm i lucide-react

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Collapsible Reveal component and wire it to my accent.”