rapidUI

Separator

Horizontal or vertical divider line.

registry.json

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/separator.json

Installs to @/components/ui/separator.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0

Copy the source into your project:

components/ui/separator.tsx
'use client'

import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
import { cn } from '@/lib/utils'

function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
	return (
		<SeparatorPrimitive
			data-slot="separator"
			orientation={orientation}
			// A vertical separator fills a row that has a set height, and a row that takes its height from its content gets a
			// 16px line; give it `h-*` for another length and it stays centred. The classes come from the prop, not data-*
			// variants, so a caller's `h-*` or `self-*` replaces them instead of losing in the cascade.
			className={cn(
				'shrink-0 bg-border',
				orientation === 'vertical' ? 'h-full min-h-4 w-px self-center' : 'h-px w-full',
				className,
			)}
			{...props}
		/>
	)
}

export { Separator }

A separator component built on top of Base UI Separator, providing an accessible way to visually separate content.

Features

  • Built on the Base UI Separator primitive
  • Horizontal and vertical orientations (vertical separators stretch to the height of a flex parent)
  • Renders role="separator" with aria-orientation; pass role="none" for a purely decorative line
  • Single solid style; customize color, thickness or dashes via className
  • data-slot="separator" and data-orientation for styling hooks

Usage

import { Separator } from '@/components/ui/separator'

// Basic usage
export function BasicSeparator() {
  return (
    <div className="space-y-4">
      <div>Content above</div>
      <Separator />
      <div>Content below</div>
    </div>
  )
}

// Vertical separator
export function VerticalSeparator() {
  return (
    <div className="flex h-5 items-center space-x-4">
      <div>Left</div>
      <Separator orientation="vertical" />
      <div>Right</div>
    </div>
  )
}

// With custom styles
export function CustomSeparator() {
  return (
    <div className="space-y-4">
      <div>Content above</div>
      <Separator className="bg-primary" />
      {/* Dashed */}
      <Separator className="bg-transparent border-t border-dashed" />
      <div>Content below</div>
    </div>
  )
}

// With text overlay
export function TextSeparator() {
  return (
    <div className="relative">
      <div className="absolute inset-0 flex items-center">
        <Separator className="w-full" />
      </div>
      <div className="relative flex justify-center text-xs">
        <span className="bg-background px-2 text-muted-foreground">
          or
        </span>
      </div>
    </div>
  )
}

Examples

Default

A horizontal separator under a heading, and vertical separators between navigation links.

Horizontal

Separators between the rows of an opening hours list.

Vertical

Vertical separators between the metadata of a case.

Custom Styles

A fee summary with a dashed separator above the total and a thicker primary line below it. There is no built-in variant prop; a dashed separator is made with className="bg-transparent border-t border-dashed" (or border-l when vertical).

With Text

A separator with overlaid text between two ways to continue.

Props

Separator

  • orientation - The orientation of the separator ('horizontal' | 'vertical', default 'horizontal')
  • className - Additional CSS classes
  • render - The element to render instead of a div
  • All other Base UI Separator props

Accessibility

The Separator component follows WAI-ARIA guidelines:

  • Separators use role="separator" with aria-orientation
  • For a purely visual line that assistive technology should skip, pass role="none"

Best Practices

  1. Semantic Usage:

    • Use semantic separators for content boundaries
    • Use role="none" for purely visual separation
    • Consider content relationships
    • Maintain logical grouping

  2. Visual Design:

    • Use consistent spacing
    • Consider color contrast
    • Maintain visual hierarchy
    • Keep separators subtle

  3. Orientation:

    • Use horizontal for stacked content
    • Use vertical for inline content
    • Consider responsive layouts
    • Maintain alignment

  4. Implementation:

    • Choose appropriate orientation
    • Set proper spacing
    • Consider dark mode
    • Test responsiveness

  5. Accessibility:

    • Use semantic separators when appropriate
    • Test with screen readers
    • Maintain ARIA attributes
  • Card
  • Button Group