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.

Keyboard behaviour is where the two flavours genuinely part ways, and it is worth being precise about the gap. Radix hands shadcn/ui a full listbox implementation: roving arrow-key focus between options, Home and End jumps, typeahead that matches as the user types, and the ARIA roles wired to match. Drivn ships none of that machinery. What it ships instead is native elements — the trigger is a <button type="button"> and so is every option — which means Tab reaches each one and Enter or Space activates it, the trigger toggling the menu and an option committing its value. The trigger also draws a real focus ring through focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring, so tabbing into the field is visible rather than silent.

For a status picker, a country field, or a sort control with six choices, Tab and Enter over a short list is enough, and the smaller component is the better trade. When it is not enough, the file is yours: a keydown handler on Select.Menu that moves focus across the option buttons is a contained edit, and it costs nothing in dependencies. The selected row already marks itself visually through styles.selected (text-primary font-medium), so focus movement is the only piece missing. When a surface is keyboard-first by design, the Command menu ships arrow-key navigation already wired.