ReUI
Components

Separator

Visually or semantically separates content into groups.

Installation

Install ReUI

Refer to the Installation Guide for detailed instructions on setting up ReUI dependencies in your project.

Install dependencies

npm install @radix-ui/react-separator

Add component

Copy and paste the following code into your project’s components/ui/separator.tsx file.

'use client';

import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from '@/lib/utils';

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
        className,
      )}
      {...props}
    />
  );
}

export { Separator };

Examples

Default

Loading

API Reference

This component is built using Radix UI Separator primitives. For detailed information, please visit the full API reference.

Separator

This component is based on the Separator.Root primitive and includes the following custom props:

PropTypeDefault
orientation enum "horizontal"
decorative booleantrue
className string