Tabs

Stable

Radix UI-backed tab navigation primitives with animated smooth sliding indicator pills, glowing laser underline sweeps, and accessible keyboard arrow selection.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Tabs, 
  TabsList, 
  TabsTrigger, 
  TabsContent 
} from '@siberui/react';

Basic Usage & Sliding Indicator Pill

The tabs component automatically animates a smooth sliding indicator behind the active trigger as selection changes.

Operator Account

Configure personal identity and access keys.

Active clearance ID: 0x9F41 // Sentinel Operator Level 4

tsx

<Tabs defaultValue="account" className="w-full max-w-md">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">ACCOUNT</TabsTrigger>
    <TabsTrigger value="security">SECURITY</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Operator Account</CardTitle>
        <CardDescription>Configure personal identity and access keys.</CardDescription>
      </CardHeader>
      <CardContent className="text-xs text-slate-400">
        Active clearance ID: 0x9F41 // Sentinel Operator Level 4
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="security">
    <Card>
      <CardHeader>
        <CardTitle>Security Enclave</CardTitle>
        <CardDescription>Manage air-gapped cryptographic tokens.</CardDescription>
      </CardHeader>
      <CardContent className="text-xs text-slate-400">
        Hardware HSM Key: Kyber-1024 Curve Verified
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>

Neon Cybernetic Tabs & Glowing Active Pill

Set variant="neon" to apply cyan laser pill glow halos and uppercase monospace triggers.

System Kernel Alpha

Clock Frequency: 5.8 GHz // Status: ACTIVE

tsx

<Tabs variant="neon" defaultValue="system" className="w-full max-w-lg">
  <TabsList className="grid w-full grid-cols-3">
    <TabsTrigger value="system">
      <Terminal className="w-3.5 h-3.5 mr-2" />
      SYSTEM
    </TabsTrigger>
    <TabsTrigger value="network">
      <Activity className="w-3.5 h-3.5 mr-2" />
      NETWORK
    </TabsTrigger>
    <TabsTrigger value="security">
      <Shield className="w-3.5 h-3.5 mr-2" />
      SECURITY
    </TabsTrigger>
  </TabsList>
  <TabsContent value="system">
    <Card variant="signal" accentLine="cyan">
      <CardHeader>
        <CardTitle className="text-cyan-400">System Kernel Alpha</CardTitle>
        <CardDescription>Clock Frequency: 5.8 GHz // Status: ACTIVE</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="network">
    <Card variant="signal" accentLine="cyan">
      <CardHeader>
        <CardTitle className="text-cyan-400">Mesh Routing Network</CardTitle>
        <CardDescription>Throughput: 14.8 GB/s // Latency: 0.32 ms</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="security">
    <Card variant="signal" accentLine="cyan">
      <CardHeader>
        <CardTitle className="text-cyan-400">Cryptographic Firewall</CardTitle>
        <CardDescription>Zero Packet Drops // Airgap: SECURE</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
</Tabs>

Underline Sliding Laser Bar Variant

Use variant="underline" to display a glowing horizontal bottom laser indicator that slides smoothly between triggers.

> Planetary Egress Cluster: 100% OPERATIONAL

tsx

<Tabs variant="underline" defaultValue="overview" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="overview">OVERVIEW</TabsTrigger>
    <TabsTrigger value="analytics">ANALYTICS</TabsTrigger>
    <TabsTrigger value="logs">SYSTEM LOGS</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <div className="p-5 rounded-xl border border-white/[0.06] bg-[#050811] text-xs font-mono text-slate-300">
      &gt; Planetary Egress Cluster: 100% OPERATIONAL
    </div>
  </TabsContent>
  <TabsContent value="analytics">
    <div className="p-5 rounded-xl border border-white/[0.06] bg-[#050811] text-xs font-mono text-slate-300">
      &gt; Frame Ingestion: 2.84B packets / 24hr window
    </div>
  </TabsContent>
  <TabsContent value="logs">
    <div className="p-5 rounded-xl border border-white/[0.06] bg-[#050811] text-xs font-mono text-slate-300">
      &gt; Zero kernel panics detected.
    </div>
  </TabsContent>
</Tabs>

Frosted Cyber-Glass Multiview Module

Composite tabs nestled within acrylic glass modules layered over circuit textures with perimeter laser sweeps.

ORBITAL MULTIVIEW

STANDBY

Live optical telescope feed active.

tsx

<div className="relative w-full max-w-md p-8 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-2 border-b border-white/[0.08]">
      <span className="font-mono text-xs font-bold text-white tracking-wider">ORBITAL MULTIVIEW</span>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>

    <Tabs variant="neon" defaultValue="feed1">
      <TabsList className="grid grid-cols-2">
        <TabsTrigger value="feed1">OPTICAL</TabsTrigger>
        <TabsTrigger value="feed2">RADAR</TabsTrigger>
      </TabsList>
      <TabsContent value="feed1" className="p-4 rounded-xl bg-black/40 font-mono text-xs text-cyan-300">
        Live optical telescope feed active.
      </TabsContent>
      <TabsContent value="feed2" className="p-4 rounded-xl bg-black/40 font-mono text-xs text-emerald-300">
        360-degree radar perimeter sweep active.
      </TabsContent>
    </Tabs>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Multichannel Telemetry Deck

Composite mission defense card with embedded tab navigation.

TELEMETRY CHANNELS

LIVE

Egress Gateway: Frankfurt-01

Consensus Latency: 0.18 ms

tsx

<Card className="max-w-md 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">TELEMETRY CHANNELS</CardTitle>
      <Badge variant="neon" size="sm">LIVE</Badge>
    </div>
  </CardHeader>

  <CardContent className="p-6">
    <Tabs variant="neon" defaultValue="ch1">
      <TabsList className="grid grid-cols-2 mb-4">
        <TabsTrigger value="ch1">CH-01 [FRA]</TabsTrigger>
        <TabsTrigger value="ch2">CH-02 [SGP]</TabsTrigger>
      </TabsList>
      <TabsContent value="ch1" className="space-y-2 font-mono text-xs text-slate-300">
        <p>Egress Gateway: Frankfurt-01</p>
        <p>Consensus Latency: 0.18 ms</p>
      </TabsContent>
      <TabsContent value="ch2" className="space-y-2 font-mono text-xs text-slate-300">
        <p>Egress Gateway: Singapore-02</p>
        <p>Consensus Latency: 0.42 ms</p>
      </TabsContent>
    </Tabs>
  </CardContent>
</Card>

API Reference

PROPERTIES (4)← swipe to inspect →

Property	Description	Type	Default
variant	Visual indicator style ("default", "neon", "underline", "ghost").	"default" \| "neon" \| "underline" \| "ghost"	"default"
defaultValue	Initial tab value for uncontrolled usage.	string	-
value	Controlled active tab value.	string	-
onValueChange	Callback fired when active tab changes.	(value: string) => void	-

Accessibility

W3C WAI-ARIA Tabs: Conforms strictly to Radix UI Tabs pattern with automated arrow key navigation (Left/Right arrows change tabs, Home/End jump to ends).

Best Practices

Grid Columns: Use CSS grid utilities like grid grid-cols-3 on TabsList to distribute tab triggers equally.