How to Add an Accordion to a React App

Before installing the Accordion, make sure 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 used create-next-app, npm create vite, or npx drivn@latest create, all three are wired up automatically. For a custom setup, open your tsconfig.json and verify the compilerOptions.paths entry; the installation page lists the minimal viable config. Drivn also expects lucide-react as its only runtime dependency — the CLI adds it automatically during install if it is missing from your package.json. No PostCSS plugins, Babel presets, or Tailwind config changes are required.

Run the CLI from your project root to add the accordion source file. The command prompts once for your install directory (defaulting to src/components/ui/), then writes accordion.tsx and adds lucide-react to your package.json if it is not already present. No global config file is created — the Accordion is just a TypeScript file in your repo that you can edit like any other component. Confirm the file landed correctly with ls or in your editor, then commit the change. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the --cwd and --dir flags used to target a custom location during install.

Open the page where the Accordion should live and import the compound component from your UI directory. The API uses dot notation — one import exposes Accordion, Accordion.Item, Accordion.Trigger, and Accordion.Content — so every accordion on every page uses a single import line. Each Accordion.Item needs a unique value string; the root tracks which items are open in a local Set keyed by those values. Render the same accordion on a landing page, inside a dialog, or as a filter panel — the component does not care about its container. See the Accordion docs for the full prop table and every variant, and the examples page for five complete patterns you can copy.

Because the Accordion lives in your codebase, customization is a source edit rather than a prop API. Open src/components/ui/accordion.tsx and look for the const styles object near the top — it holds every class name the component uses. Change styles.trigger for the trigger hover state, styles.panel for the animation timing, or swap the ChevronDown import for any other Lucide icon to change the visual indicator. The theming page lists every color token the Accordion reads from, so you can override them globally in src/styles/globals.scss to re-theme every accordion instance at once. To allow multiple items open simultaneously, pass the multiple prop on the root; pair it with defaultValue={["a", "b"]} to pre-open a subset on mount.

Drivn's Accordion triggers are native <button> elements, which gives you keyboard Tab focus, Enter and Space to toggle, and form-safe click handling for free. The component emits aria-expanded on each trigger and wraps content in a role="region" container, so screen readers announce collapsed and expanded states correctly. For long lists of accordion items where Arrow-key navigation between triggers is expected — an accessibility audit often flags this for help centers with thirty or more panels — Drivn does not implement a roving tabindex out of the box. Users Tab through each trigger in document order instead. If Arrow-key cycling is a hard requirement for your audience, the shadcn/ui comparison walks through what Radix offers at the cost of bundling the Radix runtime.