Next.js Separator with the App Router

Drivn installs through a small CLI that writes component source directly into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add separator. The Separator imports nothing past React and the local cn utility, so the CLI writes a single separator.tsx file and leaves the rest of your tree untouched. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file, and future Drivn releases will not overwrite it — commit it for a clean baseline before wiring it into a layout. If the same screen groups content into panels, pair the divider with a Drivn Card from the same install.

Because the Separator holds no state and calls no browser API, separator.tsx ships without a 'use client' directive — you can render it straight inside a Server Component in a Next.js App Router page, no client boundary required. Import Separator and drop it between two blocks of content; with no props it defaults to orientation="horizontal", which applies w-full h-px bg-border and stretches a one-pixel rule across the full width of its parent. Because the width comes from w-full, the parent element decides how wide the line runs — put the divider inside a fixed-width card or a padded section and it spans exactly that box. The role="separator" on the underlying <div> means assistive technology announces it as a divider rather than skipping past it as empty markup, so the grouping you see is the grouping a screen reader hears.

Pass orientation="vertical" to switch the rule from a horizontal line to a vertical one. The component reads that prop and swaps styles.horizontal for styles.vertical — h-full w-px bg-border — a one-pixel-wide line that fills its parent's height instead of its width. The catch is the mirror of the horizontal case: a vertical separator needs its parent to give it a height to fill, so it belongs inside a flex row where the row's height defines the line. Set the container to flex items-stretch (or give the separator an explicit h-* through className) so the rule runs the full height between the items it divides. This is the shape for a toolbar of icon buttons, a set of inline stats, or a nav-style row where a thin vertical rule reads cleaner than extra gap.

Every class the component renders lives in one small styles object at the top of the file, and the whole component is a single <div> that picks a key from it. styles.horizontal is w-full h-px bg-border and styles.vertical is h-full w-px bg-border; the function looks up styles[orientation], merges it with any className through cn(), and renders a <div> carrying role="separator". There is no state, no effect, and no icon — the orientation prop defaults to 'horizontal', so an unadorned <Separator /> is the horizontal line. Because both keys tint the rule with bg-border, the divider reads with your theme's border token and needs no dark-mode override. The verbatim source below is the entire component — a two-key style map and a small function.

Because the rule is a plain <div> tinted by bg-border, restyling it is a one-line change or a per-instance className. Make it bolder by bumping h-px to h-0.5 in styles.horizontal; recolor it by swapping bg-border for bg-primary/30; or add breathing room where you use it with a margin utility like my-4. The className you pass merges after the base style through cn(), so a single call site can thicken, tint, or space one divider without touching the shared file — <Separator className="my-6 bg-primary/20" /> is a themed, spaced rule at one call site. Since the default reads the --border token, adjusting that value in theming re-themes every separator across the app for dark and light mode at once. For copy-paste layouts that use the divider in menus, cards, and toolbars, see the Separator examples.