🌆 CYBERCORE CSS

!CYBERCORE CSS
!Version
!License
!Bundle Size

🎮 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

$3

``bash npm install cybercore-css`

`$3`

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

`$3`

`scss // 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 | Respectsprefers-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`

`$3`

!Glitch Effect

_Glitch text effect with chromatic aberration, scanlines, and animated distortion_

`$3`

!Neon Border

_Animated neon glow borders in cyan, magenta, and green variants_

`$3`

!Terminal

_Cyberpunk terminal component with scanlines and colored output_

`$3`

!Buttons

_Button variants: primary colors, outline, and ghost styles_

`$3`

!Cards

_Card components with datastream effect and interactive elements_

`$3`

!Icons

_153 cyberpunk-themed SVG icons across 10 categories with search and filters_

`$3`

!Dashboard

_Full dashboard example combining multiple CYBERCORE components_

---

`🎨 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.

`$3`

`typescript // 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);`

`$3`

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

`$3`

| 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 |

`$3`

- 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

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

> 📖 Full documentation: > Icon System Docs

---

`🧩 Components`

`$3`

`html

`$3`

`html


  
    SYSTEM STATUS

  

  All systems operational.

$3

`html


  USERNAME
  
  Enter your handle

$3

`html


  
    
      
      
      
    

    system.exe
  

  
    
      $
      hack the planet


$3
- 🏷️ 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
$3

`html

`GLITCH`

$3

`html

Glowing border effect

Magenta variant

$3

`html

CRT monitor effect

$3

`html

Static noise texture

$3

`html

Animated light sweep


---
🛠️ Utilities
$3

`html Cyan text Magenta text Yellow text Green text`

`$3`

`html Glowing text`

`$3`

`html

Flexbox


Grid

Hidden

$3

`html

Margin medium


Padding large

Gap small


---
🎛️ Customization
$3
Override any variable in your own CSS:

`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); }`

`$3`

`scss // 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`

`bash

`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

1. Fork the repo 2. Create your feature branch (git checkout -b feature/amazing-feature) 3. Commit your changes (git commit -m 'Add amazing feature') 4. Push to the branch (git push origin feature/amazing-feature) 5. Open a Pull Request

---

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

🚀 Demo • 📖 Docs • 🐛 Issues • 💬 Discussions

---

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

🌆 CYBERCORE CSS

!CYBERCORE CSS
!Version
!License
!Bundle Size

🎮 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

$3

``bash npm install cybercore-css`

`$3`

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

`$3`

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

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

---

`🎯 Features`

---

`📸 Screenshots`

`$3`

!Glitch Effect

_Glitch text effect with chromatic aberration, scanlines, and animated distortion_

`$3`

!Neon Border

_Animated neon glow borders in cyan, magenta, and green variants_

`$3`

!Terminal

_Cyberpunk terminal component with scanlines and colored output_

`$3`

!Buttons

_Button variants: primary colors, outline, and ghost styles_

`$3`

!Cards

_Card components with datastream effect and interactive elements_

`$3`

!Icons

_153 cyberpunk-themed SVG icons across 10 categories with search and filters_

`$3`

!Dashboard

_Full dashboard example combining multiple CYBERCORE components_

---

`🎨 Color Palette`

---

`🎭 Icons`

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

`$3`

`typescript // 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);`

`$3`

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

`$3`

- 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

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

> 📖 Full documentation: > Icon System Docs

---

`🧩 Components`

`$3`

`html

`$3`

`html


  
    SYSTEM STATUS

  

  All systems operational.

$3

`html


  USERNAME
  
  Enter your handle

$3

`html


  
    
      
      
      
    

    system.exe
  

  
    
      $
      hack the planet


$3
- 🏷️ 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
$3

`html

`GLITCH`

$3

`html

Glowing border effect

Magenta variant

$3

`html

CRT monitor effect

$3

`html

Static noise texture

$3

`html

Animated light sweep


---
🛠️ Utilities
$3

`html Cyan text Magenta text Yellow text Green text`

`$3`

`html Glowing text`

`$3`

`html

Flexbox


Grid

Hidden

$3

`html

Margin medium


Padding large

Gap small


---
🎛️ Customization
$3
Override any variable in your own CSS:

`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); }`

`$3`

`scss // 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`

---

`🧪 Development`

`bash

`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

---

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

🚀 Demo • 📖 Docs • 🐛 Issues • 💬 Discussions

---