How to Add a Separator to a React App

Before installing Separator, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory (the component ships as a .tsx file, so TypeScript is part of the stack). If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. The Separator is the smallest install in the library — its only import past React is the local cn utility for class merging, so there is no third-party package to add. The one thing worth knowing before you render it is that the line takes its size from its parent: a horizontal rule spans its container's width with w-full, and a vertical rule fills its parent's height with h-full, so the element you wrap it in decides how far the divider runs.

Run the CLI from your project root to add the Separator source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single separator.tsx — no other files, because the component has no peer dependency beyond React and the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits.

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 — a one-pixel rule that stretches 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 underlying <div> carries role="separator", so assistive technology announces it as a divider rather than skipping past it as empty markup — the grouping you see is the grouping a screen reader hears. Since the component holds no state, you can render it in a Server Component or a client component with no boundary to think about. Pair it with a Card to split a header from its body.

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 mirrors 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 row of inline stats, or a nav-style row where a thin vertical rule reads cleaner than extra gap. If the line does not show, the parent has no height for h-full to resolve against — the most common vertical-separator mistake.

Every class the component renders lives in one small styles object at the top of the file you own — 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 the <div>. Make the rule 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 at a call site with a margin utility like my-4. The className you pass merges after the base style, so a single <Separator className="my-6 bg-primary/20" /> thickens, tints, or spaces one divider without touching the shared file. Because the default reads the --border theme token, adjusting that value in theming re-themes every separator across the app for dark and light mode at once. The verbatim source below is the whole component.