Profile Hero

Stable

Tactical operative dossier banner featuring HUD telemetry header tags, biometric targeting reticles, copyable metadata chips, and animated status beacons.

Installation

$pnpm add @siberui/react

Import

tsx
import { 
  ProfileHero, 
  ProfileAvatar, 
  ProfileInfo,
  ProfileTitle,
  ProfileSubtitle,
  ProfileMeta, 
  ProfileMetaItem,
  ProfileActions 
} from '@siberui/react';

Dossier Hero & Reticle Avatar

Composite hero banner featuring tactical clearance header, reticle corner brackets around avatar, and metadata badges.

OPERATIVE // DOSSIER_09
CLEARANCE: LVL-5
online
Elena Vance

Elena Vance

Principal Sentinel Architect // Zero-Trust Systems

Architecting distributed zero-knowledge verification nodes and post-quantum lattice security mesh. Leading global cyber defense infrastructure.

ORBITAL DEFENSE CMD
NEO-ZURICH (UTC+1)
0x7F4A...B881⧉
tsx
<ProfileHero
  tag="OPERATIVE // DOSSIER_09"
  clearance="CLEARANCE: LVL-5"
  status="online"
  signal="cyan"
  className="max-w-2xl w-full"
>
  <ProfileAvatar
    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&auto=format&fit=crop&q=80"
    alt="Elena Vance"
    status="online"
    reticles
  />
  <ProfileInfo>
    <ProfileTitle>Elena Vance</ProfileTitle>
    <ProfileSubtitle>Principal Sentinel Architect // Zero-Trust Systems</ProfileSubtitle>
    <p className="text-xs text-slate-300 leading-relaxed">
      Architecting distributed zero-knowledge verification nodes and post-quantum lattice security mesh. Leading global cyber defense infrastructure.
    </p>
    <ProfileMeta>
      <ProfileMetaItem icon={<Building className="w-3.5 h-3.5" />}>ORBITAL DEFENSE CMD</ProfileMetaItem>
      <ProfileMetaItem icon={<MapPin className="w-3.5 h-3.5" />}>NEO-ZURICH (UTC+1)</ProfileMetaItem>
      <ProfileMetaItem icon={<Key className="w-3.5 h-3.5" />} copyable>0x7F4A...B881</ProfileMetaItem>
    </ProfileMeta>
    <ProfileActions>
      <Button variant="ghost" size="sm" leftIcon={<Terminal className="w-3.5 h-3.5" />}>
        VIEW AUDIT
      </Button>
      <Button variant="primary" size="sm" leftIcon={<Send className="w-3.5 h-3.5" />}>
        TRANSMIT PING
      </Button>
    </ProfileActions>
  </ProfileInfo>
</ProfileHero>

Operative Statuses (Online, Busy, Classified)

The status prop governs the radar beacon tone: online (Emerald), busy (Amber), classified (Violet), or offline.

SYNTHETIC // ACTIVE
CLEARANCE: LVL-5
online
01

Unit Zero-One

Autonomous Defense Node

RESTRICTED // GHOST
TOP SECRET
classified
G

Ghost Operative

Special Recon Vector

tsx
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
  <ProfileHero tag="SYNTHETIC // ACTIVE" status="online" signal="emerald">
    <ProfileAvatar fallback="01" status="online" reticles />
    <ProfileInfo>
      <ProfileTitle className="text-xl">Unit Zero-One</ProfileTitle>
      <ProfileSubtitle>Autonomous Defense Node</ProfileSubtitle>
    </ProfileInfo>
  </ProfileHero>

  <ProfileHero tag="RESTRICTED // GHOST" clearance="TOP SECRET" status="classified" signal="rose">
    <ProfileAvatar fallback="G" status="classified" reticles />
    <ProfileInfo>
      <ProfileTitle className="text-xl">Ghost Operative</ProfileTitle>
      <ProfileSubtitle>Special Recon Vector</ProfileSubtitle>
    </ProfileInfo>
  </ProfileHero>
</div>

Copyable Cryptographic Metadata Chips

Adding copyable to ProfileMetaItem enables single-click clipboard copying with visual confirmation.

0x3A9F419828C1D421⧉
4096-BIT RSA KEY
CTF RANK #4 GLOBAL
tsx
<ProfileMeta>
  <ProfileMetaItem icon={<Key className="w-3.5 h-3.5" />} copyable>0x3A9F419828C1D421</ProfileMetaItem>
  <ProfileMetaItem icon={<Shield className="w-3.5 h-3.5" />}>4096-BIT RSA KEY</ProfileMetaItem>
  <ProfileMetaItem icon={<Award className="w-3.5 h-3.5" />}>CTF RANK #4 GLOBAL</ProfileMetaItem>
</ProfileMeta>

API Reference

PROPERTIES (4)← swipe to inspect →
PropertyDescriptionTypeDefault
tag
Top-left tactical dossier tag string (e.g. "OPERATIVE // 09").
string
"OPERATIVE // DOSSIER"
clearance
Security clearance badge label (e.g. "CLEARANCE: LVL-5").
string
"CLEARANCE: LVL-5"
status
Live operational status mode.
"online" | "busy" | "offline" | "classified"
"online"
signal
Signal highlight and glow color.
"cyan" | "violet" | "emerald" | "amber" | "rose"
"cyan"

Accessibility

  • Heading Order: The operative name renders in semantic <h1> for accessible screen reader document hierarchy.
  • Copy Announcement: The copy feedback includes visual confirmation and native clipboard API handling.