🚀 Quick Start — njX UI Library

Installation

Choose your method

Three ways to get njX into your project — pick whatever fits your workflow.

🔗

CDN Link

Paste one <link> tag. Works in any HTML file instantly.

Recommended

📦

npm Install

For Node.js projects, Vite, Webpack, or any bundler.

For bundlers

📁

Download ZIP

Self-host all CSS files. Full control, works offline.

Self-hosted

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">  <html data-theme="dark">  <button class="btn btn-primary">Hello njX</button> <div class="card-glow"> <h2 class="text-gradient-primary">Built in 30 seconds</h2> </div>

💡

That's it. No npm, no build, no config. Delivered via jsDelivr — 100+ edge locations globally, free, and highly reliable.

Live preview

Built in 30 seconds

A real component from njX CSS

CSS only No build 9 themes

terminal

# Install via npm npm install njx-ui # Or with yarn yarn add njx-ui # Or with pnpm pnpm add njx-ui

Import in your project

// In your JS/TS entry file import 'njx-ui/css/style.min.css'; // Or in your main CSS @import 'njx-ui/css/style.min.css'; // Then set theme on <html> <html data-theme="dark">

⚡

Bundler-friendly. Works with Vite, Webpack, Rollup, Next.js, Nuxt, Astro. No PostCSS plugins or extra config needed — it's just CSS.

Package info

Packagenjx-ui

Version1.0.0

Size (min+gzip)~8 KB

LicenseMIT

Dependencies 0

Download the full njx-css/ folder and host it yourself. No CDN dependency, works completely offline and behind firewalls.

Download njx-css.zip

After extracting

<link rel="stylesheet" href="./njx-css/style.min.css">  <link rel="stylesheet" href="./njx-css/_base.css"> <link rel="stylesheet" href="./njx-css/_buttons.css"> <link rel="stylesheet" href="./njx-css/_cards.css">

🗂

Granular control. The archive contains 24 individual CSS files — import only the parts you need to minimize file size even further.

Archive contents

              njx-css/

               ├── style.min.css ← full
                bundle

               ├── _base.css

               ├── _reset.css

               ├── _tokens.css

               ├── _themes.css

               ├── _buttons.css

               ├── _cards.css

               ├── _forms.css

               ├── _tags.css

               ├── _modals.css

               ├── _tables.css

               ├── _animations.css

               ├── _gradients.css

               ├── _hovers.css

               └── ... 10 more files

Your first page

From zero to styled
in 3 steps

1

Connect the stylesheet

One <link> tag inside <head>. No JavaScript, no build step, nothing else required.

2

Pick a theme

Set data-theme on the <html> element. Every component adapts automatically — no extra CSS needed.

3

Use component classes

Add classes like btn btn-primary or card. That's the whole API — just class names on HTML elements.

<button class="btn btn-primary">Click me</button> <div class="card">A styled card</div> <span class="tag tag-primary">Badge</span>

Complete boilerplate

index.html

<!DOCTYPE html> <html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css"> <title>My App</title> </head> <body> <button class="btn btn-primary"> Get Started </button> <div class="card-glow"> <h2 class="text-gradient-primary"> Hello njX </h2> <p class="text-muted"> Built in 30 seconds. </p> </div> </body> </html>

Theme system

9 themes, one attribute

Click any theme below — every component on this page updates instantly. Save preference with: localStorage.setItem('theme', 'purple')

Dark

Light

Red

Blue

Green

Cyan

Yellow

Pink

Purple

Theme switching with JS

// Switch theme at any time function setTheme(name) { document.documentElement .setAttribute('data-theme', name); localStorage.setItem('theme', name); } // Restore on page load const saved = localStorage.getItem('theme'); if (saved) setTheme(saved); // Usage setTheme('purple'); // entire UI turns purple setTheme('dark'); // back to dark

Common patterns

Copy-paste snippets

The most commonly used patterns — ready to drop into your project.

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-gradient">Gradient</button>
<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-lg btn-primary">Large</button>

Cards

<div class="card">Basic card</div>
<div class="card-glow">Glow on hover</div>
<div class="card-gradient">Gradient border</div>
<div class="card-glass">Glass morphism</div>
<div class="card-dark">Dark variant</div>

Tags & Badges

<span class="tag">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-danger">Danger</span>
<span class="tag tag-accent">Accent</span>
<!-- Outline variant -->
<span class="tag tag-primary tag-outline">Outline</span>

Text gradients

<h1 class="text-gradient-primary">
  Primary gradient
</h1>
<h2 class="text-gradient-accent">
  Accent gradient
</h2>
<span class="text-gradient-rainbow">
  Rainbow
</span>
<span class="text-gradient-gold">Gold</span>

Animations

<!-- Loop animations -->
<div class="animate-float">Float</div>
<div class="animate-pulse">Pulse</div>
<div class="animate-glow">Glow</div>
<!-- Hover effects -->
<div class="hover-lift">Lifts on hover</div>
<div class="hover-glow">Glows on hover</div>
<!-- Text effects -->
<span class="animate-neon">Neon glow</span>

Layout grid

<!-- 12-column flex grid -->
<div class="row">
  <div class="col-6">Half</div>
  <div class="col-6">Half</div>
</div>
<!-- CSS Grid -->
<div class="grid-col-3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS Variables — Customize

/* Override any token in your CSS */
:root {
  /* Change primary color globally */
  --color-primary: #ff6b35;
  /* Adjust base spacing unit */
  --space-base: 5px;
  /* Change border-radius across all components */
  --radius-md: 6px;
}

Bulma compatibility

<!-- Bulma classes work out of the box -->
<button class="button is-primary">
  Primary
</button>
<button class="button is-primary is-rounded">
  Rounded
</button>
<button class="button is-loading">
  Loading
</button>

Utility classes

<!-- Tailwind-compatible spacing -->
<div class="p-4 mt-2 mb-4">...</div>
<!-- Flexbox helpers -->
<div class="flex items-center gap-4">...</div>
<!-- Typography -->
<p class="text-sm text-muted">Muted text</p>
<h1 class="text-2xl font-bold">Heading</h1>
<!-- Background gradients -->
<div class="bg-gradient-primary">...</div>