# njX UI
**njX UI** (npm: [`njx-ui`](https://www.npmjs.com/package/njx-ui)) is a zero-dependency CSS component library for landing pages, docs and prototypes: **9 themes, 30+ components, Tailwind-style utilities** — 308 KB minified, **44 KB gzip over the wire**, no build step. Plays great with [Astro](#use-with-astro-) and [Alpine.js](#alpinejs--the-ui-kit-alpine-was-missing-).
One link — everything works:
```html
```
Docs & live demo: **[njxui.dev](https://njxui.dev)**
[](https://www.npmjs.com/package/njx-ui)
[](LICENSE)
[](css/style.css)
[](js/njx.js)
[](#1-9-themes--one-attribute)
[](#components)
[How to use from GitHub](GITHUB.md) · [Contributing](CONTRIBUTING.md) · [Documentation](css/CSS-DOCS.en.md)
---
## Quick Start
Choose the method that fits your project:
---
### Option 1 — CDN (jsDelivr via npm)
No install. Just add to your HTML:
```html
Card
```
> jsDelivr may cache for 5–10 minutes after a new publish. If it doesn't load yet — wait a moment.
---
### Option 2 — CDN (jsDelivr via GitHub)
Works immediately after `git push`, without publishing to npm:
```html
```
---
### Option 3 — unpkg
```html
```
---
### Option 4 — npm install
```bash
npm install njx-ui
```
Then in your HTML:
```html
```
Or in a bundler / Astro / Vite project:
```js
import 'njx-ui/css/style.min.css';
```
Verify installed files:
```bash
ls node_modules/njx-ui/css/
# → style.css style.min.css _base.css _buttons.css ...
```
---
### Option 5 — Download
Download `css/style.min.css` and `js/njx.js` from the [releases](https://github.com/njbSaab/njx-css-ui/releases) and link locally:
```html
```
---
### Verify CDN in browser
Open this URL to see all files available in the package:
```
https://cdn.jsdelivr.net/npm/njx-ui/
```
---
## Use with Astro 🚀
njX UI is zero-JS by default — a natural fit for Astro. The whole setup is one install and one import (no integration to register). The njX UI docs site itself is built with Astro.
```bash
npm install njx-ui # pnpm add / yarn add / bun add
```
```astro
---
// src/layouts/Layout.astro
import 'njx-ui/css/style.min.css';
---
```
Component classes now work in every `.astro` file, Markdown page and framework island:
```astro
Works.
```
**Theme without flash (FOUC):** restore the saved theme before first paint with an inline script in ``:
```html
```
**Using `` (view transitions)?** njx.js initializes on `DOMContentLoaded`, so re-init carousels after navigation — or use Alpine.js, whose state lives in the markup and survives swaps:
```html
```
---
## Alpine.js — the UI kit Alpine was missing 🏔
Every interactive njX component works by toggling a single state class (`.is-open`, `.is-active`, `.open`). njx.js is one way to toggle it — **Alpine.js is another**: keep the same markup and drive the class from `x-data`. No njX JavaScript required.
```html
```
```html
```
Ready-made recipes for tabs, modal (Escape + backdrop close), toast stack and a dark/light theme toggle: **[njxui.dev/documentation#alpine](https://njxui.dev/documentation#alpine)** — plus live demos with an Alpine.js tab in the code windows on the components page.
---
## Classless — now a separate project
The classless stylesheet (`classless.min.css`, ~7 KB gzip — styles plain semantic HTML with zero class names) has grown into its own product: **[classless.njxui.dev](https://classless.njxui.dev)**. The file still ships in this package for compatibility:
```html
```
Reference → [classless.md](classless.md)
---
## Why njX?
### 1. 9 themes — one attribute
No extra CSS. No JS setup. Just set `data-theme` on `` and every component updates instantly.
```html
```
Switch at runtime:
```js
document.documentElement.setAttribute('data-theme', 'purple')
```
---
### 2. Tailwind-style utility classes — no Tailwind required
Spacing, flexbox, typography, display, positioning — all available as single-purpose classes. No build step, no config, no `node_modules`.
```html
...
...
...
...
Gradient heading
...
Hidden
...
```
**Responsive prefixes** — `sm:`, `md:`, `lg:`, `xl:` work out of the box:
```html
```html
...
```
### Gradients & Text Effects
```html
Blue gradient bg
Sunset gradient bg
Fire gradient bg
Gradient heading
Accent gradient
```
---
## Design Tokens
One file (`_base.css`) — one source of truth. Override anything:
```css
:root {
--color-primary: #ff6b35; /* everything turns orange */
--font-sans: "Inter", sans-serif;
--radius-md: 8px;
}
```
Color shades, spacing scale, fluid typography, shadows, z-index — all in variables. See [CSS-DOCS.en.md](css/CSS-DOCS.en.md).
---
## Bulma Compatibility
Migrating from Bulma? Core class names work out of the box:
```html
Title
Content
```
---
## Build
Bundle all files into a single minified CSS:
```bash
npx lightningcss --bundle --minify css/style.css -o css/style.min.css
```
---
## License
[MIT](LICENSE) — free for personal and commercial use.
---
## Documentation & Guides
| File | Description |
|---|---|
| [GITHUB.md](GITHUB.md) | How to use from GitHub — CDN, download, clone, fork |
| [CONTRIBUTING.md](CONTRIBUTING.md) | How to add components, utilities, and submit PRs |
| [css/CSS-DOCS.en.md](css/CSS-DOCS.en.md) | Full CSS reference — all classes and variables |
| [classless.md](classless.md) | Classless mode — all elements, variants, and tokens |
---
**njX UI** · npm [`njx-ui`](https://www.npmjs.com/package/njx-ui) · [njxui.dev](https://njxui.dev) · Made by [njbSaab](https://github.com/njbSaab)