BUTTONS

Standard Variants

Styles

Sizes

Button Group

States

FORMS

Text Inputs

Standard Input

Cyber Input

Input with Validation

Looking good!

This field has an error.

Input Group

@

SEARCH

Select

Textarea

Checkboxes & Radios

Checkbox Option Another Option Radio A Radio B

Toggle Switches

Enabled Disabled

PANELS & CARDS

Standard Panel

Basic panel with default styling. Great for content containers.

Cut Corner Panel

Augmented UI style with angled corners.

Glow Panel

Neon glow effect around the border.

HUD Panel

Tactical HUD-style corners.

Hologram Panel

Iridescent gradient borders with glass effect.

terminal.sh

$ system --status
All systems operational

Cards

CARD HEADER

Card body content goes here. Supports any HTML content.

GLOWING CARD

Cards can be combined with effect classes for enhanced visuals.

SY

SYS-USER

@system_admin

Cards work great for user profiles and data displays.

TERMINAL PANELS

Advanced terminal-style panels inspired by CLI interfaces, shell sessions, and system monitors.

[i]

Usage Tips

Structure: Each panel has a header + body. Use semantic classes like .panel-cli-prompt, .panel-ssh-user, .panel-log-level for syntax coloring.
Console lines: Add .info, .success, .warn, .error to .panel-console-line for colored output.
Log levels: Use .debug, .info, .warn, .error, .fatal on .panel-log-level.
Git status: Use .added, .modified, .deleted, .renamed, .untracked on .panel-git-status-icon.

~/projects/sys-ui

$ npm install sysui-css

added 1 package in 0.842s
✓ SYS-UI installed successfully

$ _

Initializing SYS-UI framework...

Theme engine loaded

Components registered

Optional: animations.css not found

Ready in 42ms

SSH: admin@cyberdeck

CONNECTED

Last login: Mon Jan 20 03:14:15 2025

admin@cyberdeck:~$ whoami
admin
admin@cyberdeck:~$ _

System Logs 3 errors

03:14:15 INFO System startup initiated

03:14:16 DEBUG Loading configuration files

03:14:17 WARN Memory usage above 80%

03:14:18 ERROR Connection timeout on port 443

bash — 80×24

➜ sys-ui (main) git status
On branch main
Your branch is up to date

# No changes to commit
➜ sys-ui (main) _

config.js styles.css

1
2
3
4
5

export const config = {
  theme: 'neon',
  effects: true,
  animations: true
};

NORMAL config.js | utf-8 | js

WAKE UP, NEO...

The Matrix has you. Follow the white rabbit.

KNOCK KNOCK...

On branch feature/cyber-mode

A src/components/Panel.tsx

M src/styles/theme.css

D src/legacy/old-panel.js

? docs/README.md

htop - cyberdeck

CPU

67.2%

MEM

8.4G/20G

SWP

512M/4G

NET

↓2.3MB/s

1337 root 24.5 8.2 /usr/bin/sys-ui-daemon

2048 admin 18.3 12.4 node server.js

4096 admin 12.1 6.8 chrome --render

Terminal Cards

Compact card variants for dashboards and status displays. Docker cards show container status with .running, .stopped, .paused indicators.

╔═╗╦ ╦╔═╗ ╚═╗╚╦╝╚═╗ ╚═╝ ╩ ╚═╝ ╦ ╦╦ ║ ║║ ╚═╝╩

OS: CyberOS 2.0
Kernel: 6.1.0-sys
Shell: zsh 5.9
Theme: Neon

Containers 3 running

sys-ui-api node:18-alpine

postgres-db postgres:15

redis-cache redis:7-alpine

nginx-proxy nginx:latest

main

0:zsh 1:vim* 2:logs

~
~
~ Welcome to SYS-UI
~

0 03:14 AM

❯ ~/sys-ui main

→ npm run build

╔══════════════════════════════════╗ ║ ███████╗██╗ ██╗███████╗ ║ ║ ██╔════╝╚██╗ ██╔╝██╔════╝ ║ ║ ███████╗ ╚████╔╝ ███████╗ ║ ║ ╚════██║ ╚██╔╝ ╚════██║ ║ ║ ███████║ ██║ ███████║ ║ ║ ╚══════╝ ╚═╝ ╚══════╝ ║ ║ ║ ║ > CYBERPUNK CSS FRAMEWORK v2.0 ║ ║ > STATUS: OPERATIONAL ║ ╚══════════════════════════════════╝

ALERTS & NOTIFICATIONS

[i]

Information

This is an informational alert message.

[+]

Success

Operation completed successfully.

[!]

Warning

Please review this warning before proceeding.

[X]

Error

A critical error has occurred.

[~]

Glitch Alert

This alert has a glitch animation effect.

BADGES & TAGS

Badges

DEFAULT SECONDARY SUCCESS WARNING DANGER

Outline Badges

OUTLINE SECONDARY SUCCESS WARNING DANGER

Effect Badges

GLOWING GLOW SUCCESS PULSING

PROGRESS & LOADERS

Progress Bars

Standard 75%

Striped 60%

Animated 85%

Glowing 50%

Pixel Style 70%

Progress Colors

Loaders

Cyber Spinner

Large Spinner

Pulse Dots

Bar Loader

LOADING...

Glitch Text Loader

TABLES

Standard Table

ID	Name	Status
001	System Alpha	ONLINE
002	System Beta	STANDBY
003	System Gamma	OFFLINE

Cyber Table

Code	Module	Level
SYS-001	Core Engine	MAX
SYS-002	Neural Net	HIGH
SYS-003	Interface	MED
SYS-004	Security	MAX

NAVIGATION

Horizontal Nav

Tabs

Breadcrumb

Vertical Nav

EFFECTS

Add cyberpunk effects to any element. Effects can be stacked - combine .glitch + .scanlines + .glow for maximum impact.

GLITCH

HOVER ME

CHROMATIC

TEXT GLOW

GLOW PULSE

SCANLINES

HEAVY SCAN

CRT EFFECT

NOISE

FLOATING

PULSING

FLICKER

BOX GLOW

GLOW PULSE

CUT CORNERS

HEX

GEM

SHIMMER

Stacked Effects

Effects can be combined by adding multiple classes:

MULTI-EFFECT

.panel-glow + .scanlines + .glitch + .text-glow

LAYERED

.cut-corners + .noise + .glow-pulse + .chromatic + .animate-flicker

HUD ELEMENTS

SYSTEM STATUS

98.7%

ACTIVE NODES

1,247

DATA FLOW

847 TB/s

UPTIME

99.99%

HUD Readouts

SYS:ACTIVE NET:ONLINE SEC:ENABLED PWR:100%

Data Labels

Protocol HTTPS/2

Encryption AES-256

Region GLOBAL

Latency 12ms

MISC COMPONENTS

Dividers

SECTION

Standard divider with text label

GLOWING

Divider with glow effect

Avatars

S

MD

LG

XL

Avatar Group

A

B

C

+5

Status Indicators

Online Away Busy Offline

Tooltip

Keyboard Keys

Press Ctrl + Shift + P to open command palette

Code Block

JavaScript

const sysUI = 'cyberpunk';
function initialize() {
  console.log('System online');
}

Skeleton Loading

TYPOGRAPHY

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Styles

Bright text for emphasis

Muted text for secondary content

Primary colored text

Secondary colored text

Accent colored text

Blockquote

The future is already here - it's just not evenly distributed. William Gibson

Inline Code

Use the sys-ui class to apply styles.

UTILITIES

Flexbox

.flex .items-center .justify-between .gap-4

Grid

.grid .grid-cols-3 .gap-2

Spacing

.p-4 .m-2 .px-6 .py-2

p-2

p-4

p-6

Text Colors

.text-primary

.text-secondary

.text-accent

.text-success

.text-warning

.text-danger

Background Colors

.bg-primary .bg-secondary .bg-accent .bg-success .bg-warning .bg-danger

Border Radius

.rounded-none .rounded .rounded-lg .rounded-full

LISTS

Interactive List

[>] System Configuration NEW
[>] Network Settings
[>] Security Protocols UPDATE
[>] User Management

Typing Effect

Initializing system protocols...

Terminal Cursor

root@sys-ui:~$

MODAL

ACCORDION

CSS-Only Accordion

System Requirements

Minimum specs: Any modern browser with CSS3 support. No JavaScript required for core functionality.

Installation Guide

Simply link the CSS files in your HTML head. Import via npm or use the CDN for quick setup.

Customization Options

Override CSS variables to create your own theme. All colors, sizes, and effects are customizable.

Dropdown Menu

Pagination

« 1 2 3 ... 10 »

SLIDERS & RATINGS

Range Sliders

Standard Slider

Cyber Slider

Star Rating

CSS-only interactive rating

TIMELINE & STEPPER

Timeline

2024.12.01

System Initialized

Core framework deployed and activated.

2024.12.15

Components Added

50+ cyberpunk components integrated.

2025.01.01

Public Release

SYS-UI launched to the masses.

Stepper

1

Setup

2

Configure

3

Deploy

4

Complete

Search Bar

[?]

ADDITIONAL EFFECTS

GRADIENT TEXT

ANIMATED GRADIENT

STROKE

ELECTRIC BORDER

HOLOGRAPHIC

NEON BORDER

MATRIX BG

CORRUPTED

CSS ICONS

Pure CSS icons - no external dependencies. Sizes: .sys-icon-sm, .sys-icon-lg, .sys-icon-xl, .sys-icon-2x. Use .sys-icon-filled-* for solid variants.

terminal

code

user

search

lock

power

eye

bell

check

close

plus

minus

warning

info

star

heart

arrow-right

arrow-left

arrow-up

arrow-down

chevron

menu

download

upload

refresh

spinner

external

double

Icon Sizes

sm

default

lg

xl

2x

3x

Icons in Buttons

Filled Icons

star-filled

heart-filled

bell-filled

home-filled

shield-check

trash-filled

bookmark

pin-filled

Additional Icons

mail

globe

clock

calendar

camera

mic

image

bolt

shield

home

wifi

cloud

battery

volume

trash

ANIMATIONS

Entrance, exit, and continuous animations for dynamic interfaces.

Entrance Animations (click to replay)

fade-in

fade-in-up

fade-in-down

scale-in

scale-bounce

glitch-in

slide-left

slide-right

cyber-reveal

Continuous Animations

pulse

float

spin

bounce

ping

FLICKER

flicker

Special Effects

PULSE GLOW

animate-pulse-glow

ELECTRIC

animate-electric

HOLOGRAM

animate-hologram

SEARCH & FILE UPLOAD

Search Bar

Search Bar Variants

File Upload

Choose File

Dropzone

Drop files here or click to upload Maximum file size: 10MB

TOAST NOTIFICATIONS

Click the buttons to trigger toast notifications.

Toast Positions

Build Your Own Theme

Use our interactive playground to create custom color schemes and export CSS for your projects.

Open Theme Playground

BUTTONS

FORMS

PANELS & CARDS

Standard Panel

Cut Corner Panel

Glow Panel

HUD Panel

Hologram Panel

SYS-USER

TERMINAL PANELS

WAKE UP, NEO...

ALERTS & NOTIFICATIONS

BADGES & TAGS

PROGRESS & LOADERS

TABLES

NAVIGATION

EFFECTS

GLITCH

HOVER ME

CHROMATIC

TEXT GLOW

GLOW PULSE

SCANLINES

HEAVY SCAN

CRT EFFECT

NOISE

FLOATING

PULSING

FLICKER

BOX GLOW

GLOW PULSE

CUT CORNERS

HEX

GEM

SHIMMER

MULTI-EFFECT

LAYERED

HUD ELEMENTS

MISC COMPONENTS

TYPOGRAPHY

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

UTILITIES

LISTS

MODAL

System Alert

ACCORDION

SLIDERS & RATINGS

TIMELINE & STEPPER

ADDITIONAL EFFECTS

GRADIENT TEXT

ANIMATED GRADIENT

STROKE

HOLOGRAPHIC

MATRIX BG

CORRUPTED

CSS ICONS

ANIMATIONS

SEARCH & FILE UPLOAD

TOAST NOTIFICATIONS

Build Your Own Theme