New:Socket for Asana Is Now Available.Learn more →

Get Started

cybercore-css

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

cybercore-css

A pure CSS cyberpunk design system inspired by Cyberpunk 2077. Zero JavaScript, framework-agnostic, 2026+ optimized.

Source

npm

Version: 0.2.4

Version published: 8 months ago

Weekly downloads: 141

Maintainers: 1

Weekly downloads

Created: 8 months ago

Source

🌆 CYBERCORE CSS

🎮 A cyberpunk-inspired CSS framework for building futuristic interfaces

Inspired by Cyberpunk 2077, Blade Runner, and the neon-soaked streets of Night City

🚀 Live Demo • 📖 Documentation • 💻 GitHub

⚡ Quick Start

NPM Installation

npm install cybercore-css

CDN (Coming Soon)

<link
  rel="stylesheet"
  href="https://unpkg.com/cybercore-css@latest/dist/cybercore.min.css"
/>

Import in Your Project

// Import everything
@use 'cybercore-css';

// Or import specific modules
@use 'cybercore-css/components/buttons';
@use 'cybercore-css/effects/glitch';

🎯 Features

Feature	Description
🎨 Pure CSS	Zero JavaScript dependencies - just CSS/SCSS
🧩 Modular	Import only what you need
🌙 Dark Theme	Designed for dark interfaces
🔧 Customizable	CSS variables for easy theming
♿ Accessible	Respects `prefers-reduced-motion`
🤖 AI-Friendly	Simple, predictable class names
⚡ Modern CSS	CSS Layers, Container Queries, color-mix()
📱 Responsive	Mobile-first approach
🎭 Icon System	153 cyberpunk-themed SVG icons

📸 Screenshots

Glitch Effect

Glitch Effect Glitch text effect with chromatic aberration and animated distortion

Neon Border

Neon Border Animated neon glow border effect with pulsing illumination

Scanlines

Scanlines CRT display effect with retro scanline overlay

Datastream

Datastream Animated data transfer effect with flowing light streams

Combining Effects

Combining Effects Multiple effects combined for maximum cyberpunk impact

Accessibility

Accessibility Reduced motion support respecting user preferences

🎨 Color Palette

🔵 Cyan      #00f0ff  →  Primary accent
🔴 Magenta   #ff2a6d  →  Secondary accent
🟡 Yellow    #fcee0a  →  Warning/highlight
🟢 Green     #05ffa1  →  Success states
⚫ Void      #0a0a0f  →  Background
⚪ Chrome    #b4b4b4  →  Neutral tones

🎭 Icons

CYBERCORE CSS includes a complete icon system with 153 cyberpunk-themed SVG icons across 10 categories, with support for 4 style variants.

Quick Start

// Import the icon utilities
import { renderIcon, getIcon, icons } from 'cybercore-css/icons';

// Render an icon with options
const svg = renderIcon('terminal', { size: 24, color: 'cyan' });

// Get raw SVG string
const terminalSvg = getIcon('terminal');

// Access the full registry
console.log(icons.terminal.svg);

Tree-Shakeable Imports

// Import only the icons you need
import {
  ChipIcon,
  TerminalIcon,
  SignalIcon,
} from 'cybercore-css/icons/individual';

Icon Categories

Category	Icons	Description
Navigation	14	Arrows, chevrons, menus
Actions	23	Edit, delete, copy, download
Media	17	Play, pause, volume controls
Communication	10	Messages, mail, notifications
Data	14	Charts, database, cloud
Security	15	Lock, shield, user, auth
Tech	22	Terminal, code, chip, settings
Files	15	File types, folders
Status	12	Info, warning, error, success
Social	11	Heart, star, bookmark, share

Style Variants

outline - Stroke-based, default style (1.5px stroke)
solid - Filled icons for emphasis
duotone - Two-tone with primary/secondary colors
glitch - Animated/glitchy variant for cyber effects

// Use different variants
renderIcon('shield', { variant: 'solid' });
renderIcon('terminal', { variant: 'duotone' });

📖 Full documentation: Icon System Docs

🧩 Components

Buttons

<!-- Primary button -->
<button class="cyber-btn">EXECUTE</button>

<!-- Color variants -->
<button class="cyber-btn cyber-btn--magenta">DANGER</button>
<button class="cyber-btn cyber-btn--yellow">CAUTION</button>
<button class="cyber-btn cyber-btn--green">CONFIRM</button>

<!-- Ghost style -->
<button class="cyber-btn cyber-btn--ghost">GHOST</button>

Cards

<div class="cyber-card">
  <div class="cyber-card__header">
    <h3 class="cyber-card__title">SYSTEM STATUS</h3>
  </div>
  <div class="cyber-card__body">All systems operational.</div>
</div>

<!-- Interactive card -->
<div class="cyber-card cyber-card--interactive">
  <!-- Glows on hover! -->
</div>

<!-- Holographic effect -->
<div class="cyber-card cyber-card--holo">
  <!-- Animated shimmer! -->
</div>

Inputs

<input type="text" class="cyber-input" placeholder="Enter data..." />

<!-- With field wrapper -->
<div class="cyber-field">
  <label class="cyber-field__label">USERNAME</label>
  <input type="text" class="cyber-input" />
  <span class="cyber-field__helper">Enter your handle</span>
</div>

Terminal

<div class="cyber-terminal">
  <div class="cyber-terminal__chrome">
    <div class="cyber-terminal__dots">
      <span class="cyber-terminal__dot"></span>
      <span class="cyber-terminal__dot"></span>
      <span class="cyber-terminal__dot"></span>
    </div>
    <span class="cyber-terminal__title">system.exe</span>
  </div>
  <div class="cyber-terminal__body">
    <div class="cyber-terminal__line">
      <span class="cyber-terminal__prompt">$</span>
      <span class="cyber-terminal__command">hack the planet</span>
    </div>
  </div>
</div>

More Components

🏷️ Badges - Status indicators and labels
⚠️ Alerts - Notifications and messages
📊 Tables - Data grids with cyber styling
🔄 Progress - Loading bars and indicators
🗂️ Tabs - Tabbed navigation
📋 Modal - Dialog windows
⏳ Spinner - Loading animations
💀 Skeleton - Loading placeholders
🧭 Nav - Navigation bars

✨ Effects

Glitch Text

<h1 class="cyber-glitch" data-text="GLITCH">GLITCH</h1>

Neon Border

<div class="cyber-neon-border">Glowing border effect</div>

<div class="cyber-neon-border cyber-neon-border--magenta">Magenta variant</div>

Scanlines

<div class="cyber-scanlines">CRT monitor effect</div>

Noise Overlay

<div class="cyber-noise">Static noise texture</div>

Datastream

<div class="cyber-datastream">Animated light sweep</div>

🛠️ Utilities

Text Colors

<span class="cyber-text-cyan">Cyan text</span>
<span class="cyber-text-magenta">Magenta text</span>
<span class="cyber-text-yellow">Yellow text</span>
<span class="cyber-text-green">Green text</span>

Text Glow

<span class="cyber-text-glow">Glowing text</span>

Display

<div class="cyber-d-flex">Flexbox</div>
<div class="cyber-d-grid">Grid</div>
<div class="cyber-d-none">Hidden</div>

Spacing

<div class="cyber-m-md">Margin medium</div>
<div class="cyber-p-lg">Padding large</div>
<div class="cyber-gap-sm">Gap small</div>

🎛️ Customization

CSS Variables

Override any variable in your own CSS:

:root {
  /* Change primary accent */
  --cyber-cyan-500: #00ffaa;

  /* Adjust spacing */
  --space-md: 1.5rem;

  /* Modify glow intensity */
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}

SCSS Configuration

// Override before importing
$cyber-primary: #00ffaa;
$cyber-font-mono: 'JetBrains Mono', monospace;

@use 'cybercore-css' with (
  $primary-color: $cyber-primary,
  $font-mono: $cyber-font-mono
);

📁 Project Structure

cybercore-css/
├── src/scss/
│   ├── cybercore.scss        # Main entry point
│   ├── core/
│   │   ├── _variables.scss   # Design tokens
│   │   ├── _reset.scss       # CSS reset
│   │   ├── _base.scss        # Base styles
│   │   └── _typography.scss  # Type system
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   ├── _inputs.scss
│   │   └── ... (14 components)
│   ├── effects/
│   │   ├── _glitch.scss
│   │   ├── _neon-border.scss
│   │   └── ... (6 effects)
│   └── utilities/
│       ├── _display.scss
│       ├── _flex.scss
│       └── ... (8 utilities)
└── dist/
    ├── cybercore.css         # Full build
    └── cybercore.min.css     # Minified

🧪 Development

# Install dependencies
npm install

# Start dev server with demo site
npm run dev

# Build CSS
npm run build

# Run tests
npm run test

# Lint
npm run lint

# Format
npm run format

🚀 Browser Support

Browser	Version
Chrome	105+
Firefox	121+
Safari	15.4+
Edge	105+

Requires CSS Layers, color-mix(), and container queries support

📜 License

MIT License - Use it, hack it, share it.

🤝 Contributing

Fork the repo
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

⚡ Built for the future. Styled for Night City. ⚡

🚀 Demo • 📖 Docs • 🐛 Issues • 💬 Discussions

  ██████╗██╗   ██╗██████╗ ███████╗██████╗  ██████╗ ██████╗ ██████╗ ███████╗
 ██╔════╝╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗██╔════╝██╔═══██╗██╔══██╗██╔════╝
 ██║      ╚████╔╝ ██████╔╝█████╗  ██████╔╝██║     ██║   ██║██████╔╝█████╗
 ██║       ╚██╔╝  ██╔══██╗██╔══╝  ██╔══██╗██║     ██║   ██║██╔══██╗██╔══╝
 ╚██████╗   ██║   ██████╔╝███████╗██║  ██║╚██████╗╚██████╔╝██║  ██║███████╗
  ╚═════╝   ╚═╝   ╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝

Keywords

FAQs

What is cybercore-css?

Is cybercore-css popular?

Is cybercore-css well maintained?

Package last updated on 14 Jan 2026

cybercore-css

🌆 CYBERCORE CSS

⚡ Quick Start

NPM Installation

CDN (Coming Soon)

Import in Your Project

🎯 Features

📸 Screenshots

Glitch Effect

Neon Border

Scanlines

Datastream

Combining Effects

Accessibility

🎨 Color Palette

🎭 Icons

Quick Start

Tree-Shakeable Imports

Icon Categories

Style Variants

🧩 Components

Buttons

Cards

Inputs

Terminal

More Components

✨ Effects

Glitch Text

Neon Border

Scanlines

Noise Overlay

Datastream

🛠️ Utilities

Text Colors

Text Glow

Display

Spacing

🎛️ Customization

CSS Variables

SCSS Configuration

📁 Project Structure

🧪 Development

🚀 Browser Support

📜 License

🤝 Contributing

Keywords

Related posts

When Autonomous Agents Escape: Why Socket Signed the Cyber Defense Open Letter

Socket Now Protects the Microsoft Edge Extension Ecosystem