Component

Separator

A thin rule that visually divides content. Supports horizontal and vertical orientations plus an optional centered label (a labeled divider).

Basic

A horizontal rule spanning the full width of its container.

Content above the divider.

Content below the divider.

Labeled

Pass a label to render a centered caption flanked by two lines.

Continue with

Vertical

Set orientation="vertical" to divide inline content. The parent needs a defined height.

Home

Docs

Settings

Installation

$pnpm add @refraction-ui/react-separator

Usage

tsx

import { Separator } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <div>
      <p>Above</p>
      <Separator />
      <p>Below</p>

      {/* Labeled divider */}
      <Separator label="or" />

      {/* Vertical */}
      <div className="flex h-6 items-center gap-3">
        <span>Home</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
      </div>
    </div>
  )
}

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator line.
`label`	`React.ReactNode`	--	Optional centered label (the "labeled divider" variant). Only meaningful for horizontal separators.
`decorative`	`boolean`	`true`	When true the separator is purely visual (role="none"). Set false to expose it as a semantic role="separator" for assistive tech.
`className`	`string`	--	Additional CSS classes to apply.