sysui-css

v2.0.0

Published

a month ago

Ultimate Cyberpunk CSS Framework - 70+ components, 8 themes, terminal panels, CSS icons, effects, and Tailwind-style utilities

SYS-UI CSS

Ultimate Cyberpunk CSS Framework

A comprehensive cyberpunk CSS framework blending NES.css, xterm, Augmented UI, and cyber aesthetics into one massive, diverse system with multiple themes, effects, and utility classes.

SYS-UI Preview

Features

8 Themes - Neon, Terminal, Terminal Amber, Hologram, Military, Retro, Light, Light Cyber
70+ Components - Buttons, forms, cards, modals, navigation, and more
15 Terminal Panels - CLI, SSH, Bash, Vim, Htop, Git, Docker, Tmux-style components
30+ Effects - Glitch, scanlines, glow, chromatic aberration, noise, holographic
50+ CSS Icons - Pure CSS icons (outlined & filled variants) - zero dependencies
Utility Classes - Tailwind-inspired utilities for rapid development
SCSS Source - Fully customizable with variables and mixins
TypeScript Support - Type definitions for IDE autocomplete
JavaScript Helpers - Optional utilities for theme management & toasts
Interactive Playground - Build and export custom themes visually
Mobile Responsive - Optimized for all device sizes
Accessibility - Reduced motion support, high contrast mode, keyboard navigation
Zero Dependencies - Pure CSS, no JavaScript required for core functionality
~100KB - Lightweight and performant (~35KB gzipped)

Installation

NPM

npm install sysui

// In your JS/TS file
import 'sysui';
import 'sysui/utilities.css'; // Optional utilities

// With JavaScript helpers
import { setTheme, toast, generateTheme } from 'sysui/js';

CDN

<link rel="stylesheet" href="https://unpkg.com/sysui@latest/sys-ui.css">
<link rel="stylesheet" href="https://unpkg.com/sysui@latest/utilities.css">

<!-- Optional: JS helpers -->
<script src="https://unpkg.com/sysui@latest/sys-ui.js"></script>

SCSS (For Customization)

// Import individual partials
@use 'sysui/scss/variables' as *;
@use 'sysui/scss/mixins' as *;
@use 'sysui/scss/themes';
@use 'sysui/scss/buttons';
// ... or import everything
@use 'sysui/scss/sys-ui';

Download

Download the CSS files directly from the releases page.

Quick Start

<!DOCTYPE html>
<html lang="en" data-theme="neon">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Cyberpunk App</title>
  <link rel="stylesheet" href="sys-ui.css">
  <link rel="stylesheet" href="utilities.css">
  <!-- Optional: Google Fonts for full experience -->
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-glow">Welcome to the Grid</h1>
    <button class="btn btn-primary btn-glow">Enter System</button>
  </div>
</body>
</html>

Themes

Switch themes by changing the data-theme attribute on <html> or any container:

<html data-theme="neon">      <!-- Default: Hot pinks, cyans, neon greens -->
<html data-theme="terminal">  <!-- Green phosphor terminal -->
<html data-theme="terminal-amber"> <!-- Amber phosphor terminal -->
<html data-theme="hologram">  <!-- Iridescent, glass-morphism -->
<html data-theme="military">  <!-- Tactical oranges and grays -->
<html data-theme="retro">     <!-- 8-bit pixel aesthetic -->
<html data-theme="light">     <!-- Light mode, professional -->
<html data-theme="light-cyber"> <!-- Light mode, vibrant -->

Theme Switching with JavaScript

// Using SYS-UI helpers
SysUI.setTheme('hologram');
SysUI.nextTheme(); // Cycle through themes

// Or vanilla JS
document.documentElement.setAttribute('data-theme', 'hologram');

Custom Themes

Create your own theme with the theme generator:

const myTheme = SysUI.generateTheme('#ff6b6b', { name: 'coral', isDark: true });
myTheme.apply(); // Apply to document
console.log(myTheme.toCSS()); // Get CSS to copy

Or use the Interactive Playground to build themes visually.

Components

Buttons

<!-- Variants -->
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

<!-- Styles -->
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-glow">Glowing</button>
<button class="btn btn-glitch" data-text="Glitch">Glitch</button>
<button class="btn btn-cut">Cut Corners</button>
<button class="btn btn-pixel">Pixel</button>

<!-- Sizes -->
<button class="btn btn-xs">Extra Small</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Extra Large</button>

<!-- With Icons -->
<button class="btn btn-primary">
  <span class="sys-icon sys-icon-terminal"></span>
  Terminal
</button>

<!-- Loading State -->
<button class="btn btn-primary btn-loading">Loading</button>

Forms

<label class="label">Username</label>
<input type="text" class="input" placeholder="Enter username...">

<input type="text" class="input input-cyber" placeholder="Cyber style...">

<select class="select">
  <option>Select option...</option>
</select>

<textarea class="textarea" placeholder="Message..."></textarea>

<label class="checkbox">
  <input type="checkbox" checked>
  <span>Enable notifications</span>
</label>

<label class="switch">
  <input type="checkbox">
  <span>Dark mode</span>
</label>

<!-- Range Slider -->
<input type="range" class="range" min="0" max="100" value="50">

<!-- Search Bar -->
<div class="search-bar">
  <span class="sys-icon sys-icon-search search-icon"></span>
  <input type="text" class="input" placeholder="Search...">
</div>

<!-- File Upload -->
<label class="file-label">
  <input type="file" class="file-input">
  <span class="sys-icon sys-icon-upload"></span>
  Choose File
</label>

<!-- Dropzone -->
<div class="dropzone">
  <span class="sys-icon sys-icon-upload sys-icon-2x"></span>
  <span>Drop files here or click to upload</span>
</div>

Cards & Panels

<div class="panel">Basic panel content</div>
<div class="panel panel-glow">Glowing panel</div>
<div class="panel panel-cut">Augmented corners</div>
<div class="panel panel-hud">HUD style</div>
<div class="panel panel-terminal">Terminal window</div>

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-body">Card content here</div>
  <div class="card-footer">
    <button class="btn btn-primary">Action</button>
  </div>
</div>

Terminal Panels

Extended terminal-style panels inspired by CLI interfaces, shell sessions, and system monitors:

<!-- CLI Panel - Command line with prompt -->
<div class="panel-cli">
  <div class="panel-cli-header">~/projects</div>
  <div class="panel-cli-body">
    <span class="panel-cli-prompt">$</span>
    <span class="panel-cli-command">npm install</span>
    <div class="panel-cli-output">Done in 0.5s</div>
  </div>
</div>

<!-- Console Panel - With line numbers -->
<div class="panel-console">
  <div class="panel-console-body">
    <div class="panel-console-line info">Loading...</div>
    <div class="panel-console-line success">Ready</div>
    <div class="panel-console-line error">Error occurred</div>
  </div>
</div>

<!-- SSH Panel - Secure shell style -->
<div class="panel-ssh">
  <div class="panel-ssh-header">
    <div class="panel-ssh-title">SSH: user@server</div>
    <div class="panel-ssh-status">CONNECTED</div>
  </div>
  <div class="panel-ssh-body">
    <span class="panel-ssh-user">user</span>@<span class="panel-ssh-host">server</span>:~$
  </div>
</div>

<!-- Log Panel - System logs viewer -->
<div class="panel-log">
  <div class="panel-log-header">
    <span class="panel-log-title">Logs</span>
    <span class="panel-log-badge">2 errors</span>
  </div>
  <div class="panel-log-body">
    <div class="panel-log-entry">
      <span class="panel-log-time">12:00</span>
      <span class="panel-log-level info">INFO</span>
      <span class="panel-log-message">Started</span>
    </div>
  </div>
</div>

<!-- Bash Panel - Shell with colored syntax -->
<div class="panel-bash">
  <div class="panel-bash-header">
    <div class="panel-bash-dots">
      <span class="panel-bash-dot"></span>
      <span class="panel-bash-dot"></span>
      <span class="panel-bash-dot"></span>
    </div>
    <span class="panel-bash-title">bash</span>
  </div>
  <div class="panel-bash-body">
    <span class="panel-bash-ps1">➜</span>
    <span class="panel-bash-path">project</span>
    <span class="panel-bash-branch">(main)</span>
    <span class="panel-bash-cmd">git status</span>
  </div>
</div>

<!-- Vim Panel - Editor style -->
<div class="panel-vim">
  <div class="panel-vim-header">
    <span class="panel-vim-tab active">file.js</span>
  </div>
  <div class="panel-vim-body">
    <div class="panel-vim-gutter">1<br>2</div>
    <div class="panel-vim-code">const x = 1;</div>
  </div>
  <div class="panel-vim-statusline">
    <span class="panel-vim-mode">NORMAL</span>
    <span>file.js</span>
  </div>
</div>

<!-- Matrix Panel - Falling code effect -->
<div class="panel-matrix">
  <div class="panel-matrix-content">Matrix style content</div>
</div>

<!-- Git Panel - Version control output -->
<div class="panel-git">
  <div class="panel-git-header">On branch <span class="panel-git-branch">main</span></div>
  <div class="panel-git-body">
    <div class="panel-git-status">
      <span class="panel-git-status-icon added">A</span>
      <span class="panel-git-file">new-file.js</span>
    </div>
  </div>
</div>

<!-- Htop Panel - System monitor -->
<div class="panel-htop">
  <div class="panel-htop-meters">
    <div class="panel-htop-meter">
      <span class="panel-htop-meter-label">CPU</span>
      <div class="panel-htop-meter-bar">
        <div class="panel-htop-meter-fill cpu" style="width: 50%"></div>
      </div>
    </div>
  </div>
</div>

Terminal Cards:

<!-- Neofetch Card - System info display -->
<div class="card-neofetch">
  <div class="card-neofetch-logo">ASCII ART</div>
  <div class="card-neofetch-info">
    <span class="card-neofetch-label">OS:</span>
    <span class="card-neofetch-value">Linux</span>
  </div>
</div>

<!-- Docker Card - Container status -->
<div class="card-docker">
  <div class="card-docker-header">
    <span class="card-docker-title">Containers</span>
  </div>
  <div class="card-docker-body">
    <div class="card-docker-container">
      <span class="card-docker-status running"></span>
      <span class="card-docker-name">api-server</span>
    </div>
  </div>
</div>

<!-- Tmux Card - Terminal multiplexer -->
<div class="card-tmux">
  <div class="card-tmux-statusbar top">
    <span class="card-tmux-session">main</span>
    <div class="card-tmux-windows">
      <span class="card-tmux-window active">0:zsh*</span>
    </div>
  </div>
  <div class="card-tmux-body">Terminal content</div>
</div>

<!-- Prompt Card - Shell prompt -->
<div class="card-prompt">
  <div class="card-prompt-line">
    <span class="card-prompt-symbol">❯</span>
    <span class="card-prompt-path">~/code</span>
  </div>
</div>

<!-- ASCII Art Card -->
<div class="card-ascii">
╔════════════════╗
║  ASCII BORDER  ║
╚════════════════╝
</div>

Alerts

<div class="alert alert-info">Information message</div>
<div class="alert alert-success">Success message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-info alert-glitch">Glitchy alert</div>

Badges & Tags

<span class="badge">Default</span>
<span class="badge badge-success">Online</span>
<span class="badge badge-glow">Glowing</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-pill">Pill</span>

<span class="tag">Tag <button class="tag-remove">&times;</button></span>
<span class="chip">Data Chip</span>

Toast Notifications

// Using JS helpers
SysUI.toast('Operation successful!', { type: 'success' });
SysUI.toast('Something went wrong', { type: 'danger', duration: 5000 });
SysUI.toast('Processing...', { type: 'info', position: 'bottom-center' });

Modal

// Open modal
SysUI.openModal('#my-modal');

// Close modal
SysUI.closeModal('#my-modal');

Navigation

<nav class="nav">
  <a href="#" class="nav-link active">Home</a>
  <a href="#" class="nav-link">About</a>
  <a href="#" class="nav-link">Contact</a>
</nav>

<div class="tabs">
  <button class="tab active">Tab 1</button>
  <button class="tab">Tab 2</button>
  <button class="tab">Tab 3</button>
</div>

<nav class="breadcrumb">
  <span class="breadcrumb-item"><a href="#">Home</a></span>
  <span class="breadcrumb-item"><a href="#">Products</a></span>
  <span class="breadcrumb-item active">Details</span>
</nav>

<nav class="pagination">
  <a class="page-link">&laquo;</a>
  <a class="page-link">1</a>
  <a class="page-link is-active">2</a>
  <a class="page-link">3</a>
  <a class="page-link">&raquo;</a>
</nav>

Accordion (CSS-Only)

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-header">Section Title</summary>
    <div class="accordion-content">Content goes here...</div>
  </details>
</div>

Timeline & Stepper

<div class="timeline">
  <div class="timeline-item active">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-date">2024.01.01</div>
      <div class="timeline-title">Event Title</div>
      <div class="timeline-body">Description...</div>
    </div>
  </div>
</div>

<div class="stepper">
  <div class="stepper-item completed">
    <div class="stepper-marker">1</div>
    <div class="stepper-label">Step 1</div>
  </div>
  <div class="stepper-item active">
    <div class="stepper-marker">2</div>
    <div class="stepper-label">Step 2</div>
  </div>
</div>

Effects

Add effect classes to any element:

<!-- Glitch -->
<h1 class="glitch" data-text="GLITCH">GLITCH</h1>
<h1 class="glitch-hover" data-text="Hover Me">Hover Me</h1>

<!-- Glow -->
<div class="glow">Glowing box</div>
<div class="glow-lg glow-pulse">Pulsing glow</div>
<span class="text-glow">Glowing text</span>

<!-- Scanlines -->
<div class="scanlines">CRT effect</div>
<div class="scanlines-heavy">Heavy scanlines</div>

<!-- Chromatic Aberration -->
<h1 class="chromatic">RGB Split</h1>

<!-- Noise/Grain -->
<div class="noise">Film grain overlay</div>

<!-- Geometric Cuts -->
<div class="cut-corners">Augmented corners</div>
<div class="clip-hex">Hexagon shape</div>
<div class="clip-diamond">Diamond shape</div>

<!-- Glass Effect -->
<div class="glass">Glassmorphism</div>

<!-- Gradient Text -->
<h1 class="gradient-text">Gradient Text</h1>
<h1 class="gradient-text-animated">Animated Gradient</h1>

<!-- Electric Border -->
<div class="electric-border">Flowing border</div>

<!-- Holographic -->
<div class="holographic">Rainbow shimmer</div>

<!-- Matrix Background -->
<div class="matrix-bg">Digital rain</div>

<!-- Typing Effect -->
<p class="typing">Typewriter animation...</p>

Animations

<!-- Entrance Animations -->
<div class="animate-fade-in">Fade in</div>
<div class="animate-fade-in-up">Fade in up</div>
<div class="animate-slide-in-left">Slide in left</div>
<div class="animate-scale-in-bounce">Scale bounce</div>
<div class="animate-glitch-in">Glitch in</div>
<div class="animate-cyber-reveal">Cyber reveal</div>

<!-- Exit Animations -->
<div class="animate-fade-out">Fade out</div>
<div class="animate-slide-out-down">Slide out</div>
<div class="animate-glitch-out">Glitch out</div>

<!-- Continuous Animations -->
<div class="animate-pulse">Pulsing</div>
<div class="animate-float">Floating</div>
<div class="animate-flicker">Flickering</div>
<div class="animate-spin">Spinning</div>
<div class="animate-bounce">Bouncing</div>

<!-- Modifiers -->
<div class="animate-fade-in duration-500 delay-200">With timing</div>
<div class="animate-pulse animate-infinite">Infinite loop</div>

Icons

SYS-UI includes 50+ pure CSS icons with outlined and filled variants:

<!-- Outlined Icons (default) -->
<span class="sys-icon sys-icon-terminal"></span>
<span class="sys-icon sys-icon-folder"></span>
<span class="sys-icon sys-icon-file"></span>
<span class="sys-icon sys-icon-code"></span>
<span class="sys-icon sys-icon-user"></span>
<span class="sys-icon sys-icon-lock"></span>
<span class="sys-icon sys-icon-search"></span>
<span class="sys-icon sys-icon-settings"></span>
<span class="sys-icon sys-icon-bell"></span>
<span class="sys-icon sys-icon-mail"></span>
<span class="sys-icon sys-icon-heart"></span>
<span class="sys-icon sys-icon-star"></span>
<span class="sys-icon sys-icon-home"></span>
<span class="sys-icon sys-icon-shield"></span>
<span class="sys-icon sys-icon-globe"></span>
<span class="sys-icon sys-icon-clock"></span>
<span class="sys-icon sys-icon-camera"></span>

<!-- Filled Icons -->
<span class="sys-icon sys-icon-star-filled"></span>
<span class="sys-icon sys-icon-heart-filled"></span>
<span class="sys-icon sys-icon-bell-filled"></span>
<span class="sys-icon sys-icon-home-filled"></span>
<span class="sys-icon sys-icon-shield-check"></span>
<span class="sys-icon sys-icon-pin-filled"></span>

<!-- Sizes -->
<span class="sys-icon sys-icon-terminal sys-icon-sm"></span>
<span class="sys-icon sys-icon-terminal sys-icon-lg"></span>
<span class="sys-icon sys-icon-terminal sys-icon-xl"></span>
<span class="sys-icon sys-icon-terminal sys-icon-2x"></span>

<!-- Colors -->
<span class="sys-icon sys-icon-heart sys-icon-danger"></span>
<span class="sys-icon sys-icon-check sys-icon-success"></span>

Utility Classes

SYS-UI includes Tailwind-inspired utilities:

<!-- Layout -->
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-4">

<!-- Spacing -->
<div class="p-4 m-2 px-6 py-4">
<div class="mt-4 mb-8 ml-auto">

<!-- Typography -->
<p class="text-sm font-mono text-muted">
<h1 class="text-4xl font-bold text-primary">
<p class="truncate">Long text that will be truncated...</p>

<!-- Colors -->
<div class="bg-primary text-white">
<div class="border border-secondary">

<!-- Responsive -->
<div class="hidden md:block">
<div class="flex flex-col md:flex-row">
<div class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

<!-- Hover Effects -->
<button class="hover:scale-105 hover:glow">Hover me</button>

JavaScript Utilities

// Theme management
SysUI.setTheme('hologram');
SysUI.getTheme(); // Returns current theme
SysUI.nextTheme(); // Cycle through themes
SysUI.initTheme(); // Auto-detect from localStorage/system preference

// Toast notifications
SysUI.toast('Hello!', { type: 'info', duration: 3000, position: 'top-right' });

// Modal utilities
SysUI.openModal('#modal');
SysUI.closeModal('#modal');

// Animation helpers
await SysUI.animateIn(element, 'fade-in-up');
await SysUI.animateOut(element, 'fade-out');

// Typing effect
await SysUI.typeText(element, 'Hello World', 50);

// Theme generator
const theme = SysUI.generateTheme('#ff6b6b', { name: 'coral', isDark: true });
theme.apply();
console.log(theme.toCSS());

// Class utilities
const classes = SysUI.cn('btn', 'btn-primary', isLoading && 'btn-loading');

SCSS Customization

// Override variables before importing
@use 'sysui/scss/variables' with (
  $neon-primary: #ff6b6b,
  $font-mono: 'JetBrains Mono', monospace,
  $radius-default: 8px
);

// Use mixins
@use 'sysui/scss/mixins' as *;

.my-component {
  @include glow(#ff00ff, 15px);
  @include corner-cut(12px);
  @include glass(12px, 0.15);
}

TypeScript Support

SYS-UI includes TypeScript definitions for autocomplete:

import { SysUITheme, ButtonClass, EffectClass } from 'sysui';

const theme: SysUITheme = 'hologram';
const buttonClasses: ButtonClass[] = ['btn', 'btn-primary', 'btn-glow'];

Browser Support

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+
Mobile browsers (iOS Safari, Chrome Mobile)

Accessibility

Supports prefers-reduced-motion for users who prefer less animation
High contrast mode support
Semantic HTML structure
Focus indicators on interactive elements
Print styles included

Development

# Install dependencies
npm install

# Start dev server
npm start

# Build minified CSS
npm run build

# Watch for changes
npm run sass:watch

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Quick Reference

Terminal Panel Classes

| Panel | Classes | |-------|---------| | CLI | .panel-cli, .panel-cli-header, .panel-cli-body, .panel-cli-prompt, .panel-cli-command, .panel-cli-output | | Console | .panel-console, .panel-console-body, .panel-console-line + .info/.success/.warn/.error | | SSH | .panel-ssh, .panel-ssh-header, .panel-ssh-body, .panel-ssh-user, .panel-ssh-host, .panel-ssh-path | | Log | .panel-log, .panel-log-header, .panel-log-body, .panel-log-entry, .panel-log-level + .debug/.info/.warn/.error/.fatal | | Bash | .panel-bash, .panel-bash-header, .panel-bash-body, .panel-bash-ps1, .panel-bash-path, .panel-bash-branch, .panel-bash-cmd | | Vim | .panel-vim, .panel-vim-header, .panel-vim-body, .panel-vim-gutter, .panel-vim-code, .panel-vim-statusline | | Htop | .panel-htop, .panel-htop-meters, .panel-htop-meter-bar, .panel-htop-processes, .panel-htop-row | | Git | .panel-git, .panel-git-header, .panel-git-body, .panel-git-status, .panel-git-status-icon + .added/.modified/.deleted/.untracked | | Matrix | .panel-matrix, .panel-matrix-content |

Terminal Card Classes

| Card | Classes | |------|---------| | Neofetch | .card-neofetch, .card-neofetch-logo, .card-neofetch-info, .card-neofetch-label, .card-neofetch-value | | Docker | .card-docker, .card-docker-header, .card-docker-body, .card-docker-container, .card-docker-status + .running/.stopped/.paused | | Tmux | .card-tmux, .card-tmux-statusbar, .card-tmux-session, .card-tmux-windows, .card-tmux-window | | Prompt | .card-prompt, .card-prompt-line, .card-prompt-symbol, .card-prompt-path | | ASCII | .card-ascii |

Effect Classes

.glitch, .glitch-hover, .glitch-lg
.scanlines, .scanlines-subtle, .scanlines-heavy
.glow, .glow-sm, .glow-lg, .glow-pulse
.chromatic
.noise, .noise-subtle
.crt
.holographic
.text-glow, .text-gradient

Icon Sizes

.sys-icon-sm   (0.75em)
.sys-icon-lg   (1.5em)
.sys-icon-xl   (2em)
.sys-icon-2x   (2.5em)
.sys-icon-3x   (3em)

License

MIT License - feel free to use in personal and commercial projects.

Credits

Inspired by:

NES.css
Augmented UI
Terminal.css
Classic sci-fi interfaces