DEV Community

Cover image for 🌆 Introducing CYBERCORE CSS: A Cyberpunk Design Framework for Futuristic UIs
sebyx07
sebyx07

Posted on

🌆 Introducing CYBERCORE CSS: A Cyberpunk Design Framework for Futuristic UIs

#webdev #opensource #design #css

🌆 Introducing CYBERCORE CSS

A pure CSS framework for building futuristic, cyberpunk-inspired interfaces

Ever wanted to build a UI that looks like it belongs in Night City? I just released CYBERCORE CSS — a comprehensive CSS framework inspired by Cyberpunk 2077, Blade Runner, and the neon-soaked aesthetics of sci-fi dystopias.

⚡ Why Another CSS Framework?

Most CSS frameworks focus on clean, minimal designs. But what if you're building:

  • A gaming dashboard
  • A hacker-themed portfolio
  • A sci-fi web app
  • An admin panel with personality

CYBERCORE gives you that distinctive cyberpunk look out of the box — glowing neon borders, glitch effects, scanlines, and more.

🎯 Key Features

Feature Description
🎨 Pure CSS Zero JavaScript dependencies
🧩 Modular Import only what you need
🌙 Dark Theme Designed for dark interfaces
♿ Accessible Respects prefers-reduced-motion
⚡ Modern CSS CSS Layers, color-mix(), Container Queries
🎭 153 Icons Cyberpunk-themed SVG icon system

🚀 Quick Start 

npm install cybercore-css
Enter fullscreen mode Exit fullscreen mode

Or use the CDN:

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

🎨 The Color Palette 

🔵 Cyan      #00f0ff  →  Primary accent
🔴 Magenta   #ff2a6d  →  Danger/alerts
🟡 Yellow    #fcee0a  →  Warnings
🟢 Green     #05ffa1  →  Success states
⚫ Void      #0a0a0f  →  Deep backgrounds
Enter fullscreen mode Exit fullscreen mode

✨ Effects That Pop

Glitch Text 

<h1 class="cyber-glitch" data-text="NIGHT CITY">NIGHT CITY</h1>
Enter fullscreen mode Exit fullscreen mode

Neon Borders 

<div class="cyber-neon-border">Glowing border effect</div>
<div class="cyber-neon-border cyber-neon-border--magenta">Magenta variant</div>
Enter fullscreen mode Exit fullscreen mode

Scanlines & Noise 

<div class="cyber-scanlines">CRT monitor effect</div>
<div class="cyber-noise">Subtle static texture</div>
Enter fullscreen mode Exit fullscreen mode

🧩 Component Examples

Buttons 

<button class="cyber-btn">EXECUTE</button>
<button class="cyber-btn cyber-btn--magenta">TERMINATE</button>
<button class="cyber-btn cyber-btn--green">CONFIRM</button>
<button class="cyber-btn cyber-btn--outline">SCAN</button>
Enter fullscreen mode Exit fullscreen mode

Cards 

<div class="cyber-card">
  <div class="cyber-card__header">
    <h4 class="cyber-h5">SYSTEM STATUS</h4>
  </div>
  <div class="cyber-card__body">
    All systems operational.
  </div>
  <div class="cyber-card__footer">
    <span class="cyber-badge cyber-badge--green">Online</span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Terminal 

<div class="cyber-terminal">
  <div class="cyber-terminal__header">
    <span class="cyber-terminal__dot cyber-terminal__dot--red"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--yellow"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--green"></span>
  </div>
  <div class="cyber-terminal__body">
    <span class="cyber-terminal__prompt">$</span> hack the planet
    <span class="cyber-terminal__cursor"></span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

🎭 153 Cyberpunk Icons

CYBERCORE includes a complete icon system with cyberpunk-themed SVG icons:

import { renderIcon } from 'cybercore-css/icons';

const icon = renderIcon('terminal', { size: 24, color: 'cyan' });
Enter fullscreen mode Exit fullscreen mode

Categories include: Navigation, Actions, Media, Security, Tech, and more.

🔧 Customization

Override any CSS variable:

:root {
  --cyber-cyan-500: #00ffaa;
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}
Enter fullscreen mode Exit fullscreen mode

📦 What's Included

  • 14 Components: Buttons, Cards, Inputs, Tables, Terminal, Modal, Progress, and more
  • 6 Effects: Glitch, Neon Border, Scanlines, Noise, Datastream, Text Glow
  • 8 Utility Modules: Display, Flex, Grid, Spacing, Text, Animation, Accessibility
  • 153 Icons: Across 10 categories with 4 style variants

🌐 Browser Support

Works in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+).

🔗 Links

What do you think?

I'd love to hear your feedback! What features would you like to see added? Drop a comment below or open an issue on GitHub.

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

If you found this useful, consider giving the repo a ⭐ on GitHub!

Top comments (0)