Docs
Separator

Separator

Visually or semantically separates content.

DocsAPI ReferenceSource

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Installation

Install the following dependencies:

npm install @radix-ui/react-separator

Copy and paste the following code into your project.

'use client';
 
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const Separator = forwardRef<
    ElementRef<typeof SeparatorPrimitive.Root>,
    ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
    <SeparatorPrimitive.Root
        ref={ref}
        decorative={decorative}
        orientation={orientation}
        className={clsx(
            styles.base,
            {
                [styles.vertical]: orientation === 'vertical',
                [styles.horizontal]: orientation === 'horizontal',
            },
            className
        )}
        {...props}
    />
));
Separator.displayName = SeparatorPrimitive.Root.displayName;
 
export { Separator };

Update the import paths to match your project setup.

Usage

import { Separator } from '@/components/ui/separator';
<Separator />