Corner Frame

Stable

Non-destructive tactical corner brackets that instrument surfaces with technical HUD framing without altering underlying layout boundaries or clipping content.

Installation

$pnpm add @siberui/react

Import

tsx

import { CornerFrame, CornerMarker } from '@siberui/react';

Basic Usage & Technical Framing

Wrap any card, terminal, or widget inside CornerFrame to project glowing hairline corner brackets over its perimeter.

INSTRUMENTED TELEMETRY TARGET

LOCKED

Corner brackets automatically scale and hug the outer perimeter.

tsx

<CornerFrame signal="cyan" className="max-w-md w-full p-6 rounded-xl bg-[#070b14] border border-white/[0.06]">
  <div className="space-y-2">
    <div className="flex items-center justify-between">
      <span className="font-mono text-xs font-bold text-cyan-400">INSTRUMENTED TELEMETRY TARGET</span>
      <Badge variant="neon" size="sm">LOCKED</Badge>
    </div>
    <p className="text-xs text-slate-400">
      Corner brackets automatically scale and hug the outer perimeter.
    </p>
  </div>
</CornerFrame>

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

Select among Siber UI's curated cybernetic signal tokens: cyan, violet, green, amber, rose, and neutral.

SIGNAL: cyan

SIGNAL: violet

SIGNAL: green

SIGNAL: amber

SIGNAL: rose

SIGNAL: neutral

tsx

<div className="grid grid-cols-2 md:grid-cols-3 gap-4 w-full max-w-2xl">
  {(['cyan', 'violet', 'green', 'amber', 'rose', 'neutral'] as const).map((sig) => (
    <CornerFrame
      key={sig}
      signal={sig}
      className="p-4 rounded-xl bg-[#050811] border border-white/[0.06] flex flex-col items-center justify-center min-h-[90px]"
    >
      <span className="font-mono text-xs uppercase text-slate-300">
        SIGNAL: {sig}
      </span>
    </CornerFrame>
  ))}
</div>

Custom Corner Arrangements (corners prop)

Render specific corner pairs via the corners array (e.g. diagonal ['tl', 'br'] or top brackets ['tl', 'tr']).

DIAGONAL CORNERS

Top-left and bottom-right brackets only.

TOP BRACKETS

Top-left and top-right brackets only.

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <CornerFrame
    signal="cyan"
    corners={['tl', 'br']}
    className="p-6 rounded-xl bg-[#050811] border border-white/[0.06]"
  >
    <p className="font-mono text-xs text-cyan-300 font-bold mb-1">DIAGONAL CORNERS</p>
    <p className="text-xs text-slate-400">Top-left and bottom-right brackets only.</p>
  </CornerFrame>

  <CornerFrame
    signal="green"
    corners={['tl', 'tr']}
    className="p-6 rounded-xl bg-[#050811] border border-white/[0.06]"
  >
    <p className="font-mono text-xs text-emerald-300 font-bold mb-1">TOP BRACKETS</p>
    <p className="text-xs text-slate-400">Top-left and top-right brackets only.</p>
  </CornerFrame>
</div>

Standalone CornerMarker Primitives

Use CornerMarker for granular positioning inside bespoke SVG compositions or custom dialog overlays.

Individually composed 12px corner markers

tsx

<div className="relative p-8 rounded-xl bg-[#070b14] border border-white/[0.06] w-full max-w-md">
  <CornerMarker position="tl" signal="cyan" size={12} />
  <CornerMarker position="tr" signal="cyan" size={12} />
  <CornerMarker position="bl" signal="cyan" size={12} />
  <CornerMarker position="br" signal="cyan" size={12} />
  <p className="text-center font-mono text-xs text-slate-300">
    Individually composed 12px corner markers
  </p>
</div>

Frosted Cyber-Glass Instrument Reticle

Nest corner frames on top of acrylic glass panels with circuit textures and active border sweeps.

ORBITAL TARGETING POD

STANDBY

Azimuth: 142.84° • Elevation: +38.12° • Range: 840 km

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">
  <CornerFrame signal="cyan" size="md" className="relative z-10 p-6 rounded-xl bg-black/40 border border-white/[0.08] space-y-4">
    <div className="flex items-center justify-between pb-2 border-b border-white/[0.08]">
      <span className="font-mono text-xs font-bold text-white">ORBITAL TARGETING POD</span>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>
    <p className="text-xs text-slate-300 leading-relaxed font-mono">
      Azimuth: 142.84° • Elevation: +38.12° • Range: 840 km
    </p>
  </CornerFrame>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Surveillance Viewfinder

Composite mission viewfinder card with tactical reticles.

TARGET VIEWPORT

ACTIVE

Optical surveillance sensor feed from Sector 04.

OPTICAL TRACKING LOCK

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">TARGET VIEWPORT</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Optical surveillance sensor feed from Sector 04.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <CornerFrame signal="cyan" className="p-6 rounded-xl bg-[#040711] border border-cyan-500/20 text-center space-y-3">
      <Crosshair className="h-8 w-8 text-cyan-400 mx-auto animate-pulse" />
      <span className="font-mono text-xs text-cyan-300 block">OPTICAL TRACKING LOCK</span>
      <Button variant="neon" size="sm" glow className="w-full">ENGAGE SENSOR</Button>
    </CornerFrame>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
signal	Accent glow color of the hairline corner marks.	"cyan" \| "violet" \| "green" \| "amber" \| "rose" \| "neutral"	"cyan"
size	Physical dimension of corner mark brackets ("sm" = 8px, "md" = 10px).	"sm" \| "md"	"md"
corners	Array of corner positions to render.	Array<'tl' \| 'tr' \| 'bl' \| 'br'>	['tl', 'tr', 'bl', 'br']

Accessibility

Decorative Framing: CornerFrame marks are purely decorative and carry zero intrusive ARIA requirements, leaving inner content completely accessible.

Best Practices

Judicious Usage: Use CornerFrame on selected items, focused targeting modules, or primary dashboard heroes to accentuate them without visual clutter.