Next.js Collapsible — Animate Without Measuring Height

Drivn ships no runtime package — the CLI copies the component source into your repository and leaves. From the root of your Next.js 16 project run npx drivn add collapsible. The CLI asks once where components live, defaulting to src/components/ui/, and writes collapsible.tsx there. The file imports React and the local cn class-merge helper and nothing else — no Radix, no animation library, no @radix-ui/react-collapsible. The two Tailwind classes that drive the animation live in a styles object at the top of the file. The CLI reference covers custom directories and batch installs, and the installation guide lists project prerequisites. Once the file lands it is yours to edit; Drivn releases never overwrite it, so you can change the transition duration or the grid trick without fighting an upstream package.

Open collapsible.tsx and the first line is 'use client'. Three React hooks force the boundary: React.useState(defaultOpen) holds the open state for the uncontrolled case, React.useId() generates the matching triggerId and contentId so the aria-controls/aria-labelledby pair stays stable across hydration, and React.createContext shares those values from the root down to the Trigger and Content. State, ids, and context all need the client, so importing the Collapsible into a Server Component automatically draws the boundary at that import — you do not add 'use client' to your page. This mirrors the Checkbox and differs from the Button, which has no directive and stays server-rendered. Render the Collapsible wherever you like in the App Router and Next.js ships exactly the small client bundle it needs.

The Content renders a wrapper <div> with className={styles.panel} — grid transition-[grid-template-rows] duration-200 — and an inline style of gridTemplateRows: open ? '1fr' : '0fr'. Inside it, a second <div className={styles.content}> carries overflow-hidden. When open flips, the single grid row transitions between full content height (1fr) and zero (0fr), and overflow-hidden clips the children during the transition. The browser computes both heights, so there is nothing to measure in JavaScript and nothing to read from a ref. This matters for the App Router: the closed panel renders at zero height on the server with its children present in the HTML, so there is no first-paint flash and no hydration mismatch — the markup the server sends already matches what the client hydrates. Screen readers and crawlers still see the content because it lives in the DOM the whole time, only visually clipped.

By default the Collapsible is uncontrolled — pass defaultOpen and it tracks its own state, which is the right shape for a file tree node or a settings row that nothing else needs to read. When the open state has to drive other UI, pass open and onOpenChange: the component reads const open = controlledOpen ?? internalOpen, so supplying open switches it to controlled mode and the toggle handler calls onOpenChange?.(next) without touching internal state. Controlled mode needs a client component that owns the useState, so keep that directive on the small leaf file holding the state rather than marking the whole page. The Collapsible examples page collects more of these patterns, and the Accordion builds on the same idea when you need a set of panels where only one opens at a time.

The Trigger renders a real <button> with aria-expanded={open}, aria-controls={contentId}, and data-state={open ? 'open' : 'closed'}. Because the open state lands on the DOM as a data-state attribute, you style the trigger with Tailwind data variants instead of conditional class strings — rotate a chevron with data-[state=open]:rotate-180, or scope it to a named group so several collapsibles in one panel each control their own icon. The button is a native element, so keyboard focus, the Enter and Space keys, and the announced expanded state come from the browser with no ARIA shim to maintain. The role="region" and aria-labelledby on the content tie the panel back to its trigger for screen readers. Re-theme any of it by editing the color tokens the classes reference — the component is in your repo, not a dependency.