How to Add a Collapsible to a React App

Before installing the Collapsible, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. The Collapsible is one of Drivn's lightest components — it imports nothing beyond React and the cn class-merge helper, so it adds no runtime dependency at all. The installation page lists the minimal config if you are wiring a custom setup by hand.

Run the CLI from your project root to add the Collapsible source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes collapsible.tsx, and resolves the cn utility it depends on. No global config file is created — the Collapsible is a single TypeScript file in your repo that you edit like any other component. Unlike the Combobox or Command, it pulls in no icon library and no cmdk, so the install is just the one file plus the shared cn helper. Confirm the file landed in your editor, then commit it to keep a clean baseline. The CLI docs cover the flags for targeting a custom location during install.

Import the Collapsible and compose it from Collapsible.Trigger and Collapsible.Content. In uncontrolled mode you do not manage any state — pass defaultOpen if you want it to start expanded, and the component tracks the rest internally. The Trigger is a real <button> that spreads any HTML button attributes you pass and toggles the panel on click; the Content holds whatever you want to reveal. The root sets a data-state of open or closed on its wrapper, so you can target either state with Tailwind's arbitrary variants for rotating a chevron or shifting a background. Because the source is 'use client', render it inside a client component in a Next.js App Router app. See the Collapsible docs for the full prop table.

To control the open state from your own code — syncing several panels, persisting the state, or opening it in response to another action — pass open and onOpenChange. The root reads const open = controlledOpen ?? internalOpen, so providing open switches it into controlled mode and your value wins; onOpenChange fires with the next boolean every time the trigger is clicked. Hold the value in useState and update it from the callback. This is the same controlled pattern Drivn uses across its stateful components, so it composes cleanly with the Accordion when you need several linked sections. The Trigger also exposes aria-expanded and aria-controls automatically, so a controlled toggle stays accessible without extra props.

The smooth open-and-close comes from one technique, and it is worth understanding so you can restyle it safely. The Content wrapper carries the panel style — grid transition-[grid-template-rows] duration-200 — and an inline style that sets gridTemplateRows to 1fr when open and 0fr when closed. A grid row animating from 0fr to 1fr collapses and expands to fit its content with no measured pixel height, which is why tall content never clips. The inner div uses overflow-hidden so the content is masked while the row shrinks. To restyle, open src/components/ui/collapsible.tsx and edit the styles object or the duration-200 token; the trigger has no styles of its own, so you style it with the className you pass. The two-key styles object is below, verbatim from the source.