Drivn vs shadcn/ui — Combobox Component Compared

shadcn's recommended Combobox is a long composition. You import Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem — nine names from two files. You hold an open boolean in useState(false) and pass it to Popover as a controlled prop. You hold a value string in useState("") and update it inside the CommandItem onSelect handler. You style the trigger as a <Button variant="outline" role="combobox" aria-expanded={open}> and add a ChevronsUpDown icon yourself.

Drivn collapses all of that into one tag tree. The Combobox source holds the open state inside a context provider, exposes Combobox.Trigger as the click target with the chevron and clearable X already in place, and renders Combobox.Content as an absolute-positioned panel that animates with transition-[opacity,scale]. You pass value and onChange to the root and the rest is handled internally.

shadcn's Combobox recipe is single-select only. The composition page does not document a multi-select pattern — the official advice is to fork the recipe, swap value: string for value: string[], render the selected values as tag chips above the trigger, and write the toggle logic by hand. Drivn ships multi-select as a built-in prop. Pass multiple to the root and the Combobox source switches the trigger from rendering a single string to rendering tag chips, each with an <X /> button that removes the item via the same onSelect handler that adds it.

The internal logic is in the root. When multiple is set, onSelect reads the current array, toggles the value via arr.includes(v) ? arr.filter(i => i !== v) : [...arr, v], and forwards the new array to onChange. The trigger reads Array.isArray(value) ? value : [] and renders one <span className={styles.tag.base}> per entry. Click on the X inside a tag and the same onSelect removes it. No external state, no separate add/remove handlers — one onChange covers both directions.

shadcn delegates open state and click-outside dismissal to Radix Popover. You pass open and onOpenChange to <Popover>, hold the boolean in your component, and Radix handles the listener that closes the popover when the user clicks outside or presses Escape. The pattern works, but the open state lives in your component file even though no other code in your component reads it. Drivn moves the boolean inside the component. The root calls useState(false) and exposes open and setOpen via context to Combobox.Trigger and Combobox.Content.

Click-outside dismissal is also internal. The Combobox source attaches a mousedown listener on document inside useEffect and closes the dropdown when the click target is not inside the root ref. The cleanup function removes the listener on unmount. The whole behavior is about ten lines of plain React — no Radix Popper, no portal, no positioning library. The dropdown uses absolute top-full left-0 right-0 to position itself directly under the trigger.

Add up what each version puts in node_modules. The shadcn recipe needs cmdk for the search list and @radix-ui/react-popover for the panel, and Radix Popover pulls @floating-ui/react-dom behind it to position that panel. Drivn keeps cmdk and drops the rest: the dropdown positions itself with absolute top-full left-0 right-0 mt-1 z-50, animates with transition-[opacity,scale] duration-150 ease-out, and dismisses through the mousedown listener from the previous section. That leaves cmdk and lucide-react for the chevron, X, and check icons — two packages to track instead of four.

Customization flips as well. In the shadcn recipe the trigger is your shared <Button>, so restyling the combobox means editing a component every other screen also renders. In Drivn the trigger belongs to the Combobox source: open the file, edit styles.trigger.base, save. Every Combobox in the app follows and your buttons stay untouched. The entire style surface is one object at the top of that file — trigger, tag chips, dropdown, list, item, separator — which is also where you would change the rounded-[10px] corners or swap the bg-muted chips for something branded. The Combobox examples page shows what that unlocks: groups, clearable triggers, item icons, disabled items, async loading.