Project Card

Stable

Chamfered 45° polygon tactical showcase and repository card featuring CRT laser scanline hover overlays, monospace tech stack pills, and dynamic status glows.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  ProjectCard, 
  ProjectCardMedia, 
  ProjectCardHeader, 
  ProjectCardTitle, 
  ProjectCardDescription, 
  ProjectCardStack, 
  ProjectCardFooter 
} from '@siberui/react';

Chamfered Architecture & CRT Scanlines

45-degree diagonal chamfered project card with interactive CRT raster scanlines that illuminate on hover over media containers.

[IMAGE // TELEMETRY_FEED_OFFLINE]

LIVE V2.0

ACTIVE DEPLOY

PROD-01

Nexus Protocol v4

High-throughput distributed consensus engine with zero-knowledge cryptographic proofs.

NEXT.JS 15RUSTTAILWIND 4WASM

tsx

<div className="max-w-sm w-full">
  <ProjectCard status="active">
    <ProjectCardMedia badge="LIVE V2.0" />
    <ProjectCardHeader>
      <div className="flex items-center justify-between mb-2">
        <Badge variant="neon" dot dotColor="cyan">ACTIVE DEPLOY</Badge>
        <span className="text-[10px] font-mono text-slate-500">PROD-01</span>
      </div>
      <ProjectCardTitle>Nexus Protocol v4</ProjectCardTitle>
      <ProjectCardDescription>
        High-throughput distributed consensus engine with zero-knowledge cryptographic proofs.
      </ProjectCardDescription>
      <ProjectCardStack tags={['NEXT.JS 15', 'RUST', 'TAILWIND 4', 'WASM']} />
    </ProjectCardHeader>
    <ProjectCardFooter>
      <Button variant="ghost" size="sm" leftIcon={<GitBranch className="w-3.5 h-3.5" />}>
        SOURCE
      </Button>
      <Button variant="primary" size="sm" rightIcon={<ExternalLink className="w-3.5 h-3.5" />}>
        VIEW APP
      </Button>
    </ProjectCardFooter>
  </ProjectCard>
</div>

Status Modes (Active, Deployed, Classified, Archived)

The status prop governs the perimeter border glow tone: active (Cyan), deployed (Emerald), classified (Violet), or archived (Slate).

Orbital Firewall

Emerald border glow for verified production systems.

Quantum Vault

Violet hover glow for restricted cryptographic research.

Legacy Gateway

Neutral hover state for decommissioned repositories.

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <ProjectCard status="deployed">
    <ProjectCardHeader>
      <ProjectCardTitle>Orbital Firewall</ProjectCardTitle>
      <ProjectCardDescription>Emerald border glow for verified production systems.</ProjectCardDescription>
    </ProjectCardHeader>
  </ProjectCard>

  <ProjectCard status="classified">
    <ProjectCardHeader>
      <ProjectCardTitle>Quantum Vault</ProjectCardTitle>
      <ProjectCardDescription>Violet hover glow for restricted cryptographic research.</ProjectCardDescription>
    </ProjectCardHeader>
  </ProjectCard>

  <ProjectCard status="archived">
    <ProjectCardHeader>
      <ProjectCardTitle>Legacy Gateway</ProjectCardTitle>
      <ProjectCardDescription>Neutral hover state for decommissioned repositories.</ProjectCardDescription>
    </ProjectCardHeader>
  </ProjectCard>
</div>

Integrated Tech Stack Tags

Use ProjectCardStack to render monospace framework and technology badges.

SOLANAANCHORTYPESCRIPTREACTGRAPHQL

tsx

<ProjectCardStack tags={['SOLANA', 'ANCHOR', 'TYPESCRIPT', 'REACT', 'GRAPHQL']} />

API Reference

PROPERTIES (1)← swipe to inspect →

Property	Description	Type	Default
status	Border highlight and hover glow color theme.	"active" \| "deployed" \| "classified" \| "archived"	"active"

Accessibility

Semantic Headings: ProjectCardTitle renders a semantic <h3> element for screen reader traversal.