Card

Stable

Fundamental cybernetic container primitive supporting multi-tier background elevations, illuminated top laser accent wires, and composable header/content/footer slots.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter 
} from '@siberui/react';

Basic Anatomy & Card Layout

Cards provide a structural container divided into CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

System Configuration

Configure node egress gateway parameters.

tsx

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>System Configuration</CardTitle>
    <CardDescription>Configure node egress gateway parameters.</CardDescription>
  </CardHeader>
  <CardContent>
    <Input placeholder="Enter gateway IP (e.g. 10.240.0.1)..." />
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="secondary" size="sm">RESET</Button>
    <Button variant="neon" size="sm" glow>DEPLOY CONFIG</Button>
  </CardFooter>
</Card>

Surface Variants (Elevated, Signal, Terminal, Glass)

Choose from distinct background surfaces: default, elevated, signal, terminal, glass, and outlined.

Default Level 1 Surface

Solid surface with subtle hairline borders

Optimized for high-density everyday application interfaces.

Signal Surface

Cyan perimeter laser illumination

Subtle ambient glow aura around card boundaries.

TERMINAL SURFACE

Monospace code container

> echo "Kernel log trace active"

Frosted Glass Surface

Translucent backdrop blur

Light refractions layered atop circuit substrates.

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-3xl">
  <Card variant="default">
    <CardHeader>
      <CardTitle>Default Level 1 Surface</CardTitle>
      <CardDescription>Solid surface with subtle hairline borders</CardDescription>
    </CardHeader>
    <CardContent className="text-xs text-slate-400">
      Optimized for high-density everyday application interfaces.
    </CardContent>
  </Card>

  <Card variant="signal">
    <CardHeader>
      <CardTitle className="text-cyan-400">Signal Surface</CardTitle>
      <CardDescription>Cyan perimeter laser illumination</CardDescription>
    </CardHeader>
    <CardContent className="text-xs text-slate-400">
      Subtle ambient glow aura around card boundaries.
    </CardContent>
  </Card>

  <Card variant="terminal">
    <CardHeader>
      <CardTitle className="font-mono text-emerald-400">TERMINAL SURFACE</CardTitle>
      <CardDescription>Monospace code container</CardDescription>
    </CardHeader>
    <CardContent className="text-xs font-mono text-slate-400">
      &gt; echo &quot;Kernel log trace active&quot;
    </CardContent>
  </Card>

  <Card variant="glass">
    <CardHeader>
      <CardTitle>Frosted Glass Surface</CardTitle>
      <CardDescription>Translucent backdrop blur</CardDescription>
    </CardHeader>
    <CardContent className="text-xs text-slate-400">
      Light refractions layered atop circuit substrates.
    </CardContent>
  </Card>
</div>

Laser Accent Wires (Cyan, Purple, Green)

Attach a glowing 1px horizontal laser gradient to the top edge using the accentLine prop.

Cyan Laser Wire

Primary telemetry node

Purple Laser Wire

Cryptographic lattice

Green Laser Wire

Verified defense enclave

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-3xl">
  <Card accentLine="cyan">
    <CardHeader>
      <CardTitle className="text-sm text-cyan-300">Cyan Laser Wire</CardTitle>
      <CardDescription>Primary telemetry node</CardDescription>
    </CardHeader>
  </Card>

  <Card accentLine="purple">
    <CardHeader>
      <CardTitle className="text-sm text-purple-300">Purple Laser Wire</CardTitle>
      <CardDescription>Cryptographic lattice</CardDescription>
    </CardHeader>
  </Card>

  <Card accentLine="green">
    <CardHeader>
      <CardTitle className="text-sm text-emerald-300">Green Laser Wire</CardTitle>
      <CardDescription>Verified defense enclave</CardDescription>
    </CardHeader>
  </Card>
</div>

Interactive Hover Responses

Use variant="interactive" to apply hover lifts, border brightening, and click feedback.

Interactive Cluster Card

Hover over this card to observe subtle scale and border highlights.

Ideal for dashboard link tiles, module launchers, and clickable catalog entries.

tsx

<Card variant="interactive" accentLine="cyan" className="max-w-md w-full">
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm">Interactive Cluster Card</CardTitle>
      <ArrowRight className="h-4 w-4 text-cyan-400" />
    </div>
    <CardDescription>Hover over this card to observe subtle scale and border highlights.</CardDescription>
  </CardHeader>
  <CardContent className="text-xs text-slate-400">
    Ideal for dashboard link tiles, module launchers, and clickable catalog entries.
  </CardContent>
</Card>

Frosted Cyber-Glass Quantum Nexus Card

Composite card nested over circuit substrate grids with continuous perimeter beam sweeps.

QUANTUM COMPUTE MODULE

ONLINE

Clock Frequency5.8 GHz

Memory Bandwidth1.2 TB/s

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">
  <div className="relative z-10 space-y-5">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Cpu className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">QUANTUM COMPUTE MODULE</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">ONLINE</Badge>
    </div>

    <div className="space-y-3 font-mono text-xs">
      <div className="flex justify-between py-2 border-b border-white/[0.06]">
        <span className="text-slate-400">Clock Frequency</span>
        <span className="text-cyan-400 font-bold">5.8 GHz</span>
      </div>
      <div className="flex justify-between py-2 border-b border-white/[0.06]">
        <span className="text-slate-400">Memory Bandwidth</span>
        <span className="text-white">1.2 TB/s</span>
      </div>
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        ACCESS CORE TERMINAL
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Core Compute Telemetry Card

Composite mission defense card with live subsystem indicators.

ORBITAL NODE ALPHA

ACTIVE

High throughput compute cluster telemetry.

Processing Load42.8%

ECC Memory128 GB / 256 GB

Inter-Node Latency0.32 ms

Cryptographic EnclaveVERIFIED

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl" accentLine="cyan">
  <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">ORBITAL NODE ALPHA</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      High throughput compute cluster telemetry.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-3 font-mono text-xs">
    <div className="flex justify-between py-2 border-b border-white/[0.06]">
      <span className="text-slate-400 flex items-center gap-2">
        <Gauge className="h-3.5 w-3.5 text-cyan-400" />
        Processing Load
      </span>
      <span className="text-cyan-400 font-bold">42.8%</span>
    </div>

    <div className="flex justify-between py-2 border-b border-white/[0.06]">
      <span className="text-slate-400 flex items-center gap-2">
        <HardDrive className="h-3.5 w-3.5 text-purple-400" />
        ECC Memory
      </span>
      <span className="text-white">128 GB / 256 GB</span>
    </div>

    <div className="flex justify-between py-2 border-b border-white/[0.06]">
      <span className="text-slate-400 flex items-center gap-2">
        <Wifi className="h-3.5 w-3.5 text-emerald-400" />
        Inter-Node Latency
      </span>
      <span className="text-emerald-400">0.32 ms</span>
    </div>

    <div className="flex justify-between py-2">
      <span className="text-slate-400 flex items-center gap-2">
        <ShieldCheck className="h-3.5 w-3.5 text-cyan-400" />
        Cryptographic Enclave
      </span>
      <span className="text-cyan-400 font-bold">VERIFIED</span>
    </div>
  </CardContent>

  <CardFooter className="justify-between">
    <Button variant="secondary" size="sm">DIAGNOSTICS</Button>
    <Button variant="neon" size="sm" glow rightIcon={<ArrowRight className="h-3.5 w-3.5" />}>CONNECT NODE</Button>
  </CardFooter>
</Card>

API Reference

PROPERTIES (2)← swipe to inspect →

Property	Description	Type	Default
variant	Surface styling and visual depth tier.	"default" \| "elevated" \| "outlined" \| "interactive" \| "terminal" \| "signal" \| "glass"	"default"
accentLine	Illuminated 1px horizontal laser gradient applied across the top edge.	"none" \| "cyan" \| "purple" \| "green"	"none"

Accessibility

Semantic Headings: CardTitle renders semantic <h3> elements ensuring proper document outline nesting.

Best Practices

Accent Line Rhythm: Use accentLine on key showcase cards or primary focus cards rather than repeating it on every card in a uniform grid.