Achievement Badge

Stable

Futuristic certification, CTF accomplishment, and clearance badge featuring neon rarity auras, a 45° chamfered icon vessel, cryptographic proof hashes, and segmented progress bars.

Installation

$pnpm add @siberui/react

Import

tsx

import { AchievementBadge } from '@siberui/react';

Basic Achievement & Credential Badge

Cybersecurity achievement and certification card housing an icon inside a 45° geometric vessel alongside issuer and date metadata.

AWS Certified Security Specialist

rare

AMAZON WEB SERVICES // 2024

tsx

<div className="max-w-md w-full">
  <AchievementBadge
    title="AWS Certified Security Specialist"
    issuer="AMAZON WEB SERVICES"
    date="2024"
    rarity="rare"
    icon={<Shield className="w-5 h-5" />}
  />
</div>

Rarity Spectrum (Common, Rare, Epic, Legendary)

The rarity prop grades the accomplishment: "common" | "rare" | "epic" | "legendary" with distinctive neon aura glows.

Junior Penetration Tester

common

TRYHACKME ACADEMY

Offensive Security Certified Professional (OSCP)

rare

OFFSEC GLOBAL

Zero-Day Vulnerability Researcher

epic

SECURITY ALLIANCE

Defcon CTF World Finalist

legendary

DEFCON ORG

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 w-full">
  <AchievementBadge
    title="Junior Penetration Tester"
    issuer="TRYHACKME ACADEMY"
    rarity="common"
    icon={<Terminal className="w-5 h-5" />}
  />

  <AchievementBadge
    title="Offensive Security Certified Professional (OSCP)"
    issuer="OFFSEC GLOBAL"
    rarity="rare"
    icon={<Shield className="w-5 h-5" />}
  />

  <AchievementBadge
    title="Zero-Day Vulnerability Researcher"
    issuer="SECURITY ALLIANCE"
    rarity="epic"
    icon={<Award className="w-5 h-5" />}
  />

  <AchievementBadge
    title="Defcon CTF World Finalist"
    issuer="DEFCON ORG"
    rarity="legendary"
    icon={<Key className="w-5 h-5" />}
  />
</div>

Segmented Multi-Tier Progress Array

The progress prop renders a 10-step segmented power bar for tiered objectives.

Bug Bounty Grandmaster – Tier 4

legendary

HACKERONE PLATFORM // 2025

PROGRESS80%

tsx

<div className="max-w-md w-full">
  <AchievementBadge
    title="Bug Bounty Grandmaster – Tier 4"
    issuer="HACKERONE PLATFORM"
    date="2025"
    rarity="legendary"
    progress={80}
    icon={<Award className="w-5 h-5" />}
  />
</div>

Cryptographic Proof Hash & Verification

Display blockchain, certificate authority, or HSM signature verification proofs using hash.

Quantum Encryption Keyholder

epic

GLOBAL HSM COUNCIL // 2025

PROOF: 0x7E3A9F...B881

tsx

<div className="max-w-md w-full">
  <AchievementBadge
    title="Quantum Encryption Keyholder"
    issuer="GLOBAL HSM COUNCIL"
    date="2025"
    hash="0x7E3A9F...B881"
    status="verified"
    rarity="epic"
    icon={<Lock className="w-5 h-5" />}
  />
</div>

API Reference

PROPERTIES (7)← swipe to inspect →

Property	Description	Type	Default
title	Achievement or credential name.	string	-
issuer	Issuing organization or authority.	string	-
rarity	Accomplishment rarity grading tier.	"common" \| "rare" \| "epic" \| "legendary"	"rare"
progress	Completion progress percentage (0 - 100).	number	-
hash	Cryptographic proof hash string.	string	-
status	Verification status indicator.	"verified" \| "pending" \| "locked"	"verified"
href	External credential verification URL.	string	-

Accessibility

Link Semantics: When href is provided, it renders a semantic <a> element with secure rel="noopener noreferrer" attributes.