How to Add an Accordion to a React App

The Accordion assumes three things about your React project, and all three come free from the common scaffolds. First, Tailwind CSS v4 installed and processing your styles — the default look lives entirely in Tailwind class strings, so without a Tailwind build step the component renders unstyled. Second, TypeScript, since the component ships as a .tsx source file. Third, a @/ path alias pointing at your source directory so the import line resolves. Anything created with create-next-app, npm create vite, or npx drivn@latest create already has all three wired up; for a hand-rolled setup, check the compilerOptions.paths entry in your tsconfig.json against the minimal config on the installation page. The only runtime dependency is lucide-react, used for the chevron icon, and the CLI adds it automatically when it is missing from your package.json. No PostCSS plugins, Babel presets, or Tailwind config changes are needed.

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.css 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.