Devie UI
Version: 2026-02-14

<Separator />

Or
Left
Right

The Separator component is built on top of the Base UI Separator component. It supports all Base UI props including orientation, plus an additional text prop for displaying text in the middle of horizontal separators.

Installation

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

// https://devie-ui.com/components/separator
// https://base-ui.com/react/components/separator
 
import { Separator as BaseSeparator } from "@base-ui/react/separator";
import clsx from "clsx";
import styles from "./Separator.module.scss";
 
function Separator({
  text,
  orientation = "horizontal",
  className,
  style,
  ...props
}: Separator.Props) {
  if (text && orientation === "horizontal") {
    return (
      <div className={styles.withTextContainer} style={style}>
        <BaseSeparator
          orientation="horizontal"
          className={clsx(styles.separator, className)}
          {...props}
        />
        <span className={styles.text}>{text}</span>
        <BaseSeparator
          orientation="horizontal"
          className={clsx(styles.separator, className)}
          {...props}
        />
      </div>
    );
  }
 
  return (
    <BaseSeparator
      orientation={orientation}
      className={clsx(styles.separator, className)}
      style={style}
      {...props}
    />
  );
}
 
namespace Separator {
  export interface Props extends BaseSeparator.Props {
    text?: string;
  }
}
 
export default Separator;

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