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.

shadcn's Combobox composition pulls in cmdk for the search list and @radix-ui/react-popover for the trigger, panel, and click-outside behavior. Radix Popover ships its own @floating-ui/react-dom dependency for positioning. Drivn drops Radix entirely — the dropdown uses CSS absolute positioning and a custom mousedown listener, so the runtime dependencies are cmdk for the search list and lucide-react for the chevron, X, and check icons. One fewer dependency in your bundle, one fewer release cadence to track.

Customization also flips. With shadcn, changing the trigger style means restyling the <Button> import — but the trigger is shared with every other place in your app that renders a button. With Drivn, the trigger is the Combobox source itself: open the file, edit styles.trigger.base, save. The change applies to every Combobox without affecting other buttons. See the Combobox examples page for the full set of patterns: groups, clearable, icons, disabled items, async loading.