Signal Border

Stable

Instrumented surface boundary primitive featuring a crisp 1px optical laser hairline, ambient top gradient illumination, and integrated technical HUD status badges with zero background wash.

Installation

$pnpm add @siberui/react

Import

tsx

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

Basic Instrumented Hairline Edge

Positioned as a non-intrusive overlay inside a relative container, rendering an ambient 1px neon hairline perimeter while maintaining 100% dark background contrast.

INSTRUMENTED CORE

Clean 1px laser gradient hairline edge with high-contrast text readability.

tsx

<div className="relative p-6 sm:p-8 rounded-2xl bg-[#060a14] border border-white/[0.06] max-w-md w-full">
  <SignalBorder signal="cyan" glow />
  <div className="relative z-10 space-y-2">
    <span className="text-xs font-mono text-cyan-400 font-bold uppercase tracking-widest">
      INSTRUMENTED CORE
    </span>
    <p className="text-xs text-slate-300">
      Clean 1px laser gradient hairline edge with high-contrast text readability.
    </p>
  </div>
</div>

Signal Spectrum (Cyan, Violet, Green, Amber, Rose)

Five core neon signal color spectrum options in the SiberUI design system.

cyan

violet

green

amber

rose

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
  {['cyan', 'violet', 'green', 'amber', 'rose'].map((sig) => (
    <div key={sig} className="relative p-5 rounded-xl bg-[#060a12] border border-white/[0.06] text-center">
      <SignalBorder signal={sig} glow />
      <span className="text-xs font-mono uppercase font-bold tracking-wider">{sig}</span>
    </div>
  ))}
</div>

Edge Placements (All, Top, Bottom, Sides)

The placement prop controls which edges receive the hairline laser stroke: "all" | "top" | "bottom" | "sides".

TOP ONLY

BOTTOM ONLY

SIDES ONLY

tsx

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full">
  <div className="relative p-6 rounded-xl bg-[#060912] border border-white/[0.04]">
    <SignalBorder signal="cyan" placement="top" glow />
    <span className="text-xs font-mono text-slate-300">TOP ONLY</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#060912] border border-white/[0.04]">
    <SignalBorder signal="green" placement="bottom" glow />
    <span className="text-xs font-mono text-slate-300">BOTTOM ONLY</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#060912] border border-white/[0.04]">
    <SignalBorder signal="amber" placement="sides" glow />
    <span className="text-xs font-mono text-slate-300">SIDES ONLY</span>
  </div>
</div>

Border Effects (Static, Pulse, Dashed)

Use effect to configure border animation styles: "static", "pulse" (breathing signal), or "dashed" (technical segmented stroke).

EFFECT: PULSE (BREATHING)

EFFECT: DASHED (TECHNICAL)

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 w-full">
  <div className="relative p-6 rounded-xl bg-[#060912] border border-white/[0.06] min-w-0">
    <SignalBorder signal="cyan" effect="pulse" glow />
    <span className="text-xs font-mono text-cyan-400 font-bold">EFFECT: PULSE (BREATHING)</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#060912] border border-white/[0.06] min-w-0">
    <SignalBorder signal="violet" effect="dashed" />
    <span className="text-xs font-mono text-violet-400 font-bold">EFFECT: DASHED (TECHNICAL)</span>
  </div>
</div>

Technical HUD Notch Badge

Attach an embedded status indicator tag flush with the top border using techNotch and notchLabel.

TACTICAL TELEMETRY HUD

Embedded status badge sitting cleanly on the hairline border.

tsx

<div className="relative p-6 sm:p-8 rounded-2xl bg-[#060a14] border border-white/[0.06] max-w-md w-full">
  <SignalBorder signal="cyan" techNotch notchLabel="// NODE.01" notchAlign="left" glow />
  <div className="relative z-10 space-y-2 text-center pt-2">
    <h4 className="text-xs font-mono text-cyan-400 font-bold tracking-widest">TACTICAL TELEMETRY HUD</h4>
    <p className="text-xs text-slate-300">Embedded status badge sitting cleanly on the hairline border.</p>
  </div>
</div>

API Reference

PROPERTIES (7)← swipe to inspect →

Property	Description	Type	Default
signal	Active neon signal accent color theme.	"cyan" \| "violet" \| "green" \| "amber" \| "rose" \| "white"	"cyan"
placement	Border edge placements.	"all" \| "top" \| "bottom" \| "sides"	"all"
effect	Visual animation and stroke pattern.	"static" \| "pulse" \| "dashed"	"static"
techNotch	Embeds a technical HUD status tag badge on the top border.	boolean	false
notchLabel	Custom textual content for the HUD notch badge.	string	"// SYS.01"
notchAlign	Horizontal alignment of the notch badge.	"left" \| "center" \| "right"	"left"
glow	Casts a subtle neon drop-shadow aura around the 1px stroke.	boolean	false

Accessibility

Decorative Element: SignalBorder has aria-hidden="true" and pointer-events-none, ensuring no interference with focus or accessibility tree traversal.