Drivn vs shadcn/ui — Select Compared

shadcn/ui's Select is a layer over @radix-ui/react-select. The component file imports SelectPrimitive from the Radix package and re-exports its Root, Trigger, Value, Content, Item, Group, Label, and Separator parts, plus two scroll-button helpers. Radix ships the state machine, the portal, the popper positioning, and the keyboard model — all of that JavaScript lands in your bundle the moment you import the component.

Drivn's Select imports React, the ChevronDown icon from lucide-react, and the local cn() utility. Every class the component uses lives in the styles object below, reproduced verbatim from the registry. styles.trigger is the 40-pixel-tall bordered button, styles.menu is the absolutely positioned dropdown with max-h-[200px] overflow-y-auto, and styles.option is each row. There is no Radix package, no portal library, and no popper engine. For a button-triggered action list rather than a value picker, see the Dropdown component, which follows the same zero-dependency framing.

shadcn/ui spreads the Select across nine named exports. A real menu needs Select, SelectTrigger, SelectValue, SelectContent, and SelectItem at minimum, so a single import line runs long and every consumer has to remember which flat name maps to which slot. Drivn binds its four parts with Object.assign(SelectRoot, { Trigger, Menu, Option }), so one import of Select gives you the whole compound and the JSX reads as a tree: Select.Trigger, Select.Menu, Select.Option.

The call site below is the public API, matching the Select docs page. You pass value and onChange to the root, a placeholder to the trigger, and a value to each option. The trigger's children render the label of the current selection — Drivn does not auto-resolve the label from the value, so you look it up yourself, which keeps the component free of an options-registry abstraction. For free-text filtering over the same list, reach for the Combobox instead.

shadcn/ui hands open/close, focus management, and dismissal to the Radix state machine. Drivn keeps the model in plain view inside SelectRoot. A useState flag holds open; the trigger flips it on click. Picking an option runs onSelect, which calls your onChange and then close(), so the menu dismisses itself on selection. An outside click is handled by a useEffect that registers a mousedown listener on document and closes the menu whenever the click target is not inside the component's ref.

The menu itself never leaves the DOM — Select.Menu always renders, and the open flag only toggles its classes between opacity-100 scale-100 and opacity-0 scale-95 pointer-events-none. That is why it animates with the transition-[opacity,scale] rule in styles.menu instead of mounting and unmounting. Because the menu is an absolutely positioned child rather than a portal, it inherits the stacking context of its parent — give the field room or a z-index if it sits inside a clipped container. The Dialog component shows the portal-based alternative when you do need to escape the parent.

This is the one place the two flavors genuinely diverge. Radix gives shadcn/ui's Select arrow-key navigation, Home/End jumps, typeahead matching, and a full ARIA listbox role set out of the box. Drivn's Select is built from native <button> elements: every option and the trigger are focusable and operable with Tab and Enter, and the trigger toggles the menu, but there is no arrow-key roving between options and no typeahead.

For most product UIs — a status picker, a country field, a sort control with a handful of choices — Tab and Enter over a short list is enough, and the simpler component is the right trade. When you do need full keyboard support, you own the file: add a keydown handler to Select.Menu that moves focus across the option buttons, and you have it without pulling in Radix. The selected option already carries a visual cue through styles.selected (text-primary font-medium), so the wiring is the only missing piece. For a list that is keyboard-first by design, the Command menu ships arrow-key navigation already built in.