Open Source · MIT License · v1.0.0

9 themes.
One attribute.

A modern CSS component library — 40 KB, zero dependencies, zero build step. Switch the entire UI theme with a single HTML attribute.

Get Started Browse Components
40KB
Full bundle
0
Dependencies
9
Built-in themes
25+
Components
60+
CSS variables
Theme system

Switch the entire UI
with one HTML attribute

No CSS overrides. No JavaScript required. Every component adapts automatically through CSS custom properties inherited from data-theme.

Dark
Light
Red
Blue
Green
Cyan
Yellow
Pink
Purple
<html data-theme="dark">
Dashboard
Real-time analytics overview with live metrics and trend data.
Sign in
Components
Mix and match freely.
primary success filled 3
That's literally it → <html data-theme="purple">
Why njX

Everything you need.
Nothing you don't.

Built on CSS custom properties from the ground up. No preprocessors, no PostCSS, no config files.

🎨
9 Themes, one attribute
Dark, Light, Red, Blue, Green, Cyan, Yellow, Pink, Purple. Every component adapts automatically. No extra CSS needed.
data-theme="purple"
⚡
Zero build step
One CDN link and you're running. No npm, no webpack, no PostCSS config. Works in any HTML file, today.
CDN ready
🔑
CSS Variables First
60+ design tokens. Change --color-primary once and it ripples through every component. Theme your brand in 30 seconds.
60+ tokens
✨
Hover effects built in
30+ hover classes: scale, lift, glow, rotate, shimmer, blur, brightness. Effects that usually need custom CSS — already here.
30+ effects
🌈
Gradients out of the box
15+ background gradients, 8 text gradients, gradient borders, animated gradients. Design-ready without a single line of custom CSS.
_gradients.css
🎭
Animations included
Float, pulse, bounce, spin, heartbeat, wiggle, glow, neon text, rainbow, fade-in variants. Add a class, get an animation.
_animations.css
♻️
Bulma compatible
Already using Bulma? Classes like .button.is-primary work without changes. Migrate progressively, zero rewrites.
Drop-in replacement
📐
Two grid systems
Classic 12-col flex grid (.row + .col-*) and modern CSS Grid helpers (.grid-col-3). Pick what fits.
_grid.css
🎯
Tailwind-compatible utils
Same class names as Tailwind — flex gap-4 mt-6 px-4 rounded-lg work out of the box. Zero PostCSS, zero build step, 40 KB instead of 3 MB.
_utils.css
Familiar API

Know Tailwind?
You already know njX.

njX utilities use the exact same class names as Tailwind — no new syntax to learn. The difference: no build step, no PostCSS config, no 3 MB pipeline. Just 40 KB, drop it in and ship.

Tailwind CSS 3 MB+ · requires PostCSS build
tailwind.config.js + postcss.config.js
<!-- npm install tailwindcss postcss autoprefixer --> <!-- + tailwind.config.js + postcss.config.js + purge paths --> <div class="flex items-center gap-4 mt-6 px-4"> <button class="bg-blue-500 text-white font-bold px-6 py-2 rounded-lg hover:scale-105"> Click me </button> </div>
njX UI 40 KB · zero build · one CDN link
index.html — nothing else needed
<!-- <link rel="stylesheet" href="njx.min.css"> — done --> <div class="flex items-center gap-4 mt-6 px-4"> <button class="btn btn-primary hover-scale"> Click me </button> </div> <!-- + 9 themes, hover FX, gradients, animations -->
✓ Same utility class names
✓ Zero build step
✓ 40 KB vs 3 MB+
✓ Pre-built themed components on top
✓ No PostCSS, no config files
✓ Drop-in for any HTML file
Quick Start

Up and running
in 3 steps

No CLI. No config. No node_modules.
Just paste and build.

1
Add the CDN link
One line in <head>. That's all the setup you'll ever do.
2
Set your theme
Add data-theme="dark" to <html>. Switch anytime, no rebuild.
3
Use any component
Add classes like .btn.btn-primary, .card-glow, .inp. Done.
index.html
<!-- Step 1: One line install --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css" /> <!-- Step 2: Choose your theme --> <html data-theme="dark"> <!-- Step 3: Start building --> <button class="btn btn-primary"> Launch </button> <div class="card-glow hover-lift"> <h2 class="text-gradient-primary"> Hello njX </h2> <p class="text-muted mt-2"> Built in 30 seconds. </p> </div>
Live preview

Hello njX

Built in 30 seconds.

Components

27+ ready-to-use components

Everything a UI needs. Forms, navigation, feedback, layout — all styled, all themed.

🔲 Buttons 14 variants
🃏 Cards 7 variants
📋 Forms & Inputs float, glass
🏷 Tags & Badges dots, filled
💬 Modals 4 variants
🗂 Tabs switchable
📂 Accordion collapse
🔔 Notifications toast, banner
📊 Tables striped, hover
🧭 Breadcrumbs nav
📏 Grid System flex + css grid
🔤 Typography full scale
🌈 Gradients 15+ types
🎭 Hover FX 30+ effects
✨ Animations loop + fade-in
🗃 Panel sidebar
🔄 Progress bars
🔻 Dropdown nav menu
🎛 Slider range input
🔲 Sections hero, banner
🎠 Carousel scroll-snap
🔗 Links styles + hover
Comparison

Heavier than chota.
Lighter than everything else.

40KB gets you themes, animations, hover effects and gradients — features that don't exist anywhere else at this weight.

Feature chota Pico CSS Bulma njX ✦
Bundle size 3 KB 9 KB 78 KB ~40 KB
Built-in themes — 2 — 9
CSS Custom Properties partial ✓ — ✓ full
Hover effects — — — 30+
Gradients — — — 15+
Animations — — — ✓
Text gradients — — — 8 styles
Bulma compatible — — — ✓
Build step required No No No No
Tailwind-compatible utils — — — ✓ same API
JS required No No No No
Philosophy

"CSS has everything you need to build a great UI.
You just shouldn't have to write it every time."

njX is built on the belief that a CSS library should be invisible — no framework lock-in, no class name memorisation marathons, no config files. Just CSS custom properties doing what they were designed to do.

Live preview

See it in action

Buttons — 14 variants
Cards — 7 variants
card
card-glass
card-dark
card-bordered
card-glow
card-gradient
Text Gradients — 8 styles
Primary Accent Sunset Ocean Gold Cosmic Rainbow
Animations — loop classes
float
pulse
bounce
spin
♥
heartbeat
glow
Neon text
Rainbow

Ready to build?

One line. Any HTML file. Any project. Start in under a minute.

Get Started — it's free Browse all components →