Next.js Accordion — Zero-Dep Component for App Router

Drivn installs through a tiny CLI that writes component source files directly into your repository — no runtime npm package, no version lock to upgrade. Open a terminal in the root of your Next.js 16 project and run npx drivn add accordion. The CLI prompts you once for your install directory (defaulting to src/components/ui/) and copies the accordion source file plus the lucide-react dependency it needs for the chevron icon. After install you own the file — future Drivn releases will not overwrite it, and you can edit the internals without forking a package. The CLI reference documents every flag, including how to target a custom path or install multiple components at once. If your Next.js project already uses lucide-react, no second install is triggered. Commit the change so you have a clean baseline before customizing.

An App Router page is a server component by default, which means you cannot call useState or useEffect inside it. Drivn's Accordion is marked 'use client' at the top of the source file, so Next.js treats it as a client boundary. That boundary is local — the surrounding layout, headers, and non-interactive content below can remain server-rendered. A common pattern is a server-rendered FAQ page whose only client island is the Accordion itself, which keeps JavaScript payload minimal for the rest of the route. Import the component directly from @/components/ui/accordion and drop it into any server page — no dynamic() import, no SSR-disable flag, no extra Suspense boundary. The installation guide covers project bootstrapping; the Accordion docs show every prop.

A common UX request for FAQ and settings pages is to bookmark a specific open panel — sharing ?section=billing should land on a page with that item expanded. Because Next.js App Router exposes search params through a server-component prop, you can read the requested section on the server and pass it into the Accordion as defaultValue. No client-side store, no useSearchParams hook, no extra re-render. For pages where users toggle panels and expect the URL to update in response, wrap the Accordion in a thin client component that calls router.replace inside each trigger's click handler. Keep the server part doing the initial render — only opt into client behavior where the URL needs to change on user action. For form-driven stepper URLs, the React Hook Form guide shows a similar pattern.

Drivn's Accordion seeds its open state from the defaultValue prop, not from localStorage or any browser-only API, so the very first render produces identical HTML on the server and the client. That is what keeps Next.js from logging the hydration-mismatch warning it prints whenever a component paints different markup across the two environments. If you want the open panel to survive a reload, read the stored value on the server from a cookie and hand it down as defaultValue; the client then hydrates an accordion that is already in the right state, with no post-mount reflow.

Keep browser reads like window.localStorage out of the component body — a server-side cookie read passed through props is both cleaner and mismatch-proof. The animation needs no client measurement either: the grid-template-rows transition is pure CSS that runs once the element hydrates, so server and client output stay byte-identical. For the ground-up API, the Accordion docs list every prop, and the installation guide covers wiring Drivn into an existing project.

Drivn assumes you use Tailwind v4 with an inline @theme block where design tokens are declared as CSS custom properties. The Accordion reads tokens like --foreground, --muted-foreground, and --border for its surface colors and chevron tint. In a Next.js 16 project scaffolded with npx drivn@latest create, the tokens are already wired up — the component renders correctly in both dark and light mode without touching any Tailwind config. If you bring Drivn into an existing Next.js project with its own token names, the accordion file is the only place you need to adjust. Open src/components/ui/accordion.tsx, find the styles object near the top, and swap token names in the trigger, icon, and content strings to match your theme. The theming page maps every Drivn token to its default HSL value so you can rename or replace in one pass.