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.

The Separator's default styling is intentional: one pixel, the bg-border token, full width. To make the divider read as a stronger break — at the end of a section, between two unrelated blocks — bump the thickness with className="h-0.5" or swap the colour with className="bg-primary". The cn() utility merges with later-class precedence, so the className you pass wins against the defaults baked into the styles object.

For a softer divider that fades into the page, reach for a translucent token: bg-muted-foreground/20 is the muted text colour at twenty percent opacity. The example below stacks three Separator variants: the default, a thicker primary-coloured rule, and a faded one. Use the same idiom for vertical Separators — w-0.5 for thickness, any bg-* utility for colour. For a labelled divider ("OR" between two auth methods), wrap the Separator and an inline label in a flex row.

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.