Getting started

Quick Start

Connect the library to your project in under a minute β€” no build tools required.

1
Add the stylesheet
One <link> tag in <head>. Nothing else required.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
2
Set a theme
Add data-theme to the <html> element. All components adapt automatically.
<html lang="en" data-theme="dark"> <!-- Themes: dark Β· light Β· red Β· blue Β· green Β· cyan Β· yellow Β· pink Β· purple -->
3
Use component classes
Add class names to HTML elements. Most components are pure CSS β€” no JavaScript needed.
index.html
<!DOCTYPE html> <html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css"> </head> <body> <button class="btn btn-primary">Hello njX</button> <div class="card-glow"> <h2 class="text-gradient-primary">Works.</h2> </div> </body> </html>
4
Add JavaScript (optional)
Interactive components β€” collapse, tabs, dropdown, modal, carousel, toast β€” need one script. Add it before </body>.
<!-- Adds: collapseToggle, tabSwitch, dropdownToggle, openModal, closeModal, showToast, initCarousels --> <script src="js/njx.js"></script> </body>
Components that use details/summary (native collapse, native dropdown) work without JS. See the JavaScript reference for all functions.
πŸ“¦
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

Components

25+ components included. Browse live demos and code at the components page.

πŸ”² Buttons
.btn
.btn-primary Β· .btn-outline
.btn-ghost Β· .btn-gradient
.btn-glow Β· .btn-shine
.btn-sm Β· .btn-lg
πŸƒ Cards
.card Β· .card-glass
.card-dark Β· .card-bordered
.card-glow Β· .box
πŸ“‹ Forms
.inp Β· .inp-primary
.inp-glass Β· .float-field
.toggle Β· .check
.inp-select
πŸ—‚ Tabs JS
.tab-wrap Β· .tab-nav
.tab-btn Β· .tab-panel
.tab-nav-pills
.tab-nav-boxed Β· .tab-nav-card
.tab-nav.is-full Β· .tab-badge
πŸͺ— Collapse JS / native
details.collapse (native)
.collapse + JS toggle
.collapse-plus Β· .collapse-ghost
.collapse-primary
.accordion Β· .accordion-flush
πŸ’¬ Modals JS
.lib-modal-overlay
.lib-modal-box
.is-success Β· .is-error
.is-warning Β· .is-info
.lib-modal-close
🧭 Navigation
.nav Β· .nav-brand Β· .nav-link
.nav-solid Β· .nav-glass
.nav-primary Β· .nav-dark
.nav-floating Β· .nav-underline
.nav-sm Β· .nav-lg
πŸ“‚ Dropdown JS / native
details.dropdown (native)
.dropdown + JS toggle
.dropdown-menu Β· .dropdown-item
.dropdown-right Β· .dropdown-top
.dropdown-primary Β· .dropdown-dark
🎠 Carousel CSS + JS dots
.carousel Β· .carousel-item
.carousel-center Β· .carousel-gap
.carousel-vertical
.carousel-btn Β· .carousel-dots
.carousel-item-sm/md/lg/xl
πŸ”— Links
.link Β· .link-underline
.link-slide Β· .link-arrow
.link-external Β· .link-muted
.link-btn Β· .link-card
.link-list
🏷 Tags & Badges
.tag Β· .badge
.tag-primary Β· .tag-success
.tag-accent Β· .tag-outline
πŸ“Š Table & Progress
.table
.progress Β· .progress-bar
πŸ”” Notifications JS
showToast(msg, type)
.lib-toast Β· .lib-toast-success
.lib-toast-error Β· .lib-toast-primary
🌈 Gradients
.gradient-primary
.text-gradient-primary
.gradient-blue-purple
✨ Hover FX
.hover-lift Β· .hover-glow
.hover-brighten Β· .hover-rotate
⚑
Components marked JS require njx.js for interactivity. Components marked native use <details>/<summary> and work without any JavaScript.
Reference

JavaScript β€” njx.js

One script file for all interactive components. Include it once β€” everything initializes automatically.

Connection

index.html
<!-- Add before </body> --> <script src="js/njx.js"></script> </body> </html>

Which components need JS

Component Without JS With njx.js
Collapse details.collapse β€” Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ collapseToggle() для div-based + Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½
Dropdown details.dropdown β€” Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ dropdownToggle() для div-based + close on outside click
Tabs β€” tabSwitch() β€” ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ
Modal β€” openModal() / closeModal() + Escape
Carousel Scroll-snap Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, якорныС ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ initCarousels() β€” синхронизация dots ΠΏΡ€ΠΈ свайпС
Toast β€” showToast() β€” динамичСскиС увСдомлСния
Buttons, Cards, Forms, Nav, Links, Tags, Table, Progress, Gradients, Animations βœ“ Чистый CSS β€” JS Π½Π΅ Π½ΡƒΠΆΠ΅Π½

Function reference

collapseToggle(header) collapse

Toggles .is-open on the closest .collapse element.

<div class="collapse"> <div class="collapse-header" onclick="collapseToggle(this)"> Title <span class="collapse-icon"></span> </div> <div class="collapse-body">Content</div> </div>
accordionToggle(header) accordion

Like collapseToggle but closes all sibling .collapse items in the same .accordion wrapper first.

<div class="accordion"> <div class="collapse"> <div class="collapse-header" onclick="accordionToggle(this)">Section 1</div> <div class="collapse-body">...</div> </div> <div class="collapse"> <div class="collapse-header" onclick="accordionToggle(this)">Section 2</div> <div class="collapse-body">...</div> </div> </div>
dropdownToggle(el) dropdown

Toggles .is-open on a .dropdown element. All other open dropdowns are closed first. Outside-click listener is added automatically.

<div class="dropdown"> <button class="btn" onclick="dropdownToggle(this.parentElement)">Menu</button> <div class="dropdown-menu"> <a class="dropdown-item">Item</a> </div> </div>
tabSwitch(btn) tabs

Activates the clicked .tab-btn and shows the corresponding .tab-panel by index inside .tab-wrap.

<div class="tab-wrap"> <div class="tab-nav tab-nav-pills"> <button class="tab-btn is-active" onclick="tabSwitch(this)">Tab 1</button> <button class="tab-btn" onclick="tabSwitch(this)">Tab 2</button> </div> <div class="tab-content"> <div class="tab-panel is-active">Content 1</div> <div class="tab-panel">Content 2</div> </div> </div>
openModal(id) / closeModal(el) modal

Opens a modal by its ID / closes by element reference. Escape key auto-closes all open modals. Click on overlay background also closes.

<!-- Trigger --> <button onclick="openModal('my-modal')">Open</button> <!-- Modal --> <div id="my-modal" class="lib-modal-overlay" onclick="if(event.target===this)closeModal(this)"> <div class="lib-modal-box"> <button class="lib-modal-close" onclick="closeModal(document.getElementById('my-modal'))">βœ•</button> <!-- .is-success .is-error .is-warning .is-info --> </div> </div>
showToast(msg, type, duration) toast

Shows a toast notification. Types: success Β· error Β· primary Β· dark. Duration in ms (default 2200). Requires <div id="lib-toast-container"></div> in the page.

<!-- Required container (place anywhere in body) --> <div id="lib-toast-container"></div> // Usage showToast('Saved!', 'success'); showToast('Something went wrong', 'error', 3000); showToast('Info message', 'primary');
initCarousels() / carouselGo(el, idx) carousel

initCarousels() is called automatically on DOMContentLoaded β€” it attaches a scroll listener to every .carousel-wrap and syncs .carousel-dot.is-active. carouselGo(el, idx) programmatically scrolls to a slide by 0-based index.

// Scroll to slide index 2 programmatically const car = document.querySelector('.carousel'); carouselGo(car, 2); // Re-init after dynamic content (e.g. AJAX) initCarousels();
πŸ’‘
Native alternative for collapse & dropdown: Use <details class="collapse"> and <details class="dropdown"> β€” the browser handles open/close natively, zero JS needed.
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
--text-main Primary text
--text-muted Secondary / muted text
--bg-main Page background
--bg-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

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(--bg-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(--text-main); }
Reference

Utility Classes

Tailwind-compatible utility classes for fast layout. All in _utils.css.

πŸ“¦ Display
.flex.flex-col.grid.inline-flex.block.hidden.inline-block
πŸ“ Flex helpers
.flex-center.flex-between.flex-col-center.flex-1.items-center.justify-between
πŸ“ Spacing
.m-4.mt-6.mb-4.mx-auto.p-4.px-6.py-8.gap-4
πŸ”€ Typography
.text-primary.text-accent.text-muted.text-center.text-sm.text-xl.uppercase.font-bold
πŸ”² Sizing
.w-full.w-auto.h-full.min-h-screen.max-w-lg.container
πŸ’« Effects
.transition.opacity-50.shadow-md.blur-sm.grayscale.rotate-45
Usage example
<div class="flex items-center gap-4 p-6"> <button class="btn btn-primary">Action</button> <p class="text-sm text-muted">Helper text</p> </div> <div class="flex-center gap-6 mt-8 mb-4"> <span class="tag tag-primary uppercase text-xs">New</span> <h2 class="text-2xl font-bold text-primary">Title</h2> </div>
Reference

Animations

Built-in CSS animations from _animations.css. Just add a class β€” no JavaScript.

Fade
.fade-in
.fade-out
Scale
.scale-in
.scale-up
Slide
.slide-in
.slide-down
Bounce
.bounce
.bounce-in
Pulse
.animate-pulse
.pulse-slow
Float
.animate-float
Glow
.animate-glow
.glow-hover
Spin
.spin
.spin-slow
Shake
.shake
.shake-error
Neon
.animate-neon
.animate-neon-blue
Rainbow
.animate-rainbow
.animate-breathe
Delay / Speed
.anim-delay-1
.anim-fast Β· .anim-slow
<div class="fade-in">Fades in on load</div> <button class="btn btn-primary animate-pulse">Pulsing CTA</button> <div class="animate-float">Floating element</div> <span class="animate-neon text-accent">Neon glow text</span> <div class="scale-in anim-delay-1">Delayed scale-in</div>
Project

File Structure

All CSS is modular β€” import everything via style.css or pick individual files.

njx-ui/ β”œβ”€β”€ style.css ← entry point (@import all modules) β”œβ”€β”€ css/ β”‚ β”œβ”€β”€ _base.css ← design tokens (CSS variables) β”‚ β”œβ”€β”€ _reset.css ← CSS reset β”‚ β”œβ”€β”€ _global.css ← 9 theme definitions β”‚ β”œβ”€β”€ _grid.css ← .row/.col-* and .grid-col-* β”‚ β”œβ”€β”€ _typography.css ← headings, text helpers β”‚ β”œβ”€β”€ _utils.css ← Tailwind-style utility classes β”‚ β”œβ”€β”€ _buttons.css ← .btn, .btn-primary, gradients, glow β”‚ β”œβ”€β”€ _cards.css ← .card, .card-glass, .card-glow, .box β”‚ β”œβ”€β”€ _form.css ← .inp, .toggle, .check, .float-field β”‚ β”œβ”€β”€ _tags.css ← .tag, .badge, outline variants β”‚ β”œβ”€β”€ _nav.css ← .nav, solid/glass/dark/floating/underline β”‚ β”œβ”€β”€ _tab.css ← .tab-wrap, pills/boxed/card variants β”‚ β”œβ”€β”€ _collapse.css ← .collapse, accordion, accordion-flush β”‚ β”œβ”€β”€ _dropdown.css ← .dropdown, positions, JS+native API β”‚ β”œβ”€β”€ _slider.css ← .carousel, scroll-snap, dots, gap β”‚ β”œβ”€β”€ _popups.css ← .lib-modal-*, success/error/warning/info β”‚ β”œβ”€β”€ _links.css ← .link, slide/arrow/btn/card/list variants β”‚ β”œβ”€β”€ _notifications.css ← .lib-toast, alerts β”‚ β”œβ”€β”€ _table.css ← .table and variants β”‚ β”œβ”€β”€ _breadcrumb.css ← .breadcrumb β”‚ β”œβ”€β”€ _sections.css ← .section, .panel, layout sections β”‚ β”œβ”€β”€ _animations.css ← fade, pulse, float, neon, etc. β”‚ β”œβ”€β”€ _gradients.css ← bg-gradient-*, text-gradient-* β”‚ └── _hovers.css ← hover-lift, hover-glow, etc. └── js/ └── njx.js ← component JS (collapse, tabs, modal, carousel…)
πŸ’‘
Granular imports: Each file is independent. If you only need buttons and cards, import just _base.css + _themes.css + _buttons.css + _cards.css and save several KB.
Project

Examples

Common patterns β€” copy and adapt.

Card with actions
<div class="card card-glass p-6"> <h3 class="text-gradient-primary">Card Title</h3> <p class="text-muted mt-2">Description text...</p> <div class="flex gap-4 mt-6"> <button class="btn btn-primary btn-sm">Action</button> <button class="btn btn-outline btn-sm">Cancel</button> </div> </div>
Form with validation states
<div class="field"> <label class="field-label">Email</label> <input class="inp inp-error" type="email" placeholder="test@example.com"> <span class="field-error-msg">Invalid email address</span> </div> <div class="field"> <label class="field-label">Password</label> <input class="inp inp-success" type="password"> <span class="field-success-msg">Password accepted</span> </div>
Modal dialog
<div class="lib-modal-overlay" id="modal"> <div class="lib-modal-box is-success"> <span class="lib-modal-icon">βœ“</span> <div class="lib-modal-title">Success!</div> <div class="lib-modal-text">Operation completed</div> <div class="lib-modal-actions"> <button class="btn btn-success" onclick="document.getElementById('modal').remove()">OK</button> </div> </div> </div>