Separator

Visually or semantically separates content.

Features

  • Supports horizontal and vertical orientations.

Install the component from your command line.

npm install @radix-ui/react-separator

Import the components and piece the parts together.

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

Create your styled separator component from the primitive part.

import { styled } from 'path-to/stitches.config';
import * as Separator from '@radix-ui/react-separator';
const StyledSeparator = styled(Separator.Root, {
backgroundColor: 'gainsboro',
height: 1,
margin: '20px 0',
});
export default () => <StyledSeparator />;

The separator.

PropTypeDefault
asenumdiv
orientationenum"horizontal"
decorativebooleanNo default value

Adheres to the separator role requirements.