Separator

Name: Rad UI
Author: Rad UI Team

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

React
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>
)

Features

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

API Documentation

Separator

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

Prop	Type	Default
orientation	enum	'horizontal'
className	string	''
customRootClass	string	''
color	string	''