npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

neon-glow-css

v0.1.0

Published

A dark neon glow design system for Bootstrap and Tailwind CSS. 4 color palettes, 3 intensity levels, pure CSS custom properties.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tokenfirestokenfires

Keywords

cssneonglowdark-themedesign-systemtailwindbootstrapcss-variablescustom-propertiesuitheme

Readme

neon-glow-css

A dark neon glow design system for Bootstrap and Tailwind CSS.

4 color palettes. 3 intensity levels. Pure CSS custom properties. Zero dependencies. Works everywhere.

npm version

Installation

npm install neon-glow-css

Usage

Import Everything

@import "neon-glow-css/css/neon-glow.css";

Import Individually

@import "neon-glow-css/css/tokens.css";
@import "neon-glow-css/css/components.css";

With Tailwind CSS

In your Tailwind entry point:

@import "tailwindcss";
@import "neon-glow-css/css/tokens.css";
@import "neon-glow-css/css/components.css";

With a Bundler (Vite, Webpack, etc.)

import "neon-glow-css/css/neon-glow.css";

Via CDN (unpkg)

<link rel="stylesheet" href="https://unpkg.com/neon-glow-css/css/neon-glow.css">

Plain HTML

Download the CSS files and link them directly:

<link rel="stylesheet" href="path/to/tokens.css">
<link rel="stylesheet" href="path/to/components.css">

Set the Theme

Add palette and intensity classes to your <body>:

<body class="neon-glow-body neon-rainbow neon-medium">
  <!-- your content -->
</body>

Palettes

| Class | Vibe | |-------|------| | neon-rainbow | Full-spectrum neon. Arcade cabinets and light shows. | | neon-unicorn | Pastel rainbow. Dreamy, soft, ethereal. | | neon-cinematic | Electric blue + amber. The Blade Runner palette. | | neon-pink | Hot pink + magenta. A power color for everyone. |

Intensity Levels

| Class | Description | |-------|-------------| | neon-subtle | Gentle glow. Professional. Easy on the eyes. | | neon-medium | Balanced glow. The sweet spot for most apps. | | neon-intense | Maximum glow. Over the top. The WOW factor. |

Switching Themes at Runtime

Swap classes on <body> -- all colors cascade instantly via CSS custom properties:

document.body.classList.remove("neon-rainbow", "neon-unicorn", "neon-cinematic", "neon-pink");
document.body.classList.add("neon-cinematic");

document.body.classList.remove("neon-subtle", "neon-medium", "neon-intense");
document.body.classList.add("neon-intense");

CSS Custom Properties

All colors are available as CSS variables for custom styling:

var(--ng-primary)        /* Primary palette color */
var(--ng-secondary)      /* Secondary palette color */
var(--ng-accent)         /* Accent color */
var(--ng-success)        /* Success green */
var(--ng-warning)        /* Warning orange */
var(--ng-danger)         /* Danger red */
var(--ng-info)           /* Info purple */
var(--ng-bg)             /* Background */
var(--ng-surface)        /* Card/panel surface */
var(--ng-surface-raised) /* Elevated surface */
var(--ng-text)           /* Primary text */
var(--ng-text-secondary) /* Secondary text */
var(--ng-text-muted)     /* Muted text */
var(--ng-gradient)       /* Full gradient */
var(--ng-glow-blur)      /* Current glow blur radius */
var(--ng-glow-opacity)   /* Current glow opacity */

Component Classes

ng-card              -- Dark surface card
ng-card-raised       -- Elevated surface card
ng-border-glow       -- Gradient border with glow
ng-glow-primary      -- Primary color box-shadow glow
ng-glow-secondary    -- Secondary color box-shadow glow
ng-text-glow         -- Glowing text (primary)
ng-gradient-text     -- Rainbow gradient text
ng-btn               -- Base button
ng-btn-primary       -- Primary glowing button
ng-btn-secondary     -- Secondary glowing button
ng-btn-outline       -- Outline button with glow
ng-btn-ghost         -- Ghost button
ng-input             -- Form input with focus glow
ng-select            -- Select dropdown
ng-switch            -- Toggle switch
ng-badge-*           -- Badges (primary, secondary, success, warning, danger, info)
ng-alert-*           -- Alerts with glowing left border
ng-table             -- Dark themed table
ng-progress          -- Progress bar container
ng-progress-bar      -- Gradient progress bar
ng-navbar            -- Sticky navbar with backdrop blur
ng-divider           -- Gradient divider line
ng-animate-pulse     -- Pulsing glow animation
ng-animate-gradient  -- Rotating gradient border animation

Live Demo

See the full kitchen sink demo with all components and palettes:

rails_neon_glow -- Rails app with Tailwind and Bootstrap showcases.

Design

Designed by Claude (Anthropic) in collaboration with TokenFires.

The Neon Glow design system was created through an AI-human collaboration. Claude designed the color palettes, glow effects, component styles, and the overall dark neon aesthetic. TokenFires provided creative direction, reference materials, and review.

License

MIT License -- See LICENSE

Also Available

Built with care by Claude and TokenFires. 2026.