React Separator Component Examples

The simplest use of a Separator is to drop one between two blocks of content to give them a visible break. The default orientation is 'horizontal', so no prop is needed — the component renders w-full h-px bg-border, which fills the available width and uses the bg-border token so the rule colour follows the theme along with every other border in the project.

Pass className="my-6" (or any margin utility) to add breathing room above and below. Without margin the divider sits flush against its siblings, which is what you want inside a tight list but rarely what you want between paragraphs. The example below pairs the divider with two <p> elements and adds vertical spacing through className — exactly the shape the Separator docs preview uses for the horizontal case.

Pass orientation="vertical" to switch to the vertical rule. The component swaps from w-full h-px bg-border to h-full w-px bg-border, so it now stretches to the height of its parent. That means a vertical Separator needs a sized container — a flex row with a fixed height, a toolbar, a header — or it collapses to zero height because there is no intrinsic content to measure.

The example below is the metadata strip you see under a blog post: author, separator, date, separator, reading time. The wrapper is a flex row with items-center and a h-6 height so the dividers have something to stretch into. The mx-3 on each Separator adds a touch of horizontal breathing room. For a stack of links separated by a slash or chevron rather than a rule, the Breadcrumb component handles the role with built-in spacing.

One pixel, the bg-border token, full width — the defaults are deliberately quiet, because most dividers should be. When a break needs to read louder, className is the whole escape hatch. cn() merges what you pass over the class pulled from the styles object with later-class precedence, so h-0.5 beats h-px and bg-primary beats bg-border with no variant API sitting in between.

That leaves three knobs. Thickness: h-0.5 or h-1 on a horizontal rule, w-0.5 on a vertical one. Colour: any bg-* utility, including a token at partial opacity — bg-muted-foreground/20 is the muted text colour at twenty percent, which reads as a hairline that recedes into the page rather than cutting it. Spacing: the margin utilities, since the component ships none of its own. The example below stacks the default rule, a thicker primary-coloured one, and a faded one so all three are visible together.

For a divider with a word in the middle — the "OR" between an email form and an OAuth Button — the Separator still does the work. Put the label in a flex row between two Separators, give each flex-1, and the rules split the remaining width evenly on either side.

A panel that closes with a row of actions reads better with a divider between the body and the footer. Drop a Separator between the content and the action row; the rule picks up the bg-border colour, which lines up with the panel's own border token. The Separator's w-full spans the container's inner width, and my-4 (or whatever margin matches your design) gives it room to breathe.

The example below stacks a panel header, body copy, a Separator, and a Button row. The Separator is a sibling of the body and the footer, sitting in the document flow between them. Because the Separator is a server-safe primitive with no client directive, the surrounding panel can render server-side and the divider tags along without any hydration cost. The same pattern works inside the Card component once you slot the divider between its body and footer regions.

A sidebar that lists several groups of links benefits from a divider between each group — it makes the grouping visible without an extra heading or extra whitespace alone. Stack the groups and drop a Separator between them with vertical margin. The example below builds a settings sidebar with three groups: account, preferences, and a danger zone.

Because every Separator picks up the bg-border token, the rules stay consistent whether the user is on the light or dark theme — no per-theme override needed. The component file is small enough that the same idiom holds inside a popover, a dropdown menu, or any vertical stack of grouped items. Because the Separator carries role="separator", screen readers announce each group break as a thematic divider rather than skipping it silently. The verbatim component source is reproduced in the next section so the entire surface is visible at once.

Every detail above maps back to the same eight-line component file. The styles object holds the two orientation rules, the function reads the orientation prop, merges the matching class with whatever className you passed, and renders a div with role="separator". No state, no refs, no hooks, no Radix package. The full source is reproduced below from packages/drivn/src/registry/components/separator.ts so the entire component is visible at once.

That brevity is the reason a Separator can sit in any context — server component, client component, layout, marketing page — without making decisions about hydration or bundle weight on your behalf. After the Drivn CLI writes the file into your project, it is yours: rename it, change the role, drop the className prop, add a decorative flag of your own. The starting point is small enough that any of those edits is a one-line change.