I built a zero-dependency CSS library with 9 built-in themes — here's why
Source: Dev.to
I was building my tenth landing page this year.
Same routine: open a new project, copy the button styles from the last one, paste the card CSS, tweak the colors, fight with Bootstrap’s opinionated defaults, or spend 40 minutes configuring Tailwind just to get a centered hero section.
At some point I asked myself:
Why don’t I have a single file I can drop into any project and just start building?
That question turned into six months of work. The result is njX UI — a pure‑CSS component library built specifically for landing pages.
The Problem with Existing Options
I didn’t want to build yet another library. I genuinely tried to use what existed:
| Library | Pros | Cons |
|---|---|---|
| Bootstrap | Great for dashboards and admin panels. | Heavy (~200 KB), opinionated, every site looks the same unless heavily customized. |
| Tailwind CSS | Very flexible, I actually like it. | Requires a build step, PostCSS, a config file, and you end up writing CSS in your HTML – overhead for quick landing pages. |
| shadcn/ui, Radix, etc. | Powerful component collections. | Require React (or another framework). Not always an option. |
What I Actually Wanted
- One
<link>tag, done. - Pre‑built components that look good out of the box.
- Multiple themes I can switch with a single attribute.
- Pure HTML — no framework, no build step, no npm required.
So I built it.
What Is njX UI?
njX UI is a ~40 KB minified CSS component library with 25+ components and 9 built‑in color themes.
Include it in your page
Use components
Get Started
Learn MoreThat’s it. No configuration, no build step, no JavaScript required for styling.
9 Themes, One Attribute
Every color in the library is a CSS custom‑property token. Switching themes is literally one HTML attribute:
Available themes: dark, light, red, blue, green, cyan, yellow, pink, purple.
All components — buttons, cards, forms, notifications, everything — update automatically.
Live demo: Click the color dots in the top bar to see all 9 themes.
What’s Included
25+ Components
| Category | Components |
|---|---|
| Layout | Sections, Hero, Grid, Container |
| UI | Buttons (50+ variants), Cards, Badges, Tags |
| Forms | Input, Select, Checkbox, Radio, Switch |
| Feedback | Notifications, Toast, Modals, Popups |
| Navigation | Tabs, Sidebar/Drawer (6 variants) |
| Data | Tables, Skeleton loaders |
| Effects | 15+ CSS animations, 40+ hover effects |
| Gradients | 50+ gradient classes (bg, text, border, animated) |
Built‑In Utilities
- Typography scale with 12 font presets.
- Spacing system.
- Color tokens for all semantic states (
primary,accent,success,error,warning). - Dark/light mode out of the box.
Real‑World Usage: A Hero Section in 5 Minutes
New · v1.0.7
Build landing pages
10x faster
Zero dependencies. One link tag. 25+ components, 9 themes,
full CSS variable control.
Get Started
View Docs →
Changing the data-theme attribute on <html> recolors the entire page instantly.
Optional Theme Switcher (≈10 Lines of Vanilla JS)
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('njx-theme', theme);
}
// Restore saved theme on page load
const saved = localStorage.getItem('njx-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);No library, no framework, no build step—just ten lines of plain JavaScript.
Buttons — Because Every Project Needs Buttons
The button collection is one of the most complete sections: 50+ variants ranging from btn-xs to btn-2xl, solid / outline / ghost / gradient / glow / animated / icon / group / loading states. All controlled with a single class.
Animations & Hover Effects
40+ hover effects and 15+ CSS animations — all single‑class utilities, no JavaScript required:
lifts on hover
glows on hover
3D tilt on hover
floating animation
pulsing animation
shimmer animationHow It’s Installed
Via CDN (no install)
Just add the <link> tag and start using the classes.
njX UI – the “drop‑in” CSS library that lets you build landing pages 10× faster.
Via npm
npm install njx-uiCurrent State and What’s Next
The library is at v1.0.7 and actively developed.
What’s stable
- All 25+ components
- Full 9‑theme system
- Sidebar/Drawer with 6 variants and full JS API
- Animation and hover utilities
What’s coming
- Dark/light toggle component (already in docs)
- More layout primitives
- Better documentation with search
Why Open Source
I use this library in client projects. Making it open source means:
- I’m forced to keep the code clean and documented
- Other developers can catch bugs I miss
- If it helps one person skip rewriting the same button for the eleventh time, that’s worth it
Links
🚀 Live demo:
★ GitHub:
📦 npm:
- 📖 Docs: full component reference at the live demo link above
Would love to hear what you think — especially if you try it on a project. What component would you want to see added next?