⚡ CyberNeon UI

Sharp Edges. Tonal Surfaces. Neon Accents.

CyberNeon is a premium React UI library built for those who reject the softness of modern web design. It embraces a Neon Brutalist aesthetic—combining the raw, high-contrast energy of brutalist architecture with the vibrant, glowing aesthetics of cyberpunk.

🎨 Design Philosophy

CyberNeon strictly adheres to a set of visual laws to maintain its unique identity:

• Zero Rounding: Everything is border-radius: 0px. No exceptions. Hard edges only.
• Tonal Logic: Surfaces use a sophisticated hierarchy of dark tones to create depth without relying on shadows.
• Neon Feedback: Interactive states are highlighted with vibrant neon accents (Cyan, Magenta, Yellow, Lime).
• Glow & Punch: Subtle text-shadows and high-contrast borders ensure every element pops against dark backgrounds.
• Angled Precision: Optional "cut" corners and geometric shapes reinforce the industrial, high-tech feel.

🛠️ Tech Stack

• Framework: React 19
• Build Tool: Vite 6
• Styling: Tailwind CSS v4
• Primitives: Radix UI
• Icons: Lucide React
• Documentation: Storybook 8

🚀 Quick Start

Installation

npm install cyberneon

Usage

1. Import Styles: Add the CyberNeon CSS to your main entry point (e.g., main.tsx or App.tsx).

import 'cyberneon/style.css';

2. Start Building:

import { Button, Card, Typography } from 'cyberneon';

function App() {
  return (
    <Card variant="tonal">
      <Typography variant="h1" neon="cyan">System Online</Typography>
      <Button variant="primary" size="lg">
        Execute Protocol
      </Button>
    </Card>
  );
}

📦 Components

Our library is expanding rapidly. Currently available:

| Category | Components | | :--- | :--- | | Actions | Button, Select, Switch | | Data Entry | Input, Checkbox, RadioGroup | | Data Display | Table, List, ListItem, Tooltip, StatusTag | | Layout | Card, Decorative | | Foundation | Typography |

🏗️ Local Development

Clone the repository and get the development environment running:

1. Install Dependencies:

   npm install

2. Run Dev Server:

   npm run dev

3. Launch Storybook:

   npm run storybook

🔮 Roadmap

• [ ] Breadcrumbs & Navigation patterns
• [ ] Dialog/Modal System (Brutalist style)
• [ ] Advanced Data Grid
• [ ] Animation system for neon transitions

📄 License

MIT © 2026 CyberNeon Team