Getting started

Quick Start

One file, zero class names. Semantic HTML is styled automatically via element selectors — connect classless.min.css and write plain HTML. Need component classes instead? The full library lives at njxui.dev.

✦ One stylesheet at a time. classless.min.css and the full style.min.css are standalone builds — don't load both together.

1

Add the stylesheet

One <link> tag in <head>. No configuration needed.

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

2

Write plain HTML

No class names needed. Every native HTML element — <button>, <table>, <form>, <details> — gets styled automatically.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui@1/css/classless.min.css">
</head>
<body>
  <button>Hello njX</button>
  <article>
    <h2>Works.</h2>
    <p>No class names needed.</p>
  </article>
</body>
</html>

3

Themes (optional)

Classless supports the same 9 themes. Add data-theme to <html> to switch color palettes.

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

📦

More install options: npm install, download ZIP, or import individual CSS files. See the Quick Start guide for all methods.

Theme system

Themes

9 built-in themes, each defined as a complete set of CSS custom properties. Switch the entire UI with one attribute — no JavaScript required.

Dark

Light

Red

Blue

Green

Cyan

Yellow

Pink

Purple

Theme switching

/* Via HTML attribute */
<html data-theme="purple">

/* Via JavaScript */
document.documentElement.setAttribute('data-theme', 'purple');

/* With localStorage persistence */
function setTheme(name) {
  document.documentElement.setAttribute('data-theme', name);
  localStorage.setItem('theme', name);
}
const saved = localStorage.getItem('theme');
if (saved) setTheme(saved);

Reference

Styled Elements

Every native HTML element below is styled automatically — no class names required. Just write semantic HTML.

📝 Headings

<h1> — <h6>
Size · weight · color
Responsive scale

📄 Text

🔗 Links

<a>
color-primary
hover underline

🔲 Button

📋 Forms

✅ Checkboxes

📊 Table

📜 Lists

💻 Code

<code> <pre>
<kbd> <samp>
Syntax highlight colors

🪗 Accordion

<details>
<summary>
Native open/close — no JS

🧭 Nav

📦 Media

<img> max-width 100%
<figure> <figcaption>
<hr> <progress>

💡

All these elements respond to data-theme — switch to any of 9 themes with zero extra CSS. Want component classes (.btn-glow, .card-glass...)? Switch to Full mode.

Reference

JavaScript

Classless mode requires zero JavaScript. Interactive elements work natively via HTML.

💡

Collapse / Accordion — use <details><summary>, browser handles open/close natively.
Dialogs — use <dialog> with showModal() — no library needed.
Forms — native validation with required, pattern, type attributes.

Want openModal(), showToast(), tabSwitch()? Switch to Interactive mode.

Native HTML — no JS needed

<!-- Accordion: native open/close -->
<details>
  <summary>Click to expand</summary>
  <p>Content here</p>
</details>

<!-- Dialog: native modal -->
<dialog id="dlg">
  <p>Modal content</p>
  <button onclick="dlg.close()">Close</button>
</dialog>
<button onclick="dlg.showModal()">Open</button>

Reference

Design Tokens

All values are CSS custom properties defined in _base.css. Use them in your own styles for automatic theme adaptation.

Colors

Token	Description
--color-primary	Main brand color (theme-reactive)
--color-accent	Secondary accent
--color-success	Green / success state
--color-error	Red / error state
--color-warning	Orange / warning state
--color-light	Primary text
--color-muted	Secondary / muted text
--сolor-dark	Page background
--color-dark-secondary	Card / surface background

Spacing (4px base)

Token	Value
--space-1	4px
--space-2	8px
--space-3	12px
--space-4	16px
--space-6	24px
--space-8	32px
--space-12	48px
--space-16	64px

Typography

Token	Value
--fs-xs	12px
--fs-sm	14px
--fs-base	16px
--fs-lg	18px
--fs-xl	20px
--fs-2xl	24px
--fs-3xl	30px
--fs-4xl	36px
--fs-5xl	48px

Border Radius

--radius-none	0
--radius-sm	6px
--radius-md	12px
--radius-lg	20px
--radius-full	9999px

Transitions

--ease-fast	0.1s ease
--ease	0.2s ease
--ease-slow	0.4s ease

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-primary

--shadow-accent

Reference

Using Design Tokens

How to write CSS that works with all 9 themes automatically.

9 themes automatically No hardcoded colors DRY — one token everywhere

1

Colors — `--color-*`

Never hardcode a hex value. Use a token — and when the theme changes, the color updates automatically everywhere.

❌ Bad — hardcoded

.btn {
  color: #14a0ff;
  border: 1px solid #14a0ff;
  background: rgba(20,160,255,0.1);
}

✅ Good — uses tokens

.btn {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

2

Spacing — `--space-*`

4px base grid. Index = multiplier × 4px.

--space-1
4px

--space-2
8px

--space-3
12px

--space-4
16px

--space-6
24px

--space-8
32px

--space-12
48px

--space-16
64px

.header { padding: var(--space-4) var(--space-6); }
.card   { padding: var(--space-6); margin-bottom: var(--space-4); }
.layout { gap: var(--space-4); }

3

Typography — `--fs-*`

Aa

--fs-xs
12px

Aa

--fs-sm
14px

Aa

--fs-base
16px

Aa

--fs-lg
18px

Aa

--fs-xl
20px

Aa

--fs-2xl
24px

Aa

--fs-3xl
30px

Aa

--fs-4xl
36px

Aa

--fs-5xl
48px

.label   { font-size: var(--fs-xs); text-transform: uppercase; }
.body    { font-size: var(--fs-base); line-height: 1.6; }
.heading { font-size: var(--fs-3xl); font-weight: 800; }

4

Font Families — `--font-*`

--font-sans → Inter (body)

--font-heading → Poppins (headings)

--font-mono → Roboto Mono (code)

Sans-serif

The quick brown fox

--font-interInter

The quick brown fox

--font-robotoRoboto

The quick brown fox

--font-poppinsPoppins

The quick brown fox

--font-montserratMontserrat

The quick brown fox

--font-outfitOutfit

The quick brown fox

--font-jakartaPlus Jakarta Sans

The quick brown fox

--font-dm-sansDM Sans

The quick brown fox

--font-nunitoNunito

The quick brown fox

--font-spaceSpace Grotesk

The quick brown fox

--font-manropeManrope

The quick brown fox

--font-figtreeFigtree

The quick brown fox

--font-soraSora

Monospace

const x = 42;
 --font-roboto-monoRoboto Mono 

const x = 42;
 --font-jetbrainsJetBrains Mono 

const x = 42;
 --font-fira-codeFira Code 

💡

Change the active font for the whole site by overriding --font-sans, --font-heading or --font-mono in your own CSS — all components update automatically.

5

Radius & Shadows — `--radius-` / `--shadow-`

--radius-none
0

--radius-sm
6px

--radius-md
12px

--radius-lg
20px

--radius-full
9999px

.btn   { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.card  { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.glow  { box-shadow: var(--shadow-primary); }

5

Transitions — `--ease-*`

var(--ease-fast)  /* 0.1s ease — for hover states */
var(--ease)       /* 0.2s ease — standard default */
var(--ease-slow)  /* 0.4s ease — smooth reveals */

.btn  { transition: all var(--ease); }
.card { transition: transform var(--ease), box-shadow var(--ease); }

6

Full component — tokens only

Live result

New round

Aviator ×5.2

Bet: $10 → Win: $52

CSS

.game-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-dark-secondary);
  box-shadow: var(--shadow-md);
}
.game-card__label {
  font-size: var(--fs-xs);
  color: var(--color-primary);
}
.game-card__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-light);
}

Reference

Utility Classes

Utility classes are part of Full mode.

💡

Classes like .flex, .p-4, .text-primary are included in Full mode (style.min.css). In Classless mode only native HTML tags are styled — no utility classes are needed to get a clean look.

Reference

Animations

Animation classes are part of Full mode.

💡

Classes like .fade-in, .animate-pulse, .animate-float are included in Full mode. Classless mode doesn't include animation classes — use native CSS @keyframes in your own stylesheet if needed.

Project

File Structure

Classless mode — one file, zero dependencies.

njx-ui/
├── classless.min.css   ← 48 KB standalone, no classes
│
│  That's it. No JS, no config, no build step.
│
│  Internally it contains:
│  ├── _base.css            ← design tokens + 9 themes
│  └── _classless-tags.css  ← styles on h1, p, button, input...

💡

Want component classes too? Switch to style.min.css (Full) — it styles components via classes. Full and Classless are standalone builds: use one, not both.

Project

Examples

Semantic HTML — no class names needed.

Article page

<article>
  <h1>Title</h1>
  <p>Lead paragraph with <strong>bold</strong> and <em>italic</em>.</p>
  <blockquote>A quoted insight.</blockquote>
  <p>Read more at <a href="#">this link</a>.</p>
</article>

Form

<form>
  <fieldset>
    <legend>Contact</legend>
    <label>Name</label>
    <input type="text" placeholder="Your name">
    <label>Email</label>
    <input type="email" placeholder="you@example.com">
    <button type="submit">Send</button>
  </fieldset>
</form>

Accordion

<details>
  <summary>Section one</summary>
  <p>Content revealed on click — no JS.</p>
</details>
<details>
  <summary>Section two</summary>
  <p>Another panel.</p>
</details>

Data table

<table>
  <thead><tr>
    <th>Name</th><th>Role</th><th>Status</th>
  </tr></thead>
  <tbody>
    <tr><td>Alice</td><td>Admin</td><td>Active</td></tr>
    <tr><td>Bob</td><td>Editor</td><td>Inactive</td></tr>
  </tbody>
</table>

Quick Start

Themes

Styled Elements

JavaScript

Native HTML — no JS needed

Design Tokens

Using Design Tokens

Colors — --color-*

Spacing — --space-*

Typography — --fs-*

Font Families — --font-*

Radius & Shadows — --radius-* / --shadow-*

Transitions — --ease-*

Full component — tokens only

Utility Classes

Animations

File Structure

Examples

Colors — `--color-*`

Spacing — `--space-*`

Typography — `--fs-*`

Font Families — `--font-*`

Radius & Shadows — `--radius-` / `--shadow-`

Transitions — `--ease-*`