Separator

Visually or semantically separates content.

Features

Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

npm install @radix-ui/react-separator

npm install @radix-ui/react-separator

Anatomy

Import the components and piece the parts together.

import * as Separator from '@radix-ui/react-separator';

export default () => <Separator.Root />;

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

Basic example

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 />;

// 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 />;

API Reference

Root

The separator.

Prop	Type	Default
`as`	`enum`	`div`
`orientation`	`enum`	`"horizontal"`
`decorative`	`boolean`

Accessibility

Adheres to the separator role requirements.