Skip to content
earthlingUI
Components

Separator

Creates a visual or semantic boundary between adjacent groups of content.

Overview
Activity

Playground

orientation

Sets the divider axis.

decorative

Removes separator semantics when it is purely visual.

Usage

tsx
import { Separator } from "earthling-ui/separator";

export function Example() {
  return (
    <>
      <Separator decorative={false} aria-label="Section divider" />
    </>
  );
}
  • Keep decorative true when the surrounding structure already communicates the grouping.
  • Set decorative to false only when the separator conveys structure, and give it an accessible label when useful.
  • Vertical separators need a parent with an explicit height.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

bash
npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx
// Generated by dts-bundle-generator v9.5.1

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

export declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

export {};

Runtime dependencies: @radix-ui/react-separator, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Separator implementation
tsx
"use client";

import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "@/utils/cn";

const Separator = forwardRef<
  ComponentRef<typeof SeparatorPrimitive.Root>,
  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-current/15",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
);
Separator.displayName = SeparatorPrimitive.Root.displayName;

export { Separator };