Components

Separator

Visually or semantically separates content.

import React from 'react';
import * as Separator from '@radix-ui/react-separator';
import './styles.css';
const SeparatorDemo = () => (
<div style={{ width: '100%', maxWidth: 300, margin: '0 15px' }}>
<div className="Text" style={{ fontWeight: 500 }}>
Radix Primitives
</div>
<div className="Text">An open-source UI component library.</div>
<Separator.Root className="SeparatorRoot" style={{ margin: '15px 0' }} />
<div style={{ display: 'flex', height: 20, alignItems: 'center' }}>
<div className="Text">Blog</div>
<Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: '0 15px' }} />
<div className="Text">Docs</div>
<Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: '0 15px' }} />
<div className="Text">Source</div>
</div>
</div>
);
export default SeparatorDemo;

Features

    Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

npm install @radix-ui/react-separator

Anatomy

Import all parts and piece them together.

import * as Separator from '@radix-ui/react-separator';
export default () => <Separator.Root />;

API Reference

Root

The separator.

PropTypeDefault
asChildbooleanfalse
orientationenum"horizontal"
decorativebooleanNo default value
Data attributeValues
[data-orientation]"vertical" | "horizontal"

Accessibility

Adheres to the separator role requirements.

PreviousSelect
NextSlider