🎨 Themes

9 built-in themes via data-theme on <html>. Click a card to switch the entire page theme.

Theme switcher

dark

data-theme="dark"

light

data-theme="light"

red

data-theme="red"

blue

data-theme="blue"

green

data-theme="green"

cyan

data-theme="cyan"

yellow

data-theme="yellow"

pink

data-theme="pink"

purple

data-theme="purple"

Theme switcher

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

🎨 Design Tokens

CSS-переменные из _base.css — единый источник правды для всех стилей. Меняй здесь — применяется везде.

Semantic colors

primary

--color-primary

accent

--color-accent

success

--color-success

error

--color-error

warning

--color-warning

muted

--color-muted

light

--color-light

surface

--color-dark-secondary

Semantic colors

--color-primary
--color-accent
--color-success
--color-error
--color-warning
--color-muted
--color-light
--color-dark-secondary

Primary scale

100

200

300

400

500

600

700

800

900

Primary scale

--color-primary-100 … --color-primary-900

Neutral scale

50

100

200

300

400

500

600

700

800

900

Neutral scale

--color-neutral-50 … --color-neutral-900

Font families

Aa Gg

Sans · body

--font-sans (Inter)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123

Aa Gg

Display · headings

--font-heading (Poppins)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123

Aa Gg

Mono · code

--font-mono (Roboto Mono)

const x = 42;
fn() => { return true }

Font families

--font-sans:    var(--font-inter)
--font-heading: var(--font-poppins)
--font-mono:    var(--font-roboto-mono)

Font sizes

--fs-xs

The quick brown fox jumps

12px

--fs-sm

The quick brown fox jumps

14px

--fs-base

The quick brown fox jumps

16px

--fs-lg

The quick brown fox

18px

--fs-xl

The quick brown fox

20px

--fs-2xl

The quick brown

24px

--fs-3xl

The quick brown

30px

--fs-4xl

The quick

36px

--fs-5xl

Display

48px

--fs-hero

Hero

96px

Font sizes

--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
--fs-hero: 96px  (+ fluid: --fs-f-base, --fs-f-xl…)

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

Spacing scale

--space-1: 4px   --space-2: 8px   --space-3: 12px
--space-4: 16px  --space-6: 24px  --space-8: 32px
--space-10: 40px --space-12: 48px --space-16: 64px
--space-20: 80px --space-24: 96px

Border radius

none
0px

sm
6px

md
12px

lg
20px

xl
30px

2xl
40px

full
9999px

Border radius

--radius-none: 0px    --radius-sm: 6px
--radius-md: 12px     --radius-lg: 20px
--radius-xl: 30px     --radius-2xl: 40px
--radius-full: 9999px

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-primary

--shadow-accent

--shadow-glow

Shadows

--shadow-sm      --shadow-md      --shadow-lg
--shadow-primary --shadow-accent  --shadow-glow

⚡ Variants

data-variant attribute from _native.css — applies semantic color to native elements without class names.

Button variants

<button>Default</button>
<button data-variant="accent">Accent</button>
<button data-variant="success">Success</button>
<button data-variant="warning">Warning</button>
<button data-variant="error">Error</button>
<button data-variant="dark">Dark</button>
<button data-variant="light">Light</button>

Input variants

<input type="text" placeholder="Default">
<input type="text" data-variant="success" value="Valid value">
<input type="text" data-variant="error" value="Invalid value">
<input type="text" data-variant="warning" placeholder="Warning state">

Link variants

Default link Accent Success Warning Error Dark

Link variants

<a href="#">Default link</a>
<a href="#" data-variant="accent">Accent</a>
<a href="#" data-variant="success">Success</a>
<a href="#" data-variant="warning">Warning</a>
<a href="#" data-variant="error">Error</a>
<a href="#" data-variant="muted">Muted</a>

𝐓 Headings & Typography

Headings, paragraphs, blockquotes and text formatting from _native.css. No classes needed inside <article>.

Headings h1–h6

Heading 1 — The quick brown fox

Heading 2 — jumps over

Heading 3 — the lazy dog

Heading 4 — Pack my box

Heading 5 — with five dozen

Heading 6 — liquor jugs

Headings h1–h6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph & text styles

A regular paragraph with bold text, italic text, and small text. Mix them for bold italic combinations.

Use underline sparingly. ~~Strikethrough~~ for outdated content. Highlighted text draws attention.

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

Paragraph & text styles

<p>A paragraph with <strong>bold</strong>, <em>italic</em>, <small>small</small>.</p>
<p><mark>Highlighted</mark>, <s>strikethrough</s>, <u>underline</u>.</p>
<blockquote>
  Quote text here.
  <cite>— Author</cite>
</blockquote>

🔗 Inline & Links

Inline semantic elements styled by _native.css: links, citations, definitions, abbreviations, and more.

Links

Regular link — Active (aria-current) — External link ↗

Links

<a href="#">Regular link</a>
<a href="#" aria-current="page">Active link</a>
<a href="#" target="_blank" rel="noopener">External ↗</a>

Inline semantic elements

Cited work — Inline quotation — Definition term — variable — H₂O — E = mc²

~~Deleted text~~ — Inserted text — Highlighted text — HTML

Inline semantic elements

<cite>Cited work</cite>
<q>Inline quotation</q>
<dfn>Definition</dfn>
<var>variable</var>
H<sub>2</sub>O
E = mc<sup>2</sup>
<del>Deleted</del>
<ins>Inserted</ins>
<mark>Highlighted</mark>
<abbr title="HyperText Markup Language">HTML</abbr>

≡ Lists

Unordered, ordered, and nested lists styled by _native.css.

Unordered list

First item
Second item with a link
Third item
- Nested item one
- Nested item two
Fourth item

Unordered list

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>

Ordered list

Design the layout
Write semantic HTML
Apply classless CSS
1. Link the stylesheet
2. Set data-theme
Ship it

Ordered list

<ol>
  <li>Design the layout</li>
  <li>Write semantic HTML</li>
  <li>Apply classless CSS
    <ol>
      <li>Link the stylesheet</li>
      <li>Set data-theme</li>
    </ol>
  </li>
  <li>Ship it</li>
</ol>

⌨ Code

Inline code, keyboard shortcuts with <kbd>, and <pre> blocks styled by _native.css.

Inline code & kbd

Use const for block-scoped constants. Press Ctrl + Shift + I to open DevTools.

Run npm install then npm run dev to start the server.

Inline code & kbd

<p>
    Use <code>const</code> for block-scoped constants. Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to open DevTools.
</p>
<p>
    Run <code>npm install</code> then <code>npm run dev</code> to start the server.
</p>

Pre block

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('World'));

Pre block

<pre><code>function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('World'));</code></pre>

📊 Tables

Native <table> with thead, tbody, tfoot and caption — all styled by _native.css.

Full table with thead / tbody / tfoot

Team Members
Name	Role	Location	Status
Alice Chen	Lead Developer	San Francisco	Active
Bob Kline	Designer	Berlin	Active
Carol Davis	DevOps	London	Away
Dan Park	QA Engineer	Seoul	Active
Total members			4

Full table with thead / tbody / tfoot

<table>
  <caption>Team Members</caption>
  <thead>
    <tr><th>Name</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice Chen</td><td>Developer</td><td>Active</td></tr>
    <tr><td>Bob Kline</td><td>Designer</td><td>Active</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>2</td></tr>
  </tfoot>
</table>

📋 Inputs & Forms

Native form elements styled by _native.css — label, input, select, textarea, fieldset.

Label + input

<form>
  <label>Full name <input type="text" placeholder="Jane Doe"></label>
  <label>Email <input type="email" placeholder="jane@example.com"></label>
  <label>Password <input type="password" placeholder="••••••••"></label>
</form>

Select & textarea

<label>Country
  <select>
    <option>Choose a country</option>
    <option>United States</option>
  </select>
</label>
<label>Message
  <textarea rows="4" placeholder="Write your message..."></textarea>
</label>

Fieldset & legend

<form>
  <fieldset>
    <legend>Personal Info</legend>
    <label>First name <input type="text"></label>
    <label>Last name <input type="text"></label>
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <label><input type="checkbox"> Subscribe</label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Ready form cards

Newsletter signup

Get classless.css examples, release notes and new ready blocks.

Contact form

Login card

Validation states

Ready form cards

<article>
  <h3>Newsletter signup</h3>
  <p>Get classless.css examples and release notes.</p>
  <form>
    <label>Email <input type="email" placeholder="you@example.com"></label>
    <label><input type="checkbox" checked> Send updates</label>
    <button type="button" data-variant="primary">Subscribe</button>
  </form>
</article>

🎛 Controls

Native checkboxes, radio buttons, and switches (role="switch") styled by _native.css.

Checkbox

Checked option Unchecked option Disabled Disabled checked

Checkbox

<label><input type="checkbox" checked> Checked</label>
<label><input type="checkbox"> Unchecked</label>
<label><input type="checkbox" disabled> Disabled</label>

Radio buttons

Option A Option B Option C Disabled

Radio buttons

<label><input type="radio" name="plan" checked> Option A</label>
<label><input type="radio" name="plan"> Option B</label>
<label><input type="radio" name="plan"> Option C</label>

Switch (role="switch")

Notifications enabled Dark mode Analytics (disabled)

Switch (role="switch")

<label>
  <input type="checkbox" role="switch" checked>
  Notifications enabled
</label>
<label>
  <input type="checkbox" role="switch">
  Dark mode
</label>

▣ Ready Cards

Copy-ready card patterns built from semantic <article>, headings, lists and buttons. Useful for docs, landing pages and internal tools.

CTA card pair

Open source CSS

Build docs and prototypes with zero component classes.

Drop in classless.css, write semantic HTML, and keep markup readable enough to copy straight from docs.

Explore docs GitHub

Full njX UI

Need more than classless? Use the full component kit.

Buttons, cards, sidebars, modals, animations and utilities share the same theme tokens.

View npm Live docs

CTA card pair

<article>
  <span>Open source CSS</span>
  <h3>Build docs and prototypes with zero component classes.</h3>
  <p>Drop in classless.css and write semantic HTML.</p>
  <p>
    <a href="https://njxui.dev">Explore docs</a>
    <a href="https://github.com/njbSaab/njx-css-ui">GitHub</a>
  </p>
</article>

Feature cards

01

No classes required

Native headings, paragraphs, lists, tables and forms get sensible defaults.

Read reference

02

Data variants

Use attributes like data-variant="success" for meaningful states.

Open docs

03

Theme aware

Switch every card with one data-theme attribute on the root.

Try themes

Feature cards

<article>
  <h3>No classes required</h3>
  <p>Native elements get sensible defaults.</p>
  <a href="https://njxui.dev">Open docs</a>
</article>

Pricing cards

Classless

$0 / MIT

Semantic HTML styling
9 themes
Loading states

Full njX UI

25+ components

Buttons, cards and forms
Sidebar and modals
Animations and utilities

Playground

Fork on CodePen

Copy ready cards
Try theme switcher
Remix without build tools

Pricing cards

<article>
  <h3>Classless</h3>
  <p>$0 / MIT</p>
  <ul>
    <li>Semantic HTML styling</li>
    <li>9 themes</li>
  </ul>
  <button data-variant="primary">Use CDN</button>
</article>

🔲 Buttons

Native <button> elements styled by _native.css with data-variant for semantic variants.

Variants

<button>Default</button>
<button data-variant="accent">Accent</button>
<button data-variant="success">Success</button>
<button data-variant="warning">Warning</button>
<button data-variant="error">Error</button>
<button data-variant="dark">Dark</button>
<button data-variant="light">Light</button>

Disabled & types

<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
<button disabled>disabled</button>

📄 Article

Semantic <article> structure with header, body content, and footer. The scoping element for _native.css styles.

Article with header / body / footer

Article Title

Published April 27, 2025 · 5 min read

This is the article body. It can contain paragraphs, images, lists, code, and any other semantic HTML elements — all styled automatically.

A second paragraph with strong emphasis and italic text to demonstrate the base typography rhythm.

Article with header / body / footer

<article>
    <header>
        <h2>Article Title</h2>
        <p>Published <time datetime="2025-04-27">April 27, 2025</time> · 5 min read</p>
    </header>
    <p>This is the article body. It can contain paragraphs, images, lists, code, and any other semantic HTML elements — all styled automatically.</p>
    <p>A second paragraph with <strong>strong emphasis</strong> and <em>italic text</em> to demonstrate the base typography rhythm.</p>
    <footer>
        <p>Written by <a href="#">Author Name</a> · <a href="#">Feedback</a></p>
    </footer>
</article>

🏗 Semantic Elements

aside, address, and ARIA live region roles — role="alert", role="status", role="note".

aside

Main content goes here. It can contain any text.

Tip: Use aside for supplementary content that is related but not essential to the main flow.

aside

<p>Main content here.</p>
<aside>
  <strong>Tip:</strong> Use aside for supplementary content.
</aside>

ARIA roles: alert / status / note

Alert: Your session will expire in 5 minutes.

Status: File upload complete (3 of 3).

Note: Changes are saved automatically.

ARIA roles: alert / status / note

<p role="alert">Alert: Session expiring soon.</p>
<p role="status">Status: Upload complete.</p>
<p role="note">Note: Auto-saved.</p>

address

Written by John Doe.
42 Main Street, San Francisco, CA 94105
john@example.com

address

<address>
  Written by <a href="#">John Doe</a>.<br>
  42 Main Street, San Francisco, CA<br>
  <a href="mailto:john@example.com">john@example.com</a>
</address>

🖼 DL & Figure

Definition lists (dl/dt/dd) and figure with figcaption styled by _native.css.

Definition list

HTML: HyperText Markup Language — the standard language for web pages.
CSS: Cascading Style Sheets — describes the presentation of HTML documents.
JavaScript: A scripting language for interactive web content.

Definition list

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
  <dt>JavaScript</dt>
  <dd>A scripting language.</dd>
</dl>

Figure with figcaption

Figure 1 — A scenic landscape from Picsum Photos.

Figure with figcaption

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Figure 1 — Caption text here.</figcaption>
</figure>

🔽 Details & Summary

Native <details> / <summary> accordion — no JavaScript, styled by _native.css.

Details accordion

What is classless CSS?

A single CSS file that styles native HTML elements with zero class names. Drop it in and write semantic HTML — everything looks great out of the box.

How do I use data-theme?

Add data-theme="dark" (or any of the 9 theme names) to your <html> element. Themes update all CSS custom properties automatically.

Is this production ready?

Yes. The library is minified to ~48 KB, has zero runtime dependencies, and supports all modern browsers. The classless mode is a standalone add-on to the main CSS.

Details accordion

<details>
  <summary>Question title</summary>
  <p>Answer content goes here.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>Always visible</summary>
  <p>This panel is open on load.</p>
</details>

▮ Progress & Meter

Native <progress>, <meter>, and <output> elements styled by _native.css.

Progress bar

Upload progress Almost done Indeterminate

Progress bar

<label>Upload progress
  <progress value="40" max="100"></progress>
</label>
<label>Almost done
  <progress value="75" max="100"></progress>
</label>
<label>Indeterminate
  <progress></progress>
</label>

Meter

Disk usage (60%) Battery (90%) Score (low — 1/10)

Meter

<label>Disk usage (60%)
  <meter value="0.6" min="0" max="1" low="0.25" high="0.75" optimum="0.5"></meter>
</label>
<label>Battery (90%)
  <meter value="9" min="0" max="10" low="3" high="7" optimum="10"></meter>
</label>

Output

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <label>A: <input type="range" id="a" value="50"></label>
  <label>B: <input type="number" id="b" value="30"></label>
  <label>Sum: <output name="result" for="a b">80</output></label>
</form>

💬 Dialog

Native <dialog> element styled by _native.css. Uses the Popover API for zero-JS open/close.

Dialog via Popover API

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <h3>Dialog Title</h3>
  <p>Dialog content goes here.</p>
  <footer>
    <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
    <button data-variant="success"
            popovertarget="my-dialog"
            popovertargetaction="hide">Confirm</button>
  </footer>
</dialog>

⏳ Loading

aria-busy="true" on any block element adds a frosted overlay + spinning indicator from _native.css. Use [role="status"] for an inline spinner. No extra markup needed.

aria-busy on article

Project analytics

Loading content…

aria-busy on article

<article aria-busy="true">
  <h3>Project analytics</h3>
  <p>Loading content…</p>
  <button>View report</button>
</article>

aria-busy on section

Account settings

Section loading…

aria-busy on section

<section aria-busy="true">
  <p>Section loading…</p>
</section>

Button loading state

<button aria-busy="true">Saving…</button>
<button aria-busy="true" data-variant="accent">Submitting…</button>

Inline spinner — data-loading

Fetching data…

Syncing changes

Inline spinner — data-loading

<p><span data-loading></span> Fetching data…</p>

Semantic HTML. Polished UI.

Heading 1 — The quick brown fox

Heading 2 — jumps over

Heading 3 — the lazy dog

Heading 4 — Pack my box

Heading 5 — with five dozen

Heading 6 — liquor jugs

Newsletter signup

Contact form

Login card

Validation states

Build docs and prototypes with zero component classes.

Need more than classless? Use the full component kit.

No classes required

Data variants

Theme aware

Classless

Full njX UI

Playground

Project analytics

Account settings