Quick Start — njX Classless · One CDN link. Zero class names.

Install

One line in your <head>.

classless.min.css — 48 KB (~7 KB gzip), standalone. One link tag is all you need. No class names, no build step, no bundler.

Every <button>, <input>, <table>, <details> is styled automatically through native HTML element selectors.

Tip
The CDN is cached on jsdelivr — 48 KB on disk, ~7 KB over the wire (gzip). Subsequent visitors hit your CDN cache or theirs.

Theme

One attribute. Nine themes.

Set data-theme on <html> (or any wrapper — it's scoped to the subtree). Every component below that node re-tints automatically through inherited CSS custom properties.

darkDefault. Electric blue on deep black.
lightInverted. Readable on white.
red · blue · green · cyan · yellow · pink · purpleBold chromatic variants. Swap at any time.

Persist it
Drop this before the library to remember the user's pick across reloads:

localStorage.getItem('theme') &&
              document.documentElement.setAttribute('data-theme',
              localStorage.getItem('theme'))

Elements

Write HTML. It just works.

Every native HTML element below is styled automatically — no class names, no configuration. Classless mode styles the browser's default elements so your semantic markup looks great out of the box.

Text<h1>–<h6>, <p>, <blockquote>, <code>, <pre>
Forms<input>, <textarea>, <select>, <button>, <fieldset>
Layout<table>, <ul>, <ol>, <details>, <nav>

Want component classes?
The full njX UI library — 30+ component classes plus utilities — lives at njxui.dev. Use one stylesheet at a time: the builds are standalone.

Brand it

Override one variable.

You don't need to ship a custom theme. Drop a :root override in your own stylesheet and every component on the page retints. The default palette is nine CSS custom properties; override them to match your brand.

Want scoped branding? Apply the same override to a wrapper element instead of :root. Anything inside inherits — anything outside keeps the default.

Full tokens list
60+ variables live in the _base.css file — colors, radii, shadows, font stacks, ease curves. Every one is overridable.

index.html HTML

Your first page

From zero to styled
in 3 steps

Connect the stylesheet

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui@1/css/classless.min.css">

Pick a theme

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

<html lang="en" data-theme="dark">
<!-- dark · light · red · blue · green · cyan · yellow · pink · purple -->

Write semantic HTML

No class names needed. Every native HTML element is styled automatically — <button>, <input>, <table>, <details> and more.

<button>Click me</button>
<input type="text" placeholder="email">
<details><summary>FAQ</summary>Answer</details>

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@1/css/classless.min.css">
  <title>My App</title>
</head>
<body>

  <h1>Hello njX</h1>
  <p>No class names needed.</p>
  <button>Get Started</button>
  <input type="text" placeholder="Your name">

</body>
</html>

Up and running
before your coffee.

You're shipping njX UI.

One line in your <head>.

One attribute. Nine themes.

Write HTML. It just works.

Override one variable.

That's the whole tour.

From zero to styled
in 3 steps

Keep building

Like njX? Star it on GitHub ⭐

Up and runningbefore your coffee.

You're shipping njX UI.

One line in your <head>.

One attribute. Nine themes.

Write HTML. It just works.

Override one variable.

That's the whole tour.

From zero to styledin 3 steps

Keep building

Like njX? Star it on GitHub ⭐

Up and running
before your coffee.

From zero to styled
in 3 steps