CyberCN UI

CyberCN UI is a component library for building high-contrast, retro-futurist interfaces in modern React and Next.js applications. The system wraps familiar HTML and Next.js primitives in a consistent cyberpunk visual language without forcing awkward markup.

Design Inspiration

The visual identity of this library is heavily influenced by the Cyberpunk-2077-theme-css project by gwannon. I have taken those core aesthetic principles—hazard high-contrast palettes and aggressive geometric framing—and re-engineered them into a modular, theme-aware component system for the modern React ecosystem.

What you will find here

• Typed component references for every current CyberCN primitive.
• Usage patterns pulled from the actual library API.
• Styling and theming notes for light and dark mode behavior.
• Layout guidance for shells, forms, content blocks, and branching interfaces.

Core categories

• Getting Started
• Button
• Typography and Media
• Layout and Navigation
• Forms
• BoxTree
• Theming
• Motion and effects
• Shapes and clipping

Design principles

• Native-first APIs where possible.
• Composition over rigid templates.
• Strong visual identity without sacrificing semantic markup.
• Theme-aware presentation for light and dark environments.