Chamfer Card

Stable

Futuristic chassis container featuring 45° beveled diagonal cut corners, 360° continuous hairline perimeter, HUD corner notch accents, and interactive laser sweep hover reflex.

Installation

$pnpm add @siberui/react

Import

tsx

import {
  ChamferCard,
  ChamferCardHeader,
  ChamferCardTitle,
  ChamferCardDescription,
  ChamferCardContent,
  ChamferCardFooter,
} from '@siberui/react';

Basic Usage & 360° Continuous Hairline Border

The dual-polygon nested clipping architecture ensures a crisp 1px hairline border travels continuously across all edges, including 45° diagonal chamfers, with corner HUD notch brackets (//).

NODE.04 // SEC

NEURAL INTERFACE 01

Sub-quantum telemetry buffer

Direct optical neural bridge active. Latency nominal at 0.42ms.

STATUS: SYNCED

tsx

<ChamferCard
  signal="cyan"
  glow
  tag="NODE.04 // SEC"
  statusDot="cyan"
  className="max-w-md w-full"
>
  <ChamferCardHeader>
    <ChamferCardTitle>NEURAL INTERFACE 01</ChamferCardTitle>
    <ChamferCardDescription>Sub-quantum telemetry buffer</ChamferCardDescription>
  </ChamferCardHeader>
  <ChamferCardContent>
    <p className="text-sm text-slate-300">
      Direct optical neural bridge active. Latency nominal at 0.42ms.
    </p>
  </ChamferCardContent>
  <ChamferCardFooter>
    <span className="text-xs font-mono text-cyan-400">STATUS: SYNCED</span>
    <Button size="sm" variant="primary">ACCESS NODE</Button>
  </ChamferCardFooter>
</ChamferCard>

HUD Serial Tags, Status Pulse & Diagonal Notches

Equipped with tactical chassis instrumentation including tag, statusDot, hasTab, and gridSubstrate.

FIREWALL.PRIMARY

ENCLAVE SECURE

Hardware isolated subsystem

0 anomalous frame bursts detected

QUANTUM.09

LEVEL 5

CORE PROCESSOR

Sub-atomic qubit registers

Coherence rate 99.98%

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
  <ChamferCard
    tag="FIREWALL.PRIMARY"
    statusDot="green"
    signal="green"
    gridSubstrate
    glow
  >
    <ChamferCardHeader>
      <ChamferCardTitle className="text-emerald-400 text-sm">ENCLAVE SECURE</ChamferCardTitle>
      <ChamferCardDescription>Hardware isolated subsystem</ChamferCardDescription>
    </ChamferCardHeader>
    <ChamferCardContent>
      <span className="text-xs text-slate-300 font-mono">0 anomalous frame bursts detected</span>
    </ChamferCardContent>
  </ChamferCard>

  <ChamferCard
    hasTab
    tabLabel="LEVEL 5"
    tabSignal="violet"
    tag="QUANTUM.09"
    statusDot="violet"
    signal="violet"
    cornerBolts
    glow
  >
    <ChamferCardHeader>
      <ChamferCardTitle className="text-violet-400 text-sm">CORE PROCESSOR</ChamferCardTitle>
      <ChamferCardDescription>Sub-atomic qubit registers</ChamferCardDescription>
    </ChamferCardHeader>
    <ChamferCardContent>
      <span className="text-xs text-slate-300 font-mono">Coherence rate 99.98%</span>
    </ChamferCardContent>
  </ChamferCard>
</div>

Cut Corner Configurations (tl, tr, bl, br)

Select exact corner cuts using the cutCorners array.

DIAGONAL CUT [tl, br]

OCTAGONAL [all 4 corners]

SINGLE CUT [tr only]

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  {/* Diagonal (tl, br) */}
  <ChamferCard cutCorners={['tl', 'br']} signal="cyan">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-cyan-400 font-semibold">
      DIAGONAL [tl, br]
    </ChamferCardContent>
  </ChamferCard>

  {/* All 4 corners */}
  <ChamferCard cutCorners={['tl', 'tr', 'bl', 'br']} signal="violet">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-violet-400 font-semibold">
      OCTAGONAL [all 4]
    </ChamferCardContent>
  </ChamferCard>

  {/* Single Corner (tr) */}
  <ChamferCard cutCorners={['tr']} signal="green">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-emerald-400 font-semibold">
      SINGLE CUT [tr]
    </ChamferCardContent>
  </ChamferCard>
</div>

Cut Size Scales (sm, md, lg)

Adjust chamfer depth via cutSize: "sm" (10px), "md" (18px), or "lg" (26px).

SM CUT (10px)

MD CUT (18px)

LG CUT (26px)

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <ChamferCard cutSize="sm" signal="cyan">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-slate-300">
      SM CUT (10px)
    </ChamferCardContent>
  </ChamferCard>

  <ChamferCard cutSize="md" signal="cyan">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-slate-300">
      MD CUT (18px)
    </ChamferCardContent>
  </ChamferCard>

  <ChamferCard cutSize="lg" signal="cyan">
    <ChamferCardContent className="p-4 text-center font-mono text-xs text-slate-300">
      LG CUT (26px)
    </ChamferCardContent>
  </ChamferCard>
</div>

Interactive Hover Lift & Laser Shimmer

With interactive and laserSweep enabled, hovering over the card triggers a smooth elevation lift and an angled laser light reflex across the border.

CLICKABLE // CARD_01

INTERACTIVE NODE

Hover over me to see the laser sweep effect

Card elevates and reflects light on hover.

SECURITY // WARNING

TELEMETRY WARNING

Interactive amber chassis

Hover for laser reflex animation.

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
  <ChamferCard
    interactive
    laserSweep
    signal="cyan"
    glow
    tag="CLICKABLE // CARD_01"
    statusDot="cyan"
  >
    <ChamferCardHeader>
      <ChamferCardTitle>INTERACTIVE NODE</ChamferCardTitle>
      <ChamferCardDescription>Hover over me to see the laser sweep effect</ChamferCardDescription>
    </ChamferCardHeader>
    <ChamferCardContent>
      <p className="text-xs text-slate-400">Card elevates and reflects light on hover.</p>
    </ChamferCardContent>
  </ChamferCard>

  <ChamferCard
    interactive
    laserSweep
    signal="amber"
    glow
    tag="SECURITY // WARNING"
    statusDot="amber"
  >
    <ChamferCardHeader>
      <ChamferCardTitle className="text-amber-400">TELEMETRY WARNING</ChamferCardTitle>
      <ChamferCardDescription>Interactive amber chassis</ChamferCardDescription>
    </ChamferCardHeader>
    <ChamferCardContent>
      <p className="text-xs text-slate-400">Hover for laser reflex animation.</p>
    </ChamferCardContent>
  </ChamferCard>
</div>

Tactical Defense Enclave Composite

Composite mission security card with embedded threat level gauges and cypher text headers.

SEC_OPS // NODE_7

THREAT MONITOR

DEFCON 2 ALERT

CRITICAL

ACTIVE_INTRUSION_DETECTED

92%INCURSION PROBABILITY

tsx

<ChamferCard
  hasTab
  tabLabel="THREAT MONITOR"
  tabSignal="rose"
  tag="SEC_OPS // NODE_7"
  statusDot="rose"
  cutCorners={['tl', 'br']}
  cornerBolts
  gridSubstrate
  signal="rose"
  glow
  className="max-w-md mx-auto"
>
  <ChamferCardHeader>
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <Shield className="h-4 w-4 text-rose-400" />
        <ChamferCardTitle className="text-rose-400">DEFCON 2 ALERT</ChamferCardTitle>
      </div>
      <Badge variant="destructive" size="sm">CRITICAL</Badge>
    </div>
    <ChamferCardDescription>
      <CypherText text="ACTIVE_INTRUSION_DETECTED" color="rose" glow />
    </ChamferCardDescription>
  </ChamferCardHeader>

  <ChamferCardContent className="flex flex-col items-center py-6 gap-4">
    <ThreatIndicator level="critical" value={92} label="INCURSION PROBABILITY" size="lg" />
  </ChamferCardContent>

  <ChamferCardFooter>
    <Button variant="outline" size="sm">ISOLATE POD</Button>
    <Button variant="danger" size="sm">ENGAGE LOCKDOWN</Button>
  </ChamferCardFooter>
</ChamferCard>

API Reference

PROPERTIES (15)← swipe to inspect →

Property	Description	Type	Default
cutCorners	Array specifying which corners receive 45° diagonal cuts.	Array<"tl" \| "tr" \| "bl" \| "br">	["tl", "br"]
cutSize	Chamfer depth scale or exact pixel number.	"sm" \| "md" \| "lg" \| number	"md"
variant	Visual panel surface theme.	"default" \| "surface" \| "glass" \| "accent" \| "terminal" \| "ghost"	"default"
signal	Signal highlight accent color.	"cyan" \| "violet" \| "green" \| "amber" \| "rose" \| "none"	"none"
glow	Applies matching neon glow aura to the perimeter.	boolean	false
tag	Micro HUD serial index or tag text in the top-left area.	ReactNode	-
statusDot	Pulsing status indicator dot color in top header bar.	"cyan" \| "violet" \| "green" \| "amber" \| "rose"	-
cornerNotches	Renders 45° HUD "//" diagonal notches along cut corners.	boolean	true
hasTab	Appends an angled technical identification tab in the top-right.	boolean	false
tabLabel	Text or label inside the technical tab.	ReactNode	-
tabSignal	Technical tab signal color.	"cyan" \| "violet" \| "green" \| "amber" \| "rose"	"cyan"
cornerBolts	Renders hardware rivet ticks on non-cut corners.	boolean	false
gridSubstrate	Applies technical micro-dot grid pattern to the background.	boolean	false
laserSweep	Plays angled laser sweep reflex shimmer on hover.	boolean	true
interactive	Enables slight elevation lift and pointer cursor on hover.	boolean	false

Best Practices

Consistent Geometry: Establishing ['tl', 'br'] as standard across a dashboard reinforces visual identity.
Content Padding: Use subcomponents like ChamferCardHeader and ChamferCardContent to keep content comfortably inside the cut boundaries.