Separator

Stable

Radix UI-backed divider primitives featuring 1px laser signal wires, neon glow halos, and directional gradient fades in horizontal and vertical orientations.

Installation

$pnpm add @siberui/react

Import

tsx

import { Separator } from '@siberui/react';

Basic Horizontal & Vertical Anatomy

Separators provide structural visual partitioning between distinct sections and metric groups.

ORBITAL GATEWAY LOGS

Past 24 hours incident telemetry.

AUTH

EGRESS

FIREWALL

tsx

<div className="w-full max-w-sm p-6 rounded-2xl border border-white/[0.06] bg-[#050811] space-y-4">
  <div className="space-y-1">
    <h4 className="text-sm font-bold text-white">ORBITAL GATEWAY LOGS</h4>
    <p className="text-xs text-slate-400">Past 24 hours incident telemetry.</p>
  </div>
  <Separator />
  <div className="flex h-5 items-center justify-between text-xs font-mono text-slate-300">
    <span>AUTH</span>
    <Separator orientation="vertical" />
    <span>EGRESS</span>
    <Separator orientation="vertical" />
    <span>FIREWALL</span>
  </div>
</div>

Variants (Signal Laser, Neon Glow, Subtle Hairline)

Select between signal (laser wire fade), glow (illuminated neon beam), gradient (neutral glass gradient), default, or subtle.

SIGNAL LASER WIRE

NEON GLOW BEAM

GRADIENT FADE

SUBTLE HAIRLINE

tsx

<div className="space-y-6 w-full max-w-md">
  <div>
    <span className="text-xs font-mono text-cyan-400 mb-2 block">SIGNAL LASER WIRE</span>
    <Separator variant="signal" />
  </div>

  <div>
    <span className="text-xs font-mono text-cyan-300 mb-2 block">NEON GLOW BEAM</span>
    <Separator variant="glow" />
  </div>

  <div>
    <span className="text-xs font-mono text-slate-400 mb-2 block">GRADIENT FADE</span>
    <Separator variant="gradient" />
  </div>

  <div>
    <span className="text-xs font-mono text-slate-500 mb-2 block">SUBTLE HAIRLINE</span>
    <Separator variant="subtle" />
  </div>
</div>

Toolbar & Monospace Header Dividers

Use vertical signal separators inside action bars and metric toolbars.

NODE_01

UPTIME: 99.98%

ACTIVE

tsx

<div className="flex items-center gap-4 p-4 rounded-xl bg-[#050811] border border-white/[0.06] w-full max-w-md">
  <span className="text-xs font-mono font-bold text-cyan-400">NODE_01</span>
  <Separator orientation="vertical" variant="signal" className="h-6" />
  <span className="text-xs font-mono text-slate-300">UPTIME: 99.98%</span>
  <Separator orientation="vertical" variant="signal" className="h-6" />
  <Badge variant="neon" size="sm">ACTIVE</Badge>
</div>

Frosted Cyber-Glass Partition Card

Layer glowing separators inside acrylic glass dialogs on circuit textures with perimeter beam sweeps.

CYBER LATTICE PARTITION

STANDBY

Partition 0x48: Isolated air-gapped cryptographic enclave active.

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden space-y-4">
  <div className="relative z-10 flex items-center justify-between">
    <span className="font-mono text-xs font-bold text-white tracking-wider">CYBER LATTICE PARTITION</span>
    <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
  </div>

  <Separator variant="signal" className="relative z-10" />

  <p className="relative z-10 text-xs font-mono text-slate-300">
    Partition 0x48: Isolated air-gapped cryptographic enclave active.
  </p>

  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Partition Deck

Composite mission defense card with segmented telemetry tiers.

DEFENSE TELEMETRY TIERS

ACTIVE

TIER 01: SATELLITE ORBITLOCKED

TIER 02: GROUND RELAYS100% ONLINE

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">DEFENSE TELEMETRY TIERS</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
  </CardHeader>

  <Separator variant="signal" />

  <CardContent className="p-6 space-y-4 font-mono text-xs">
    <div className="flex justify-between">
      <span className="text-slate-400">TIER 01: SATELLITE ORBIT</span>
      <span className="text-cyan-400 font-bold">LOCKED</span>
    </div>
    <Separator variant="subtle" />
    <div className="flex justify-between">
      <span className="text-slate-400">TIER 02: GROUND RELAYS</span>
      <span className="text-emerald-400 font-bold">100% ONLINE</span>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	Visual gradient or glow styling.	"default" \| "subtle" \| "signal" \| "glow" \| "gradient"	"default"
orientation	Physical layout direction.	"horizontal" \| "vertical"	"horizontal"
decorative	Whether the element is purely visual (renders aria-hidden).	boolean	true

Accessibility

W3C WAI-ARIA Separator: Built on Radix UI Separator Primitive. Defaults to decorative={true} for purely cosmetic dividers.

Best Practices

Signal Lines: Use variant="signal" to establish high-impact structural breaks between major section headers and card bodies.