Drivn vs shadcn/ui — Separator Compared

shadcn/ui's Separator file is a thin re-export. It imports SeparatorPrimitive from @radix-ui/react-separator and renders SeparatorPrimitive.Root with a few default classes. The Radix package ships its own bundle — the primitive itself, the React adapter layer, and the shared helpers Radix uses across components — and that JavaScript lands in your bundle the moment you import the file.

Drivn's Separator imports React and the local cn() utility. That is the entire dependency list. Every class lives in the verbatim styles object below, copied from packages/drivn/src/registry/components/separator.ts. styles.horizontal is the full-width one-pixel-tall rule, styles.vertical is the full-height one-pixel-wide rule, and both use the bg-border token so the divider colour follows the theme along with every other border in the project. There is no Radix package, no decorative flag, and no Presence wrapper — just a div with the right class.

Most Drivn components lean on a dot-notation compound API — Select.Trigger, Dialog.Content, Accordion.Item — but a divider has nothing to compound. The Separator is one element with two props: orientation ('horizontal' | 'vertical', default 'horizontal') and className. That is the entire public surface.

shadcn/ui adds a third prop, decorative (default true), which flips the rendered ARIA role between separator and none so screen readers can skip purely visual dividers. Drivn always renders role="separator" — the same role shadcn applies when decorative is false. The file lives in your codebase after install, so the one case where you want a non-semantic divider is a one-line edit: open the component and drop the role attribute. Treat the two-prop API as the floor, not the ceiling — anything you would have reached for decorative to fix is a className or a single edit away.

shadcn/ui's Separator is marked 'use client' because it forwards a ref through React.forwardRef into a Radix primitive, and Radix's primitives expect to run on the client. The moment you drop a Separator into a server component layout, you pull a client boundary into that slot.

Drivn's Separator has no client directive. It is a plain function that returns a div — no refs, no hooks, no event handlers, no Radix lifecycle. You can render it directly in a server component, inside a layout.tsx, in a marketing page that ships zero JavaScript. The bundle stays at zero bytes for this component. For a divider sitting between page sections in a server-rendered hub page (like /categories), that is the entire reason to reach for a primitive this small instead of pulling in a Radix package. The Card compound and most other Drivn primitives follow the same server-safe-when-possible rule.

Both versions accept a className prop, and both merge it with a cn()-style utility so Tailwind's later-wins ordering still works. The differences are what each one starts with. shadcn/ui ships shrink-0 bg-border plus dimension classes split across the data-[orientation=horizontal] and data-[orientation=vertical] selectors, so styling has to follow the data-attribute API.

Drivn's styles.horizontal is w-full h-px bg-border and styles.vertical is h-full w-px bg-border — flat strings, no attribute selectors. To add margin, pass className="my-6"; to swap the colour, pass className="bg-primary"; to change thickness, pass className="h-0.5" on a horizontal one. Because the file is yours after install, anything that does not fit into a className is a one-line edit to the styles object. Pair the Separator with the Accordion to give grouped sections a visual break, or drop one between the body and footer of a panel layout.