// 00 · Docs

Get started

Cyberdeck UI isn't a package you install. Add the design tokens once, then copy the components you want into your project and make them yours.

1. Load the fonts

The components use Orbitron for headings, Rajdhani for body text and Share Tech Mono for labels. They fall back to system fonts, but they're designed around these three. Add this to your <head>, or load them with your framework's font tooling (for example next/font).

index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap">

2. Add the design tokens

Every component reads its colours, fonts and corner size from these CSS variables. Save the file and load it once, globally, before any component styles.

tokens.css

/*
 * Cyberdeck UI — design tokens.
 * Add this once (globally) before using any component.
 *
 * Fonts (optional, but the components are designed around them):
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
 */
:root {
  /* Surfaces */
  --cy-bg: #07050d;
  --cy-surface: #0d0a17;
  --cy-surface-2: #151024;
  --cy-border: rgba(0, 240, 255, 0.18);

  /* Neon accents */
  --cy-cyan: #00f0ff;
  --cy-pink: #ff2a6d;
  --cy-yellow: #fcee0a;
  --cy-purple: #b967ff;
  --cy-green: #05ffa1;

  /* Text */
  --cy-text: #e5e7eb;
  --cy-muted: #9ca3af;
  --cy-dim: #6b7280;

  /* Typography */
  --cy-font-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --cy-font-body: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --cy-font-mono: 'Share Tech Mono', ui-monospace, monospace;

  /* Shape & motion */
  --cy-cut: 14px; /* size of clipped corners */
  --cy-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cy-glow-cyan: 0 0 6px rgba(0, 240, 255, 0.6), 0 0 18px rgba(0, 240, 255, 0.35);
  --cy-glow-pink: 0 0 6px rgba(255, 42, 109, 0.6), 0 0 18px rgba(255, 42, 109, 0.35);
}

3. Copy a component

Open any component, switch from Preview to Code, and pick a format:

HTML: the markup, a CSS file and, for interactive components, a small dependency-free script. Works in any site, static page or framework.
React: a typed .tsx component plus the same CSS file, which the component imports. Components that use hooks start with 'use client', so they drop straight into the Next.js App Router.

HTML

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="neon-button.css">

<button class="cy-btn-neon" type="button">Jack in</button>

<!-- Only some components have a script, e.g. tabs.js -->
<script src="tabs.js" defer></script>

React

// app/layout.tsx (Next.js App Router), or your entry file
import './tokens.css';

// Anywhere
import { NeonButton } from '@/components/cyberdeck/NeonButton';

export default function Page() {
  return <NeonButton>Jack in</NeonButton>;
}

With the Next.js Pages Router, global CSS can only be imported in _app: import the component stylesheets there instead of inside the components.

4. Make it yours

Override any token to re-theme everything at once. All class names start with cy-, so they won't clash with your own styles.

your-styles.css

:root {
  --cy-cyan: #3df5ff;   /* every cyan accent follows */
  --cy-cut: 10px;       /* smaller clipped corners */
}

/* Most components also expose a local accent */
.my-card { --cy-hud: var(--cy-yellow); }
.my-button { --cy-btn: 185 103 255; } /* RGB channels for rgb(... / alpha) */

Accessibility and motion

Every glitch, flicker, scan and rain animation turns off for visitors who prefer reduced motion.
Interactive components use native elements where possible (<dialog>, checkboxes, radios, range inputs), so keyboard and screen reader support comes built in.
Tabs follow the WAI-ARIA tabs pattern, with arrow-key navigation.
Decorative layers are hidden from assistive technology with aria-hidden.

License

MIT. Use the components in personal and commercial projects, no attribution required.