Drivn vs shadcn/ui — Accordion Component Compared

shadcn/ui exports Accordion, AccordionItem, AccordionTrigger, and AccordionContent as four named exports. Drivn exports a single Accordion object with three dot-notation members — Accordion.Item, Accordion.Trigger, and Accordion.Content — so a typical FAQ section needs exactly one import line. The accordion docs walk through the full API.

The mental models diverge further under the hood. shadcn's AccordionItem passes value into Radix context, which synchronizes open state and ARIA attributes across every nested primitive. Drivn's Accordion.Item writes value into a local React context that the trigger and content both read from. The resulting JSX is almost identical — what changes is what you import and what runs at render.

The two libraries reach smooth expansion through completely different mechanics. shadcn/ui leans on Radix, which sets data-state="open" or data-state="closed" on each panel and pairs those with accordion-down and accordion-up Tailwind keyframes. Radix measures the panel and injects a CSS variable for its height, which lets the keyframes animate content of unknown size without JavaScript running on every frame.

Drivn takes a leaner route. Its accordion panel is a CSS grid whose grid-template-rows value flips between 0fr when closed and 1fr when open — the exact style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }} you will find in the installed file. The browser interpolates the fractional row height on its own, so there is no measurement pass, no ResizeObserver, and no injected CSS variable. A single transition-[grid-template-rows] class in the styles.panel string carries the whole animation.

At normal FAQ sizes neither approach drops frames. Drivn wins on how little there is to understand; Radix wins on edge cases — very tall panels, images that finish loading after the open transition, or content that resizes mid-animation — where its measured height stays exact. The theming guide covers tuning the transition duration on either side.

shadcn/ui inherits Radix's keyboard map: Enter and Space toggle a panel, Arrow Up / Down cycle between triggers, and Home / End jump to the first or last trigger. Focus is managed by Radix's internal roving tabindex, so the Tab key skips closed triggers by default in vertical variants.

Drivn's Accordion emits aria-expanded on each trigger and wraps content in a role="region" container, but it does not implement Arrow-key cycling or a roving tabindex. Tab reaches every trigger in document order, and Enter or Space toggles the panel natively because each trigger is a real <button> element.

For most FAQ and settings surfaces this is sufficient and passes WCAG 2.1 AA. If your product has a long list of accordions where Arrow-key navigation is expected — a tree-view pattern, for instance — Radix's richer focus model is the better fit. The theming guide covers how to tune focus-ring styles on either library.

shadcn encourages overrides via CSS variables and Tailwind's data-state attribute selectors. You can target [data-state="open"] for open-panel styling, edit the keyframes in tailwind.config, or wrap the trigger in a styled shell.

Drivn replaces this with a co-located const styles object. Inside src/components/ui/accordion.tsx — the same file the CLI installs — the styles.trigger, styles.panel, and styles.content strings hold every class name. You edit them directly. The ChevronDown icon can be swapped for any Lucide icon, the padding and spacing adjusted, the border tokens re-tuned. Because Drivn uses HSL color tokens, dark mode tracks automatically. The installation page shows how to regenerate a file from the registry if you want to reset after an experiment.

Drivn's Accordion does not expose imperative open and close methods on a ref, and it does not support a type="single" collapsible={false} variant that forces at least one panel open at all times. shadcn's Radix-based component does. If your design calls for external buttons that pilot specific panels, Drivn asks you to lift the state manually.

Drivn also lacks the Arrow-key navigation roving tabindex described above. For a long FAQ with ten or more items, shadcn's built-in keyboard map is measurably better for power users. For short lists the difference disappears.

Finally, shadcn's ecosystem advantage shows up here too — pre-built FAQ blocks, AI-generated question sets, and community themes exist in numbers Drivn has not matched yet.