Component

Separator

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

View component changelog

preview

Modern

Accessible

Performant

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

const RadUILogo = () => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="20" viewBox="0 0 951 275" fill="none">
            <path d="M211.75 272.493C194.441 267.63 180.91 259.376 166.776 245.07C145.884 223.912 136.769 201.743 136.804 172.243C136.857 141.767 146.647 117.84 167.751 96.5938C187.507 76.6964 209.675 67.5021 237.998 67.4666C262.471 67.4311 279.638 73.892 295.83 89.2099L305.265 98.138V87.2397C305.265 74.176 306.63 73.6967 318.317 82.6248C327.238 89.4407 337.914 102.877 344.192 115.195C353.556 133.549 353.733 135.111 354.46 204.441L355.152 269.529L350.168 270.115C347.42 270.417 335.396 270.434 323.443 270.133L301.718 269.6V259.926C301.718 254.619 301.292 250.271 300.778 250.271C300.263 250.271 295.67 253.59 290.58 257.637C274.123 270.736 264.741 273.966 241.42 274.57C227.445 274.925 218.117 274.268 211.75 272.493ZM270.044 224.818C281.518 219.191 290.669 209.801 296.77 197.43C301.806 187.188 302.604 183.727 302.604 172.207C302.604 161.185 301.735 157.102 297.657 148.76C284.693 122.366 255.963 109.658 228.971 118.373C216.752 122.331 202.316 135.519 195.931 148.6C182.701 175.651 195.789 210.156 224.537 224.001C234.078 228.598 236.721 229.095 249.401 228.563C258.357 228.19 265.965 226.806 270.044 224.818ZM456.203 272.316C429.938 265.251 404.791 243.845 392.43 218.055C383.474 199.382 380.778 185.609 381.966 164.593C383.58 136.069 394.505 112.622 414.988 93.6651C435.028 75.1167 460.353 66.2241 488.338 67.8571C509.23 69.0995 521.661 74.3002 534.608 87.2575C540.3 92.9551 545.302 97.6233 545.709 97.6233C546.117 97.6233 546.454 75.6492 546.454 48.8116V0H573.943H601.431V134.898V269.795H573.943H546.454V260.033C546.454 254.673 545.709 250.271 544.787 250.271C543.865 250.271 540.07 253.111 536.363 256.59C522.655 269.405 505.559 275.173 481.847 274.996C472.998 274.943 461.47 273.736 456.203 272.316ZM516.022 223.504C527.603 217.718 535.973 208.967 543.049 195.247C546.383 188.786 547.199 184.384 547.252 172.172C547.341 158.292 546.862 156.197 541.294 145.902C534.945 134.205 527.851 127.496 514.532 120.591C503.129 114.663 481.954 114.627 468.901 120.485C458.065 125.348 446.644 137.045 441.235 148.778C435.631 160.936 435.755 185.928 441.466 196.667C456.877 225.634 488.782 237.136 516.022 223.504ZM750.206 269.156C742.776 266.955 732.632 262.536 727.648 259.341C706.633 245.851 688.81 219.351 684.908 195.815C683.613 187.951 683.081 161.646 683.4 120.698L683.897 57.6865L702.908 57.1895L721.902 56.6748L722.416 124.638L722.913 192.584L727.488 202.364C736.019 220.54 752.618 231.935 773.315 233.817C795.217 235.805 818.041 222.634 827.228 202.737C830.934 194.714 831.129 191.501 831.98 126.023L832.867 57.6865L851.932 57.1895L870.996 56.6748L870.943 126.413C870.908 193.862 870.784 196.507 866.935 207.778C858.192 233.479 842.089 252.223 819.034 263.53C797.114 274.286 773.918 276.185 750.206 269.156ZM19.171 270.31L0 269.671L0.638443 205.399C1.24142 144.518 1.47197 140.471 5.23169 129.2C10.8358 112.391 24.2963 93.0084 36.8878 83.6543L47.2271 75.9687L47.7059 81.9148C47.9719 85.1808 48.6104 89.7602 49.1247 92.0854C50.0469 96.1856 50.3129 96.0791 58.0274 88.3402C62.4078 83.9738 70.3529 78.1696 75.691 75.4717C86.5977 69.9515 109.138 66.1886 119.566 68.1588L126.146 69.3835V93.0084V116.633L109.741 117.698C87.0056 119.189 80.8872 121.514 69.2888 133.069C62.0354 140.294 58.8964 144.997 57.389 150.872C56.1653 155.683 55.1012 180.621 54.6933 213.458C54.3032 243.473 53.647 268.393 53.2036 268.837C51.6784 270.363 38.2002 270.949 19.171 270.31ZM929.946 270.168L911.75 269.671L912.211 163.67L912.673 57.6865L931.737 57.1895L950.802 56.6748V163.137C950.802 221.676 950.199 269.831 949.472 270.133C948.745 270.434 939.948 270.452 929.946 270.168Z" fill="currentColor" />
        </svg>
    );
};

const SeparatorExample = () => (
    <div>
        <div>
            <RadUILogo />
        </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
Uses semantic separator roles by default
Can opt into decorative presentation when the divider is visual-only
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	''
decorative	boolean	false

Keyboard Interactions

Shortcut	Description
`None`	Separators are static by default and do not add component-specific keyboard shortcuts.

ARIA References

Reference	What Rad UI follows
Separator role	Uses role="separator" for semantic dividers, adds aria-orientation="vertical" when needed, and switches to role="none" when decorative is true.