⚡️ Neon Glass UI

The Ultimate Futuristic React Component Library

🔮 Overview

Neon Glass UI is not just another component library. It's a design statement. Built for the next generation of web applications, it combines the frosted elegance of Glassmorphism with the electric energy of Neon, powered by the smooth physics of Framer Motion.

Perfect for AI tools, SaaS dashboards, Crypto portfolios, and Gaming hubs.

✨ Features

• 💎 True Glassmorphism: Multi-layered blur effects that work on any background.
• ⚡️ Reactive Neon: Borders and shadows that glow and pulse on interaction.
• 🕹 3D Tilt Physics: Cards that respond to mouse movement in real-time.
• 🚀 Performance First: Built on Tailwind CSS for zero-runtime styling overhead.
• 📱 Fluid Animations: Framer Motion powered entrances and micro-interactions.
• 🎨 Custom Theming: Fully compatible with your existing Tailwind setup.

📦 Installation

Get started in seconds.

npm install neon-glass-ui framer-motion lucide-react
# or
yarn add neon-glass-ui framer-motion lucide-react
# or
pnpm add neon-glass-ui framer-motion lucide-react

Note: Tailwind CSS is required. Ensure you have it set up in your project.

🚀 Usage

1. Import Styles

First, import the CSS in your root file (main.jsx, App.jsx, or index.js).

import 'neon-glass-ui/style.css';

2. Use Components

Import any component and drop it into your React app.

import { TiltCard, NeonButton, OrbBackground, GradientText } from 'neon-glass-ui';

function App() {
  return (
    <div className="relative min-h-screen bg-black text-white">
      <OrbBackground />
      
      <main className="flex flex-col items-center justify-center h-screen gap-8">
        
        <h1 className="text-5xl font-bold">
          Welcome to <GradientText>The Future</GradientText>
        </h1>
        
        <TiltCard glowColor="purple" className="p-8 max-w-sm">
          <h2 className="text-2xl font-bold mb-4">Interactive 3D Card</h2>
          <p className="text-gray-400 mb-6">
            Hover over me to see the 3D tilt effect and dynamic neon glow.
          </p>
          <NeonButton variant="glow">
            Activate System
          </NeonButton>
        </TiltCard>
        
      </main>
    </div>
  );
}

🧩 Components

<TiltCard />

A 3D-perspective container that rotates based on cursor position.

• Props: glowColor ('purple', 'blue', 'green', 'pink'), className, children

<NeonButton />

High-impact buttons with hover glow effects and tap scales.

• Props: variant ('primary', 'secondary', 'glow'), onClick, children

<OrbBackground />

Deep space ambient background with floating animated orbs.

• Props: orbs (Array of custom orb configs), className

<GradientText />

Animated, flowing gradient text for headlines.

• Props: animate (boolean), className, children

🏷 Keywords

React, UI Library, Glassmorphism, Neon, 3D, Tilt, Framer Motion, Tailwind CSS, Animation, Modern, Futuristic, Dark Mode, Components, Design System, Cyberpunk.

📄 License

MIT © Abhishek Verma