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.

shadcn/ui uses Radix's data-state="open" and data-state="closed" attributes paired with accordion-down and accordion-up Tailwind keyframes. The height is measured via a CSS variable Radix injects, which enables smooth JavaScript-free transitions even for content of unknown size.

Drivn's animation is simpler: the accordion panel is a CSS grid with a grid-template-rows value that transitions from 0fr (closed) to 1fr (open). The browser interpolates the fractional row height automatically, so no JavaScript measurement, no ResizeObserver, and no CSS variable injection is needed. One transition-[grid-template-rows] class handles dynamic content height without configuration.

Neither approach janks at typical sizes — both hit 60fps on normal FAQ content. Drivn wins on simplicity; Radix wins on well-tested fallback behavior for unusual content (very tall, very short, or images that finish loading after the open transition).

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.