Drivn vs shadcn/ui — Tabs Compared

Drivn attaches the three tab parts to the root via Object.assign(TabsRoot, { List, Tab, Panel }), so a single import { Tabs } from "@/components/ui/tabs" gives you Tabs.List, Tabs.Tab, and Tabs.Panel. The tree reads like the interface it builds: a list of tabs followed by the panels they reveal, with no Tabs prefix repeated as a separate export on every part.

shadcn/ui splits the same surface into four named exports — Tabs, TabsList, TabsTrigger, TabsContent — which you import flat and compose. The rendered result is comparable, but Drivn keeps the import to one line and the value wiring stays implicit: you pass value on each Tabs.Tab and matching value on each Tabs.Panel, and context handles the rest. See the full API on the Tabs reference.

The clearest difference is the dependency line. shadcn/ui's Tabs installs @radix-ui/react-tabs, which lands in your node_modules and your bundle. Drivn's Tabs imports only React and the local cn() helper — the entire component is one file you own, with a const styles object holding every class. The active tab swaps bg-background text-foreground in for the inactive text-muted-foreground hover:text-foreground, and the list is a rounded bg-accent track with a one-pixel inset padding.

Because the styles live in one object rather than scattered through inline cn() calls per export, you restyle the whole component by editing four keys. There is no headless library version to track, no breaking change in a dependency to chase — the trade, covered below, is that you also do not inherit Radix's accessibility behaviour.

Drivn's TabsRoot supports both modes from the same props. Leave it uncontrolled with defaultValue and it tracks the active tab internally with React.useState; pass value and onChange and it becomes controlled, so you can drive the active tab from URL state, a parent reducer, or a form. The logic is a single const value = controlled ?? uncontrolled plus a setValue callback that fires onChange and only writes internal state when no value prop was supplied.

shadcn/ui exposes the same capability via Radix's defaultValue, value, and onValueChange — the prop name is the only meaningful difference (onChange in Drivn, onValueChange in shadcn). Both let you mix a default with an optional controlled override, so neither forces you to choose up front.

The honest case for shadcn/ui here is accessibility you get for free. Drivn's Tabs.Tab renders a plain <button> with an onClick that calls setValue — it does not add role="tab", aria-selected, a tabpanel role, or arrow-key navigation between triggers. shadcn's Radix-backed Tabs ships the full WAI-ARIA tabs pattern and roving-tabindex keyboard support out of the box, which matters for keyboard and screen-reader users on a complex app.

For a fresh build where you want zero dependencies, one import, and a Tabs component you can read and own end to end, Drivn is the cleaner start — and because you own the source, layering role and aria-selected attributes onto the <button> is a few lines you control. If you need the WAI-ARIA keyboard behaviour without writing or maintaining it yourself, stay on shadcn. Either way, pair Tabs with Card for panel surfaces and Button for actions inside each panel.