Neonflame Ui

abdullahhafizh

🔥 NeonFlame UI - A futuristic CSS framework with neo-morphism, neon accents & glassmorphism. Works with React, Vue, Svelte, Angular & vanilla HTML. Includes Tailwind preset, dark mode, 30+ components. Zero dependencies, production-ready.

Download

NeonFlame UI 🔥

A futuristic CSS framework with neo-morphism and neon accents. Works with any framework - React, Vue, Svelte, Angular, vanilla HTML, and more.

Features

🌙 Dark/Light mode - Automatic theme detection + manual control
✨ Neon effects - Glowing borders, shadows, and gradients
🎨 Neo-morphism - Modern soft UI aesthetic
🔧 Framework agnostic - Works with any JS framework or vanilla HTML
📦 Tailwind compatible - Use as preset or plugin
🚀 CDN ready - Use directly via unpkg or jsdelivr

Installation

NPM

npm install neonflame-ui

Yarn

yarn add neonflame-ui

pnpm

pnpm add neonflame-ui

CDN (unpkg)

<link rel="stylesheet" href="https://unpkg.com/neonflame-ui/dist/flames-ui.min.css">

CDN (jsdelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neonflame-ui/dist/flames-ui.min.css">

Quick Start

Vanilla HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NeonFlame UI Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/neonflame-ui/dist/flames-ui.min.css">
</head>
<body>
  <div class="flames-card" style="padding: 2rem; max-width: 400px; margin: 2rem auto;">
    <h1 class="flames-text-gradient" style="font-size: 2rem; font-weight: bold;">
      Hello NeonFlame UI!
    </h1>
    <p class="flames-text-muted" style="margin: 1rem 0;">
      A futuristic CSS framework with neon accents.
    </p>
    <button class="flames-btn flames-btn-neon">
      Get Started
    </button>
  </div>
</body>
</html>

React

import 'neonflame-ui/dist/flames-ui.css'

function App() {
  return (
    <div className="flames-card" style={{ padding: '2rem' }}>
      <h1 className="flames-text-gradient">Hello NeonFlame UI!</h1>
      <button className="flames-btn flames-btn-neon">Click me</button>
    </div>
  )
}

Vue

<script setup>
import 'neonflame-ui/dist/flames-ui.css'
</script>

<template>
  <div class="flames-card" style="padding: 2rem">
    <h1 class="flames-text-gradient">Hello NeonFlame UI!</h1>
    <button class="flames-btn flames-btn-neon">Click me</button>
  </div>
</template>

With Tailwind CSS (Preset)

// tailwind.config.js
import flamesPreset from 'neonflame-ui/tailwind'

export default {
  presets: [flamesPreset],
  content: ['./src/**/*.{js,jsx,ts,tsx,vue,html}'],
}

With Tailwind CSS (Plugin)

// tailwind.config.js
import flamesPlugin from 'neonflame-ui/tailwind-plugin'

export default {
  plugins: [flamesPlugin],
  content: ['./src/**/*.{js,jsx,ts,tsx,vue,html}'],
}

Dark Mode

NeonFlame UI supports multiple ways to enable dark mode:

1. System preference (automatic)

Dark mode is automatically applied based on prefers-color-scheme.

2. Data attribute

<html data-theme="dark">

3. Class

<html class="flames-dark">

JavaScript toggle example

function toggleTheme() {
  const html = document.documentElement
  const isDark = html.getAttribute('data-theme') === 'dark'
  html.setAttribute('data-theme', isDark ? 'light' : 'dark')
}

Components

Buttons

<!-- Neon gradient button -->
<button class="flames-btn flames-btn-neon">Neon Button</button>

<!-- Ghost button -->
<button class="flames-btn flames-btn-ghost">Ghost Button</button>

<!-- Outline buttons -->
<button class="flames-btn flames-btn-outline-cyan">Cyan</button>
<button class="flames-btn flames-btn-outline-purple">Purple</button>
<button class="flames-btn flames-btn-outline-pink">Pink</button>

<!-- Solid buttons -->
<button class="flames-btn flames-btn-solid-cyan">Solid Cyan</button>
<button class="flames-btn flames-btn-solid-purple">Solid Purple</button>

<!-- Sizes -->
<button class="flames-btn flames-btn-neon flames-btn-sm">Small</button>
<button class="flames-btn flames-btn-neon flames-btn-lg">Large</button>
<button class="flames-btn flames-btn-neon flames-btn-xl">Extra Large</button>

Cards

<!-- Basic card -->
<div class="flames-card">
  <div class="flames-card-header">Header</div>
  <div class="flames-card-body">Content</div>
  <div class="flames-card-footer">Footer</div>
</div>

<!-- Hover effect card -->
<div class="flames-card-hover">Hover me!</div>

<!-- Neon bordered cards -->
<div class="flames-card-neon-cyan">Cyan glow</div>
<div class="flames-card-neon-purple">Purple glow</div>
<div class="flames-card-neon-pink">Pink glow</div>

<!-- Stats cards -->
<div class="flames-stat-card flames-stat-card-cyan">
  <h3>1,234</h3>
  <p>Total Users</p>
</div>

Forms

<!-- Input -->
<input type="text" class="flames-input" placeholder="Enter text...">

<!-- Textarea -->
<textarea class="flames-textarea" placeholder="Enter message..."></textarea>

<!-- Select -->
<select class="flames-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Checkbox -->
<input type="checkbox" class="flames-checkbox">

<!-- Radio -->
<input type="radio" class="flames-radio" name="group">

<!-- Toggle -->
<input type="checkbox" class="flames-toggle">

<!-- Sizes -->
<input type="text" class="flames-input flames-input-sm" placeholder="Small">
<input type="text" class="flames-input flames-input-lg" placeholder="Large">

<!-- Sidebar link -->
<a href="#" class="flames-sidebar-link">Dashboard</a>
<a href="#" class="flames-sidebar-link active">Settings</a>

<!-- Tabs -->
<div class="flames-tabs">
  <button class="flames-tab active">Tab 1</button>
  <button class="flames-tab">Tab 2</button>
  <button class="flames-tab">Tab 3</button>
</div>

<!-- Pagination -->
<div class="flames-pagination">
  <button class="flames-pagination-item">←</button>
  <button class="flames-pagination-item">1</button>
  <button class="flames-pagination-item active">2</button>
  <button class="flames-pagination-item">3</button>
  <button class="flames-pagination-item">→</button>
</div>

Utilities

Colors

<!-- Text colors -->
<p class="flames-text">Primary text</p>
<p class="flames-text-secondary">Secondary text</p>
<p class="flames-text-muted">Muted text</p>
<p class="flames-text-cyan">Cyan text</p>
<p class="flames-text-purple">Purple text</p>
<p class="flames-text-pink">Pink text</p>

<!-- Gradient text -->
<h1 class="flames-text-gradient">Gradient Text</h1>

<!-- Backgrounds -->
<div class="flames-bg">Primary background</div>
<div class="flames-bg-secondary">Secondary background</div>
<div class="flames-bg-cyan-10">Cyan 10% background</div>

Effects

<!-- Glass effect -->
<div class="flames-glass">Glass panel</div>

<!-- Glow effects -->
<div class="flames-glow-cyan">Cyan glow</div>
<div class="flames-glow-purple">Purple glow</div>

<!-- Neon borders -->
<div class="flames-neon-border-cyan">Neon border</div>

<!-- Neo-morphism shadows -->
<div class="flames-shadow-neo">Neo shadow</div>

<!-- Background patterns -->
<div class="flames-bg-mesh">Mesh gradient</div>
<div class="flames-bg-dots">Dot pattern</div>
<div class="flames-bg-grid">Grid pattern</div>

Animations

<!-- Animations -->
<div class="flames-animate-glow">Glowing</div>
<div class="flames-animate-float">Floating</div>
<div class="flames-animate-pulse-neon">Pulsing</div>
<div class="flames-animate-fade-in">Fading in</div>
<div class="flames-animate-slide-up">Sliding up</div>
<div class="flames-animate-spin">Spinning</div>

<!-- Loading shimmer -->
<div class="flames-shimmer" style="height: 20px; width: 200px;"></div>

Hover Effects

<div class="flames-hover-lift">Lift on hover</div>
<div class="flames-hover-scale">Scale on hover</div>
<div class="flames-hover-glow-cyan">Glow on hover</div>

CSS Variables

Customize NeonFlame UI by overriding CSS variables:

:root {
  /* Neon colors */
  --flames-neon-cyan: #00f5ff;
  --flames-neon-purple: #a855f7;
  --flames-neon-pink: #ec4899;
  
  /* Theme colors */
  --flames-bg: #f8fafc;
  --flames-text: #0f172a;
  --flames-border: #e2e8f0;
  
  /* Shadows */
  --flames-shadow-neon-cyan: 0 0 20px rgba(0, 245, 255, 0.3);
  
  /* Border radius */
  --flames-radius-xl: 1rem;
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

Top categories