Skip to content
SEC // COMPONENTS
okibi // COMPONENT LIBRARY

components部品

The whole library rendered live in the okibi HUD skin — sharp corners, hard offset shadows, mono telemetry labels. Every card is the real component; follow the arrow for installation and full docs.

Browse docs View charts

01 Primitives

36 ITEMS
PRIM // button
Button
Squared technical button with signal, ghost, outline-tech, destructive-hazard, and data variants, plus a built-in loading state.
PRIM // badge
Badge
Compact status tag with signal, semantic-tier, and data variants.
SignalOutlineSecureTraceBreachSEC-04
PRIM // input
Input
Single-line field with mono readout text and a 2px signal focus ring.
PRIM // textarea
Textarea
Multi-line field styled as a data readout.
PRIM // label
Label
Uppercase technical form label.
PRIM // typography
Typography
The full prose scale re-skinned to the tokens — condensed Saira headings, Inter body, a signal blockquote rule, signal list markers, and mono inline code.

Telemetry Uplink

A condensed display scale tuned for dense, high-contrast consoles — every size flows from the shared tokens.

Carrier Lock

Primary uplink stable. The carrier is locked to the grid reference and every channel reports nominal. Set the gain with signal.calibrate() before arming the secondary.

“Hold the reticle on the mark and let the readout settle.”

Sequence

  • Acquire — sweep until the spark latches.
  • Arm — confirm the handshake on the secondary channel.
  • Transmit — open the rail and watch the delta.

Reference frame GRID-09 · last sync 00:00:42 UTC

PRIM // checkbox
Checkbox
Sharp checkbox that fills with signal when checked.
PRIM // radio-group
Radio Group
Sharp radio group with a signal indicator.
PRIM // switch
Switch
Sharp toggle switch; signal fill when on.
PRIM // slider
Slider
Track with a sharp block thumb and a signal range.
PRIM // select
Select
Dropdown select with a hard-shadow popover surface.
PRIM // form
Form
Accessible form scaffolding for react-hook-form — binds the okibi field primitives to a schema, wires `aria-invalid`/`aria-describedby`, and surfaces validation as a mono system line.

Your operator handle on the relay.

PRIM // calendar
Calendar
Date-grid calendar (react-day-picker) re-skinned to the HUD — sharp cells, mono uppercase weekday rulers, ghost nav and a signal fill on the selected day.
June 2026
PRIM // date-picker
Date Picker
An outline-tech trigger that reads the chosen date in a mono readout and opens the Calendar on a hard-shadow popover. Controlled via `value`/`onValueChange`, so it drops straight into a Form field.
PRIM // combobox
Combobox
Autocomplete select — a Command palette on a hard-shadow popover with a mono search and a signal check on the active option. Controlled via `value`/`onValueChange`, so it drops straight into a Form field.
PRIM // input-otp
Input OTP
Segmented one-time-code field with sharp mono cells, a 2px signal focus ring on the active slot, and a blinking block caret.
PRIM // toggle
Toggle
Sharp two-state button that fills signal when pressed; `default` (borderless) and `outline` (keylined) variants.
PRIM // toggle-group
Toggle Group
Segmented control: a strong-bordered bar of Toggles divided by hairline keylines, each filling signal when active. `type="multiple"` for independent toggles, `type="single"` for a one-of-many selector.
PRIM // card
Card
Signature surface with corner-bracket reticles and a mono index header.
SEC-04
ICE Layer
Subnet secure
Secure
Black ICE holding across all four nodes. No trace detected.
PRIM // separator
Separator
Technical divider with an optional centered mono label, and an optional live signal pulse that travels along the rule.

Primary uplink stable. Carrier locked to grid reference.

SEC

Secondary channel armed. Standing by for handshake.

PRIM // resizable
Resizable
Draggable split panes with a signal-armed seam and an optional sharp grip reticle; horizontal or vertical.
SEC // NAV
CH-01
SEC // VIEWPORT
CH-02
SEC // READOUT
CH-03
PRIM // scroll-area
ScrollArea
Fixed-height overflow surface with a custom HUD scrollbar — a thin graphite gutter and a sharp thumb that arms to signal on hover, rendered identically across browsers (no native OS chrome). Vertical or horizontal.
Active nodes
  • NODE-01
  • NODE-02
  • NODE-03
  • NODE-04
  • NODE-05
  • NODE-06
  • NODE-07
  • NODE-08
  • NODE-09
  • NODE-10
  • NODE-11
  • NODE-12
  • NODE-13
  • NODE-14
  • NODE-15
  • NODE-16
  • NODE-17
  • NODE-18
  • NODE-19
  • NODE-20
  • NODE-21
  • NODE-22
  • NODE-23
  • NODE-24
  • NODE-25
  • NODE-26
  • NODE-27
  • NODE-28
PRIM // tabs
Tabs
Hairline-split tabs with a signal active segment.
All nodes nominal. Subnet load within tolerance.
PRIM // accordion
Accordion
Index-numbered disclosure rows.

PRIM // avatar
Avatar
Squared bordered avatar with an uppercase fallback.
OPNR
PRIM // progress
Progress
Bordered track with a signal indicator, plus an indeterminate `busy` sweep and an optional mono label.
PRIM // skeleton
Skeleton
Sharp sweeping placeholder.
PRIM // table
Table
Data-readout table with mono cells and uppercase heads.
Sec IDGrid RefStatus
SEC-7F2A12.044, -7.318ONLINE
SEC-3C1908.771, -3.902ARMED
SEC-9B4015.230, -1.677IDLE
SEC-D5E804.918, -9.245ERROR
PRIM // chart
Chart
Recharts wired to the okibi tokens — a responsive container with a HUD-skinned tooltip and legend, driven by a config-based color system.
AREA // STACKED
Channel Throughput
Uplink / downlink across six cycles
Up 12.4% this window
CYCLE 0x01 — 0x06 // TELEMETRY NOMINAL
PRIM // dialog
Dialog
Modal dialog framed with corner-bracket reticles and a hard offset shadow.
PRIM // drawer
Drawer
Edge-anchored drawer (vaul) with HUD styling.
PRIM // tooltip
Tooltip
Compact uppercase tooltip.
PRIM // dropdown-menu
Dropdown Menu
Menu surface with signal-wash highlights and destructive items.
PRIM // popover
Popover
Floating panel with a hard offset shadow.
PRIM // command
Command
Command palette (cmdk) with a mono search input.
PRIM // sonner
Toast (Sonner)
Toast notifications themed to the okibi tokens.

02 Signature

12 ITEMS
SIG // bracket-frame
BracketFrame
Wraps content in corner-bracket reticles with optional corner labels; the brackets can converge onto the content as an animated targeting lock.
TARGET // LOCK

Target Acquired

SEC // 0x4A2 :: SIGNAL NOMINAL

SIG // readout
Readout
HUD stat block: mono label, big condensed value, delta arrow.
Throughput
SEC // 0x4A2
847req/s
increase 12.4%
Latency
SEC // 0x4A3
38ms
decrease 3.1%
Uptime
SEC // 0x4A4
99.9%
no change 0%
SIG // console-surface
ConsoleSurface
The shared instrument-card chrome behind ConsolePanel, DataStream, and BootSequence — a sharp mono-grid surface with a keyline header strip, a square status LED, and an optional scanline field.
SURFACE // CHROMECH // 0x4AONLINE
the shared shell — keyline card, header strip, status LED and scanline field. drop any body in: a line log, a live feed, a staged reveal.
SIG // console-panel
ConsolePanel
Tapped telemetry channel — an instrument channel-strip header with a square status LED, a line-numbered log body, and a blinking block cursor under a scanline field.
NET // STDOUTRX // 0x4A2Status: ONLINE
AUTH HANDSHAKE OK
ICE LAYER BYPASSED
DAEMON UPLOAD :: VERIFIED
SUBNET TRACE ONLINE
SIG // coord-label
CoordLabel
Small coordinate / index label.
03SEC // 0x4A2THREAT 02 :: TRACE 12%
SIG // glitch-text
GlitchText
Per-character scramble/decode headline over a persistent ambient signal-noise field — resolves on hover, in-view, or as a continuous pulse (reduced-motion aware).
System OnlineDecodes on view; ambient signal-noise keeps churning behind it
Signal HUDHover to re-run the decode
Signal LockContinuous pulse — re-scrambles on a loop
Ghost Modeambient={false} — plain heading, decode on hover only
SIG // ticker
Ticker
Scrolling status marquee.
SUBNET NOMINALLINK 0x4A2● ONLINETRACE 0%AUTH VERIFIEDUPLINK STABLE0x4A2 // SYNCEDLATENCY 42MS● SIGNAL LOCKEDCHANNEL CLEAR
SIG // hazard-tape
HazardTape
Diagonal signal/black warning banner.
SIG // motion-number
MotionNumber
Animated numeric readout — a smooth count-up, or an odometer that rolls each digit reel into place (reduced-motion aware).
Throughput
847req/s
Signal
99.9%
Credits
12,480
SIG // reveal
Reveal
Staggered in-view entrance for a group of items (reduced-motion aware).
Throughput
SEC // 0x4A2
847req/s
increase 12.4%
Latency
SEC // 0x4A3
38ms
decrease 3.1%
Uptime
SEC // 0x4A4
99.9%
increase 0.2%
Sessions
SEC // 0x4A5
1.2K
increase 4.8%
Traces
SEC // 0x4A6
12/hr
decrease 22%
Queue
SEC // 0x4A7
0jobs
no change 0%
SIG // data-stream
DataStream
Live append-only log feed in a fixed-height window — new rows hard-cut in at the top with a decaying signal flash (reduced-motion aware).
STDOUT // LIVE
SIG // boot-sequence
BootSequence
Staged system-init reveal — steps print on a cadence and resolve to [ OK ] / [ FAIL ], with optional glitch decode (reduced-motion aware).
SYSTEM BOOT // 0x00
okibi REGISTRY — INSTALLABLE VIA SHADCN CUSTOM REGISTRY
okibi // 202648 COMPONENTS · 2 GROUPS