Skeleton

Stable

High-tech visual buffer placeholders for async data feeds, featuring holographic HUD sweeps, semantic signal colors, and frosted glass backdrops.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Skeleton, 
  SkeletonText, 
  SkeletonAvatar, 
  SkeletonBadge, 
  SkeletonCard 
} from '@siberui/react';

Basic Primitive Shimmers

Construct placeholder layouts with atomic primitives: SkeletonAvatar, SkeletonText, and SkeletonBadge.

tsx

<div className="flex items-center gap-4 p-5 rounded-2xl bg-[#070b14] border border-white/[0.06] max-w-md w-full">
  <SkeletonAvatar size="lg" shape="squircle" variant="neon" />
  <div className="flex-1 space-y-2">
    <div className="flex items-center justify-between">
      <Skeleton className="h-4 w-32 rounded-md" variant="neon" />
      <SkeletonBadge size="sm" variant="neon" />
    </div>
    <Skeleton className="h-3 w-48 rounded-md" />
  </div>
</div>

Tactical HUD Mode & Target Reticles

Enable hud for rounded corner brackets and target to project an illuminated, rotating dotted target crosshair inside placeholder viewports.

HUD BRACKETS & TARGET RETICLE

CRT SCANLINE & RADAR LOCK

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  {/* Tactical HUD with Target Reticle */}
  <div className="p-6 rounded-2xl bg-[#050811] border border-white/[0.06] space-y-4">
    <span className="font-mono text-xs text-cyan-400 font-bold tracking-wider">HUD BRACKETS & TARGET RETICLE</span>
    <Skeleton className="h-32 w-full rounded-2xl" variant="neon" hud target />
    <SkeletonText lines={2} variant="neon" />
  </div>

  {/* CRT Scanline Raster with Target Scanner */}
  <div className="p-6 rounded-2xl bg-[#050811] border border-white/[0.06] space-y-4">
    <span className="font-mono text-xs text-cyan-400 font-bold tracking-wider">CRT SCANLINE & RADAR LOCK</span>
    <Skeleton className="h-32 w-full rounded-2xl" variant="neon" scanline target />
    <SkeletonText lines={2} variant="neon" />
  </div>
</div>

Signal & Semantic Color Presets

Align loading state visual energy with target data types: neon / cyan, violet, emerald, amber, and rose.

tsx

<div className="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
  <SkeletonCard variant="neon" hasImage={false} lines={2} />
  <SkeletonCard variant="violet" hasImage={false} lines={2} />
  <SkeletonCard variant="emerald" hasImage={false} lines={2} />
  <SkeletonCard variant="amber" hasImage={false} lines={2} />
  <SkeletonCard variant="rose" hasImage={false} lines={2} />
  <SkeletonCard variant="default" hasImage={false} lines={2} />
</div>

Frosted Cyber-Glass Telemetry Buffer

The variant="glass" preset renders translucent acrylic placeholders that blend seamlessly over circuit textures and kinetic BorderBeam perimeter rings.

SYNCING TELEMETRY STREAM

AWAITING BUFFER

tsx

<div className="relative w-full max-w-md p-6 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Radio className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-xs font-bold text-white">SYNCING TELEMETRY STREAM</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">AWAITING BUFFER</Badge>
    </div>
    <SkeletonCard variant="glass" hasImage={false} lines={3} />
  </div>
  <BorderBeam variant="neon" size={130} duration={6} borderWidth={1.5} glow />
</div>

Operator HUD Telemetry Card Mock

Composite card placeholders for cybersecurity agent consoles and quantum telemetry dashboards.

OPERATOR_IDENTITY_BUFFER

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardContent className="p-6 space-y-5">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <Zap className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-xs font-bold text-slate-200">OPERATOR_IDENTITY_BUFFER</span>
      </div>
      <SkeletonBadge size="sm" variant="neon" />
    </div>

    <div className="flex items-center gap-4">
      <SkeletonAvatar size="xl" shape="squircle" variant="neon" />
      <div className="flex-1 space-y-2.5">
        <Skeleton className="h-4 w-3/4" variant="neon" />
        <Skeleton className="h-3 w-1/2" variant="neon" />
        <Skeleton className="h-2.5 w-full" />
      </div>
    </div>

    <div className="space-y-2 pt-2 border-t border-white/[0.06]">
      <Skeleton className="h-2.5 w-full rounded" />
      <Skeleton className="h-2.5 w-4/5 rounded" />
    </div>
  </CardContent>
</Card>

Animation Modes (Shimmer, Pulse, Scan)

Choose between high-speed laser horizontal shimmer (animation="shimmer"), vertical CRT scan (animation="scan"), rhythmic ambient pulse (animation="pulse"), or static (animation="none").

SHIMMER (Horizontal)

SCAN (Vertical)

PULSE (Heartbeat)

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <div className="p-5 rounded-xl bg-[#070b14] border border-white/[0.06] space-y-3">
    <span className="font-mono text-xs text-slate-400 font-bold">SHIMMER (Horizontal)</span>
    <Skeleton className="h-16 w-full rounded-lg" animation="shimmer" variant="neon" />
  </div>

  <div className="p-5 rounded-xl bg-[#070b14] border border-white/[0.06] space-y-3">
    <span className="font-mono text-xs text-slate-400 font-bold">SCAN (Vertical)</span>
    <Skeleton className="h-16 w-full rounded-lg" animation="scan" variant="neon" />
  </div>

  <div className="p-5 rounded-xl bg-[#070b14] border border-white/[0.06] space-y-3">
    <span className="font-mono text-xs text-slate-400 font-bold">PULSE (Heartbeat)</span>
    <Skeleton className="h-16 w-full rounded-lg" animation="pulse" variant="neon" />
  </div>
</div>

API Reference

PROPERTIES (8)← swipe to inspect →

Property	Description	Type	Default
variant	Color theme and surface styling preset.	"default" \| "neon" \| "cyan" \| "violet" \| "emerald" \| "amber" \| "rose" \| "glass"	"default"
shape	Border radius style for the container.	"rounded" \| "circle" \| "squircle" \| "square"	"rounded"
animation	Kinetic light sweep mode.	"shimmer" \| "scan" \| "pulse" \| "none"	"shimmer"
hud	Enables sci-fi corner bracket tech ticks.	boolean	false
scanline	Overlays a holographic CRT scanline raster.	boolean	false
target	Embeds an illuminated, rotating tactical target reticle and crosshair in the center.	boolean	false
lines	For SkeletonText / SkeletonCard: number of paragraph lines.	number	3
size	For SkeletonAvatar: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl".	string	"md"

Accessibility

Screen Reader Suppression: Skeletons automatically receive aria-hidden="true" so screen readers do not attempt to announce placeholder boxes.
Live Regions: Wrap the parent loading region in aria-busy="true" with an aria-live announcer informing the user that data is loading.

Best Practices

Shape Matching: Ensure the skeleton's dimensions and shapes closely match the expected content (e.g. shape="squircle" for squircle avatars) to prevent visual layout shifts (CLS).
Cohesive Theming: Use the matching signal variant (e.g. variant="rose" for threat cards, variant="glass" for frosted panels) to maintain UI continuity during loading.