Ultimate Cyberpunk CSS Framework - 70+ components, 8 themes, terminal panels, CSS icons, effects, and Tailwind-style utilities
npm install sysui-cssUltimate 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.
- 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)
``bash`
npm install sysui
`javascript
// In your JS/TS file
import 'sysui';
import 'sysui/utilities.css'; // Optional utilities
// With JavaScript helpers
import { setTheme, toast, generateTheme } from 'sysui/js';
`
`html
`
`scss`
// 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 the CSS files directly from the releases page.
`html`
Welcome to the Grid
Switch themes by changing the data-theme attribute on or any container:
`html`
`javascript
// Using SYS-UI helpers
SysUI.setTheme('hologram');
SysUI.nextTheme(); // Cycle through themes
// Or vanilla JS
document.documentElement.setAttribute('data-theme', 'hologram');
`
Create your own theme with the theme generator:
`javascript`
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.
`html
`
`html
$3
html
Basic panel content
Glowing panel
Augmented corners
HUD style
Terminal window
Card Title
Card content here
`$3
Extended terminal-style panels inspired by CLI interfaces, shell sessions, and system monitors:
html
~/projects
$
npm install
Done in 0.5s
Loading...
Ready
Error occurred
SSH: user@server
CONNECTED
user@server:~$
Logs
2 errors
12:00
INFO
bash
➜
project
(main)
git status
file.js
1
2
const x = 1;
NORMAL
file.js
Matrix style content
On branch main
new-file.js
CPU
`Terminal Cards:
html
ASCII ART
OS:
Linux
Containers
api-server
Terminal content
❯
~/code
╔════════════════╗
║ ASCII BORDER ║
╚════════════════╝
`$3
html
Information message
Success message
Warning message
Error message
Glitchy alert
`$3
html
Default
Online
Glowing
Outline
PillTag
Data Chip
`$3
javascript
// 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' });
`$3
javascript
// Open modal
SysUI.openModal('#my-modal');// Close modal
SysUI.closeModal('#my-modal');
`$3
html
`$3
html
Section Title
Content goes here...
`$3
html
2024.01.01
Event Title
Description...
1
Step 1
2
Step 2
`Effects
Add effect classes to any element:
html
GLITCH
Hover Me
Glowing box
Pulsing glow
Glowing text
CRT effect
Heavy scanlines
RGB Split
Film grain overlay
Augmented corners
Hexagon shape
Diamond shape
Glassmorphism
Gradient Text
Animated Gradient
Flowing border
Rainbow shimmer
Digital rain
Typewriter animation...
`Animations
html
Fade in
Fade in up
Scale bounce
Glitch in
Cyber reveal
Fade out
Glitch out
Pulsing
Floating
Flickering
Spinning
Bouncing
With timing
Infinite loop
`Icons
SYS-UI includes 50+ pure CSS icons with outlined and filled variants:
html
`Utility Classes
SYS-UI includes Tailwind-inspired utilities:
html
Long text that will be truncated...
`
JavaScript Utilities
`javascript
// 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
`scss
// 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:
`typescript
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
`bash
Install dependencies
npm install
Start dev server
npm startBuild minified CSS
npm run buildWatch for changes
npm run sass:watch
`Contributing
1. Fork the repository
2. Create your feature branch (
)
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 RequestQuick Reference
$3
| 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 |$3
| 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 |$3
`
.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
$3
.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
---