Typography

Stable

Comprehensive typography suite with semantic Headings, Text hierarchy, laser gradient text clips, cybernetic inline code pills, and tactile keyboard keycaps.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Heading, 
  Text, 
  Code, 
  Kbd, 
  Label, 
  Divider 
} from '@siberui/react';

Headings & Laser Gradient Shimmers

Heading provides semantic heading levels (h1 through h6) with optional laser gradient clip effects.

H1: QUANTUM KERNEL ACTIVATED

H2: Subsystem Orbital Telemetry

H3: Distributed Cryptographic Fabric

H4: Sensor Node Array Parameters

tsx

<div className="flex flex-col gap-4">
  <Heading as="h1" gradient="cyan">H1: QUANTUM KERNEL ACTIVATED</Heading>
  <Heading as="h2" gradient="purple">H2: Subsystem Orbital Telemetry</Heading>
  <Heading as="h3" gradient="mixed">H3: Distributed Cryptographic Fabric</Heading>
  <Heading as="h4">H4: Sensor Node Array Parameters</Heading>
</div>

Text Hierarchy & Cybernetic Signal Tones

Text offers standardized body variants with dedicated cybernetic semantic colors.

Lead: Autonomous planetary defense mesh deployed across Sector 09.

Default: Routine integrity check completed with 0 anomalous lattice deviations.

Neon Cyan: Telemetry transponder lock acquired.

Neon Purple: Neural bridge matrix operating at peak frequency.

Neon Green: Airgap firewall checksum 100% verified.

Destructive: Critical power shunt detected in auxiliary capacitor.

Muted: Archived session log timestamp 2025.08.15 UTC.

tsx

<div className="flex flex-col gap-3">
  <Text variant="lead">Lead: Autonomous planetary defense mesh deployed across Sector 09.</Text>
  <Text variant="default">Default: Routine integrity check completed with 0 anomalous lattice deviations.</Text>
  <Text variant="neon">Neon Cyan: Telemetry transponder lock acquired.</Text>
  <Text variant="neonPurple">Neon Purple: Neural bridge matrix operating at peak frequency.</Text>
  <Text variant="neonGreen">Neon Green: Airgap firewall checksum 100% verified.</Text>
  <Text variant="destructive">Destructive: Critical power shunt detected in auxiliary capacitor.</Text>
  <Text variant="muted">Muted: Archived session log timestamp 2025.08.15 UTC.</Text>
</div>

Inline Code & Keyboard Keycaps (Kbd)

Use Code for inline monospace tokens or code blocks, and Kbd for bevelled keyboard shortcut keycaps.

Press ⌘ + K to activate the quantum command palette.

Execute npx @siberui/react init to bootstrap security primitives.

{
  "status": "NOMINAL",
  "cipher": "CRYSTALS-Kyber-1024",
  "uptime": "99.999%"
}

tsx

<div className="flex flex-col gap-4">
  <Text>
    Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to activate the quantum command palette.
  </Text>
  <Text>
    Execute <Code>npx @siberui/react init</Code> to bootstrap security primitives.
  </Text>
  <Code block>
    {JSON.stringify({ status: "NOMINAL", cipher: "CRYSTALS-Kyber-1024", uptime: "99.999%" }, null, 2)}
  </Code>
</div>

Tactical Labels & Glowing Laser Dividers

Structure complex readouts with monospace uppercase Label components and gradient-illuminated Divider laser beams.

ORBITAL_TRANSPONDER_ID*

SYSTEM BOUNDARY

ENCRYPTED CHANNEL

tsx

<div className="space-y-4">
  <Label required>ORBITAL_TRANSPONDER_ID</Label>
  <Divider glow="cyan" label="SYSTEM BOUNDARY" />
  <Divider glow="purple" label="ENCRYPTED CHANNEL" />
  <Divider glow="none" />
</div>

Frosted Cyber-Glass Typographic Deck

Composite typography stack layered over circuit textures with perimeter laser sweeps.

AUTONOMOUS ORBITAL DEFENSE

Continuous real-time threat neutralization across decentralized micro-satellite swarms.

AUTHORIZATION: LEVEL-5 CLEARANCE • PROTOCOL ENFORCED

tsx

<div className="relative w-full max-w-2xl p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden space-y-4">
  <Heading as="h2" gradient="cyan">AUTONOMOUS ORBITAL DEFENSE</Heading>
  <Text variant="lead">
    Continuous real-time threat neutralization across decentralized micro-satellite swarms.
  </Text>
  <Divider glow="cyan" />
  <Text variant="muted" mono size="xs">
    AUTHORIZATION: LEVEL-5 CLEARANCE • PROTOCOL ENFORCED
  </Text>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Mission Briefing Dossier Card

Composite mission defense briefing card combining all typography primitives.

MISSION BRIEFING // SECTOR 09

TOP SECRET

Tactical orbital rendezvous parameters.

OPERATION ZERO-HORIZON

Maintain continuous sensor sweep along the geostationary perimeter. In the event of lattice deviation, execute kill -9 on rogue satellite transponders.

KEYBOARD OVERRIDE

Press Ctrl + Alt + Del for emergency circuit airgap.

tsx

<Card className="max-w-xl mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">MISSION BRIEFING // SECTOR 09</CardTitle>
      <Badge variant="neon" size="sm">TOP SECRET</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Tactical orbital rendezvous parameters.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Heading as="h3" gradient="cyan">OPERATION ZERO-HORIZON</Heading>
    <Text size="sm">
      Maintain continuous sensor sweep along the geostationary perimeter. In the event of lattice deviation, execute <Code>kill -9</Code> on rogue satellite transponders.
    </Text>
    <Divider glow="cyan" label="KEYBOARD OVERRIDE" />
    <Text size="xs" mono className="text-slate-400">
      Press <Kbd>Ctrl</Kbd> + <Kbd>Alt</Kbd> + <Kbd>Del</Kbd> for emergency circuit airgap.
    </Text>
  </CardContent>
</Card>

API Reference

Heading Props

PROPERTIES (2)← swipe to inspect →

Property	Description	Type	Default
as	HTML heading tag level ("h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6").	HeadingLevel	"h2"
gradient	Laser gradient clip effect ("none" \| "cyan" \| "purple" \| "mixed").	"none" \| "cyan" \| "purple" \| "mixed"	"none"

Text Props

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	Semantic text tone ("default" \| "lead" \| "muted" \| "subtle" \| "neon" \| "neonPurple" \| "neonGreen" \| "destructive").	string	"default"
size	Font size token ("xs" \| "sm" \| "md" \| "lg" \| "xl").	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"
mono	Whether text renders in monospace cyber font.	boolean	false

Accessibility

Semantic HTML Tags: Heading renders native <h1> - <h6> for heading outlines. Kbd renders semantic <kbd> elements.

Best Practices

Contrast Ratios: When using gradient on headings, ensure the underlying background is dark (#040711 or darker) to maintain crisp readability.