The Separator component visually divides content using horizontal or vertical lines, creating clear distinctions between different sections and improving visual organization.

Welcome to Rad UI

Modern

Accessible

Performant

import Separator from "@radui/ui/Separator"
import Text from "@radui/ui/Text"

const SeparatorExample = () => (
    <div>
        <div>
            <Text>Welcome to Rad UI</Text>
        </div>
        <Separator />
        <div style={{ display:"flex", alignItems: "center" }}>
            <Text>Modern</Text>
            <Separator orientation="vertical" />
            <Text>Accessible</Text>
            <Separator orientation="vertical" />
            <Text>Performant</Text>
        </div>
    </div>
)
  • Support for both horizontal and vertical orientation
  • Customizable with different color themes
  • Helps establish visual hierarchy in layouts
  • Simple integration with minimal props required
  • Lightweight implementation with proper spacing

A component that visually separates content with a horizontal or vertical line, providing visual hierarchy and improved content organization.

PropTypeDefault

orientation

enum

'horizontal'

className

string''

customRootClass

string''

color

string''
Edit this page on GitHub