DEV Community

Cover image for I built a zero-dependency CSS library with 9 built-in themes — here's why
nJ
nJ

Posted on

I built a zero-dependency CSS library with 9 built-in themes — here's why

#css #opensource #webdev #showdev

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:

Bootstrap — great for dashboards and admin panels. For landing pages it feels heavy (~200KB), opinionated, and every Bootstrap site looks the same unless you heavily customize it.

Tailwind CSS — I actually like Tailwind. But it requires a build step, PostCSS, a config file, and you're essentially writing CSS in your HTML. For a quick landing page or a client project, that's overhead I don't always want.

shadcn/ui, Radix, etc. — require React. 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 CSS component library (~40KB minified) with 25+ components and 9 built-in color themes.

You include it like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
Enter fullscreen mode Exit fullscreen mode

And use components like this:

<button class="btn btn-primary">Get Started</button>
<button class="btn btn-outline">Learn More</button>
Enter fullscreen mode Exit fullscreen mode

That's it. No configuration, no build step, no JavaScript required for styling.

9 themes, one attribute

The feature I'm most happy with is the theme system. Every color in the library is a CSS custom property token. Switching themes is literally one HTML attribute:

<!-- Dark theme (default) -->
<html data-theme="dark">

<!-- Switch to blue theme -->
<html data-theme="blue">

<!-- Switch to pink theme -->
<html data-theme="pink">
Enter fullscreen mode Exit fullscreen mode

Available themes: dark, light, red, blue, green, cyan, yellow, pink, purple

All components — buttons, cards, forms, notifications, everything — update automatically.

Here's a live demo with all 9 themes. Click the color dots in the top bar:

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)

Utilities built in:

  • 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

Here's a complete hero section using only njX UI classes:

<!DOCTYPE html>
<html data-theme="dark">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
</head>
<body>

  <section class="section-hero">
    <div class="container">
      <span class="tag tag-primary">New · v1.0.7</span>
      <h1 class="text-5xl font-black mt-4">
        Build landing pages<br>
        <span class="text-gradient-primary">10x faster</span>
      </h1>
      <p class="text-lg text-muted mt-4 max-w-lg">
        Zero dependencies. One link tag. 25+ components, 9 themes,
        full CSS variable control.
      </p>
      <div class="flex gap-3 mt-8">
        <button class="btn btn-primary btn-lg">Get Started</button>
        <button class="btn btn-outline btn-lg">View Docs →</button>
      </div>
    </div>
  </section>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Switch the data-theme attribute on <html> and the entire page recolors instantly.

The theme switcher (optional JS, ~10 lines)

If you want a live theme switcher like most of my demos have, here's the entire JavaScript needed:

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);
Enter fullscreen mode Exit fullscreen mode

No library, no framework, no build step. Ten lines of vanilla JS.

Buttons — because every project needs buttons

One of the most complete sections is the button collection. 50+ variants:

💡 Replace with your actual buttons CodePen slug.

Sizes from btn-xs to btn-2xl, solid + outline + ghost + gradient + glow + animated + icon + group + loading states. All in one class.

Animations and hover effects

40+ hover effects and 15+ CSS animations — all single classes, no JS:

<!-- Hover effects -->
<div class="hover-lift">lifts on hover</div>
<div class="hover-glow">glows on hover</div>
<div class="hover-tilt">3D tilt on hover</div>

<!-- CSS animations -->
<div class="animate-float">floating animation</div>
<div class="animate-pulse">pulsing animation</div>
<div class="animate-shimmer">shimmer animation</div>
Enter fullscreen mode Exit fullscreen mode

💡 Replace with your actual animations CodePen slug.

How it's installed

Via CDN (no install):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
<!-- Optional JS for sidebars, modals, tabs -->
<script src="https://cdn.jsdelivr.net/npm/njx-ui/js/njx.js"></script>
Enter fullscreen mode Exit fullscreen mode

Via npm:

npm install njx-ui
Enter fullscreen mode Exit fullscreen mode

Current 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:

  1. I'm forced to keep the code clean and documented
  2. Other developers can catch bugs I miss
  3. If it helps one person skip rewriting the same button for the eleventh time, that's worth it

Links

Would love to hear what you think — especially if you try it on a project. What component would you want to see added next?

Top comments (0)