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.

Because Drivn's Accordion initializes its internal state from the defaultValue prop rather than from localStorage or browser-only APIs, its first render is identical on the server and the client. That avoids the hydration-mismatch warnings Next.js prints when a component renders different HTML between environments. If your design calls for persisting the open item across page loads, read the stored value on the server (via a cookie) and pass it as defaultValue — the client then receives a fully rendered accordion with no post-mount re-layout. Avoid reading window.localStorage inside the component; the cleaner path is a server-side cookie read passed down through props. For animations that depend on client-only measurements, the Drivn accordion has none — the CSS grid row transition runs in pure CSS once the element hydrates, keeping server and client output byte-identical.

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.