INDEX · 38 UNITS · 7 SETS
Components_
Every component in the library, grouped by set. Each one installs on its own with the shadcn CLI.
38 / 38 COMPONENTS
TXT / Text & Motion
- TXT-01Decrypt TextRandom glyphs that resolve left to right into the real string once on mount; screen readers get the real string. Requires @cybr/tokens.OPEN DOCS →
- TXT-02Typewriter TerminalTerminal panel that types its lines out once on mount, with optional prompt lines and a blinking block cursor. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- TXT-03Glitch HeadingDisplay heading that tears into signal and neon slices in a short burst every 3.2s, never continuously. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- TXT-04Telemetry CounterTabular-figure number that counts up from 0 the first time it scrolls into view. Requires @cybr/tokens.OPEN DOCS →
- TXT-05Stepped Wipe RevealBlock line that wipes in left to right on 12 hard steps the first time it scrolls into view, with an optional stagger delay. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
CRD / Layout & Cards
- CRD-01Brutal Bento GridHairline grid whose 2px gaps over a line-coloured parent become the borders. 1, 2 then 4 columns; cells span 1-4. Requires @cybr/tokens.OPEN DOCS →
- CRD-02Spec CardProduct card with a meta header and barcode, a big title, description, action link and spec list on a solid signal offset shadow. Requires @cybr/tokens.OPEN DOCS →
- CRD-03Access/ID CardInk ID badge with a hazard band, access level chip, photo slot, name, ID line and barcode. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- CRD-04Hardware PanelRiveted surface panel with a cable channel and status rows that pair ON/OFF text with a signal LED. Requires @cybr/tokens.OPEN DOCS →
- CRD-05HUD Image FrameVoid-black media frame with signal corner brackets, a centre reticle, a static scan line, an outlined index numeral and a caption. Requires @cybr/tokens.OPEN DOCS →
- CRD-06Neon Edge CardLink card whose border lights up in signal with a tight glow on hover and keyboard focus. Requires @cybr/tokens.OPEN DOCS →
- CRD-07Classified CardDashed dossier frame with a rotated stamp and inline redaction bars that declassify on click. Visual only: never for real secrets. Requires @cybr/tokens.OPEN DOCS →
- CRD-08Stat BandSignal-coloured ribbon of big numbers and mono labels, split by hard ground-deep rules that hold at any wrap. Requires @cybr/tokens.OPEN DOCS →
TIP / Tooltip & Marquee
- TIP-01HUD TooltipHover and focus tooltip in two looks: a bordered data readout and a target-lock card with bracket corners and a leader line. Built on Base UI. Requires @cybr/tokens.OPEN DOCS →
- TIP-02Classified FAQ AccordionFramed FAQ accordion with mono question rows, signal ids and +/− marks. One item open at a time by default. Built on Base UI. Requires @cybr/tokens.OPEN DOCS →
- TIP-03Ticker MarqueeSignal band that scrolls its items endlessly, with hover, focus and button pause and a static reduced-motion state. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- TIP-04Warning TapeTilted hazard-stripe tape with scrolling label chips, or a static stripe band without items. Pauses on hover, focus and button; static under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- TIP-05Logo WallHairline grid of logo cells after a label cell, with signal hover on linked logos. One row from lg. Requires @cybr/tokens.OPEN DOCS →
BG / Backgrounds
- BG-01Blueprint GridDrafting-paper background: 24px minor and 120px major --label grid lines with optional --ink crosshairs at the major intersections. Static, pure CSS. Requires @cybr/tokens.OPEN DOCS →
- BG-02Perspective GridSignal floor grid tilted toward a glowing horizon, scrolling toward the viewer. Pure CSS; static under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- BG-03Béton BrutRaw-concrete background: SVG noise grain and blotches on --dim, with formwork seams and tie holes. Static, CSS and data-URI SVG. Requires @cybr/tokens.OPEN DOCS →
- BG-04CRT OverlayScanlines, a vignette and a sub-3Hz flicker laid over its children like an old monitor. Pure CSS; the flicker is off under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- BG-05Data RainFalling --label glyph columns with one --signal column, fading into --ground-void. Pure CSS; static under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
- BG-06Exposed WiringSVG circuit traces, pads and an IC block, with a --signal pulse running along one trace. Static under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →
INT / Interactive
- INT-01Command Palette⌘K / Ctrl+K dialog with a > prompt input that filters grouped commands; the highlighted row fills --signal. Built on Base UI. Requires @cybr/tokens.OPEN DOCS →
- INT-02Pixelated Image TrailDrops image tiles behind the mouse that resolve from coarse pixels to sharp, then step back out. Off for touch and under reduced motion. Requires @cybr/tokens.OPEN DOCS →
- INT-03Data-Readout CarouselFramed slide viewer with a --signal 01 / 08 counter, bracketed PREV / NEXT buttons, arrow-key stepping and a segment strip. Slides change with a short stepped wipe, instant under reduced motion. Requires @cybr/tokens and @cybr/effects.OPEN DOCS →