Separator

A semantic divider element accessible to screen readers. Renders a horizontal line by default; switch to vertical for inline layouts.

Horizontal

Horizontal separator between two blocks of content.

Another paragraph that follows it.

import { Separator } from "@brijbyte/agentic-ui/separator";

import "@brijbyte/agentic-ui/separator.css";

export default function BasicDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", width: "280px" }}>
      <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-secondary)", margin: 0 }}>
        Horizontal separator between two blocks of content.
      </p>
      <Separator />
      <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-secondary)", margin: 0 }}>
        Another paragraph that follows it.
      </p>
    </div>
  );
}

Vertical

Home Docs Blog Support

import { Separator } from "@brijbyte/agentic-ui/separator";
import "@brijbyte/agentic-ui/separator.css";

const LINKS = ["Home", "Docs", "Blog", "Support"] as const;
const AUTH = ["Log in", "Sign up"] as const;

export default function VerticalDemo() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", flexWrap: "wrap" }}>
      {LINKS.map((link) => (
        <a
          key={link}
          href="/"
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: "var(--font-size-sm)",
            color: "var(--color-primary)",
            textDecoration: "none",
          }}
        >
          {link}
        </a>
      ))}

      <Separator orientation="vertical" style={{ height: "1rem" }} />

      {AUTH.map((link) => (
        <a
          key={link}
          href="/"
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: "var(--font-size-sm)",
            color: "var(--color-accent-11)",
            textDecoration: "none",
          }}
        >
          {link}
        </a>
      ))}
    </div>
  );
}

API Reference

Separator

base-ui docs ↗

A semantic divider accessible to screen readers. Renders a horizontal
line by default; switch to vertical for inline layouts.

Prop	Type	Default
orientation	`"horizontal" \| "vertical"`	`horizontal`
The orientation of the separator.
className	`string`	—

CSS Class Names

Available as keys on the SeparatorStyles object. Each key maps to a hashed CSS module class name at runtime.

separator