Devie UI

<Separator />

Or
Left
Right

The Separator component is built on top of the Base UI Separator component as a baseline, with a couple of additional functionalities that we deemed essential: text and orientation.

Installation

Here is the component implementation code that you can copy to your project:

import { Separator as BaseSeparator } from "@base-ui-components/react/separator";
import clsx from "clsx";
import type { CSSProperties } from "react";
import styles from "./Separator.module.scss";
 
interface Props {
  text?: string;
  orientation?: "horizontal" | "vertical";
  className?: string;
  style?: CSSProperties;
}
 
const separatorStyles = styles.separator;
const withTextContainer = styles.withTextContainer;
const textStyle = styles.text;
 
export default function Separator({
  text,
  orientation = "horizontal",
  className,
  style,
}: Props) {
  if (text && orientation === "horizontal") {
    return (
      <div className={withTextContainer} style={style}>
        <BaseSeparator
          orientation="horizontal"
          className={clsx(separatorStyles, className)}
        />
        <span className={textStyle}>{text}</span>
        <BaseSeparator
          orientation="horizontal"
          className={clsx(separatorStyles, className)}
        />
      </div>
    );
  }
 
  return (
    <BaseSeparator
      orientation={orientation}
      className={clsx(separatorStyles, className)}
      style={style}
    />
  );
}

Use Cases

Horizontal and vertical separators

The Separator component supports both horizontal and vertical orientations. Use the orientation prop with horizontal (default) or vertical to control the separator direction.

Separator with text

For horizontal separators, you can add text in the middle using the text prop. This is useful for "or" dividers or section labels.

Or

Vertical separator

Vertical separators can be used to divide content horizontally, such as in navigation bars or between columns.

Left
Right