🎨 Design Tokens

All variables from _base.css. Change here — updates everywhere.

Theme system

9 built-in themes · one attribute

The entire UI reacts
to a single attribute.

Set data-theme on <html> and every component, shadow, and gradient updates instantly. No JS required.

<html data-theme="dark">

Select theme

njX UI — Dashboard

2,481

Users

+12%

$18.4k

Revenue

+8%

340

Orders

-3%

Components 30+

Themes 9

Zero deps

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

/* 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);

Theme switcher variants

Copy-paste dark / light toggle components. Click any to try live.

Toggle

Segmented

Icon

Settings row

Dark mode Light mode

/* 1. JS helpers */
function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}
function toggleDarkLight() {
  const t = document.documentElement.dataset.theme;
  applyTheme(t === 'light' ? 'dark' : 'light');
}
const saved = localStorage.getItem('theme');
if (saved) applyTheme(saved);

/* 2. HTML — toggle variant */
<button onclick="toggleDarkLight()">...</button>

/* 3. HTML — segmented variant */
<div>
  <button onclick="applyTheme('dark')">Dark</button>
  <button onclick="applyTheme('light')">Light</button>
</div>

/* 4. CSS active states — no extra JS needed */
html:not([data-theme="light"]) .dark-btn { background: var(--color-primary); }
html[data-theme="light"] .light-btn { background: var(--color-primary); }

Main colors

--color-primary

--color-accent

--color-success

--color-error

--color-warning

--сolor-dark

--color-light

/* _base.css — main colors */
<div style="color: var(--color-primary)">Primary</div>
<div style="color: var(--color-accent)">Accent</div>
<div style="color: var(--color-success)">Success</div>
<div style="color: var(--color-error)">Error</div>
<div style="color: var(--color-warning)">Warning</div>
/* Page background and text */
<body style="background: var(--сolor-dark); color: var(--color-light)">

Primary shades (100→900)

100

200

300

400

500 ←base

600

700

800

900

/* _base.css — primary shades */
background: var(--color-primary-100); /* lightest */
color: var(--color-primary-500); /* base */
background: var(--color-primary-900); /* darkest */
/* Hover darker than base */
.btn-primary:hover {
background: var(--color-primary-600);
}
/* Light accent background */
background: var(--color-primary-100);
border: 1px solid var(--color-primary-300);

Neutrals (50→900)

50

100

200

300

400

500

600

700

800

900

/* _base.css — neutrals */
background: var(--color-neutral-50); /* near white */
color: var(--color-neutral-500); /* grey */
background: var(--color-neutral-900); /* near black */
/* Practical examples */
border: 1px solid var(--color-neutral-300);
color: var(--color-neutral-600); /* muted */
background: var(--color-neutral-100); /* zebra */

Accent shades (100→900)

100

200

300

400

500 ←base

600

700

800

900

color: var(--color-accent-500); /* base accent */
background: var(--color-accent-100); /* light tint */
border: 1px solid var(--color-accent-300);

Success shades (100→800)

100

200

300

400 ←base

500

600

700

800

color: var(--color-success-400);
background: var(--color-success-100);

Error shades (100→800)

100

200

300

400

500 ←base

600

700

800

color: var(--color-error-500);
background: var(--color-error-100);
border: 1px solid var(--color-error-300);

Border radius

--radius-none 0px

--radius-sm 6px

--radius-md 12px

--radius-lg 20px

--radius-xl 30px

--radius-2xl 40px

--radius-full 9999px

border-radius: var(--radius-sm); /* 6px — input, badge */
border-radius: var(--radius-md); /* 12px — card */
border-radius: var(--radius-lg); /* 20px — modal */
border-radius: var(--radius-full); /* pill / avatar */

Shadows

--shadow-sm Subtle lift

--shadow-md Card hover

--shadow-lg Modal · Dropdown

--shadow-primary Primary glow

--shadow-accent Accent glow

--shadow-glow White halo

box-shadow: var(--shadow-sm); /* subtle lift */
box-shadow: var(--shadow-md); /* card hover */
box-shadow: var(--shadow-lg); /* modal */
box-shadow: var(--shadow-primary); /* primary glow */
box-shadow: var(--shadow-glow); /* white glow */

Transitions

--ease-fast 0.15s ease-in-out Micro-feedback · Buttons

--ease 0.30s ease-in-out Standard hover · Reveal

--ease-slow 0.50s ease-in-out Entrance · Page transitions

transition: all var(--ease-fast); /* 0.15s — micro */
transition: all var(--ease); /* 0.30s — hover */
transition: all var(--ease-slow); /* 0.50s — entrance */

Z-index scale

--z-0 · 0

--z-1 · 1

--z-10 · 10

--z-50 · 50

--z-100 · 100

--z-00Base stacking context

--z-11Sticky headers

--z-1010Dropdowns · Menus

--z-5050Tooltips · Popovers

--z-100100Topbar · Navigation

z-index: var(--z-1); /* sticky headers */
z-index: var(--z-10); /* dropdowns */
z-index: var(--z-50); /* tooltips */
z-index: var(--z-100); /* topbar */
z-index: var(--z-modal); /* modals */

Responsive tokens — automatic scaling

Breakpoint--fs-base--space-4--radius-lg--grid-gutter

≥ 1200px desktop16px16px20px2rem

≤ 1200px laptop15px14px20px1.5rem

≤ 768px tablet14px12px16px1rem

≤ 480px mobile13px10px12px0.75rem

≤ 390px iPhone12px9px10px0.625rem

≤ 360px Android11px8px9px0.5rem

≤ 320px small10px7px8px0.375rem

/* No code needed — tokens scale automatically.
Components using var(--fs-*), var(--space-*)
respond to viewport changes automatically. */

/* Override for a specific component: */
@media (max-width: 768px) {
.hero-title { font-size: var(--fs-f-4xl); }
}

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

/* _base.css — spacing scale (4px step) */
gap: var(--space-2); /* 8px */
padding: var(--space-4); /* 16px */
margin: var(--space-6); /* 24px */
gap: var(--space-8); /* 32px */
padding: var(--space-12); /* 48px */
margin-bottom: var(--space-16); /* 64px */
/* Combining sides */
padding: var(--space-6) var(--space-4); /* 24px 16px */

📏 Grid System

Two systems: classic 12-column (Flex) and modern CSS Grid. File _grid.css. Gap utilities (.gap-2, .gap-4…) are in _utils.css.

12-Column Flex Grid — .row + .col-*

col-12

col-6

col-4

col-8 · Main

col-4 · Sidebar

col-3

/* 12-column flex grid — col-1 to col-12 */
<div class="row">
  <div class="col-6">50%</div>
  <div class="col-6">50%</div>
</div>
<div class="row">
  <div class="col-8">Main</div>
  <div class="col-4">Sidebar</div>
</div>

CSS Grid — Fixed Columns .grid-col-1 … .grid-col-6

2 columns — .grid-col-2

1

2

3 columns — .grid-col-3

1

2

3

4 columns — .grid-col-4

1

2

3

4

5 columns — .grid-col-5

1

2

3

4

5

6 columns — .grid-col-6

1

2

3

4

5

6

/* Fixed columns: grid-col-1 to grid-col-6 */
<div class="grid-col-2 gap-4">…</div>
<div class="grid-col-3 gap-4">…</div>
<div class="grid-col-4 gap-4">…</div>
<div class="grid-col-6 gap-4">…</div>

/* Collapses on mobile (1 col), on tablet 4/5/6 → 2 cols */

CSS Grid — Auto-fit Adaptive .grid-auto-*

.grid-auto-xs — minmax(100px, 1fr)

A

B

C

D

E

F

G

H

.grid-auto-sm — minmax(160px, 1fr)

Card 1

Card 2

Card 3

Card 4

Card 5

.grid-auto-md — minmax(220px, 1fr)

Card A

Card B

Card C

Card D

.grid-auto-lg — minmax(300px, 1fr)

Wide Card 1

Wide Card 2

Wide Card 3

/* Auto-fit: fills as many cols as fit, wraps automatically */
<div class="grid-auto-xs gap-2">…</div>  /* 100px min */
<div class="grid-auto-sm gap-3">…</div>  /* 160px min */
<div class="grid-auto-md gap-4">…</div>  /* 220px min */
<div class="grid-auto-lg gap-4">…</div>  /* 300px min */
<div class="grid-auto-xl gap-6">…</div>  /* 400px min */

CSS Grid — Layout Presets

.grid-sidebar-l — 260px | 1fr

.grid-sidebar-r — 1fr | 260px

.grid-thirds — 1fr | 2fr | 1fr

Left

Main

Right

/* Layout presets — stack to 1 col on mobile */
<div class="grid-sidebar-l gap-4">
  <aside>Sidebar (260px)</aside>
  <main>Content</main>
</div>

<div class="grid-thirds gap-4">
  <div>Left (1fr)</div>
  <div>Main (2fr)</div>
  <div>Right (1fr)</div>
</div>

🔤 Typography

Classes from _typography.css. Add .fluid for vw-size.

Headings

.title-heroHero Title96px / fluid: clamp(60,10vw,120)

.title-xlTitle XL72px

.title-lgTitle LG60px

.title-mdTitle MD48px

.title-smTitle SM36px

.title-xsTitle XS30px

<h1 class="title-hero">Hero Title</h1>
<h2 class="title-xl">Title XL</h2>
<h3 class="title-lg">Title LG</h3>
<h4 class="title-md">Title MD</h4>
<h5 class="title-sm">Title SM</h5>
<h6 class="title-xs">Title XS</h6>

/* .fluid — responsive clamp() size */
<h1 class="title-hero fluid">Fluid Hero</h1>
<h2 class="title-xl fluid text-accent">Fluid Accent</h2>

Text

.text-leadLead text — fs-xl / 20px20px, w:500

.text-bodyBody text — fs-base / 16px16px, w:400

.text-smSmall text — fs-sm / 14px14px

.text-xsExtra small — fs-xs / 12px12px

.text-captionCaption uppercase12px, upper

.text-labelLabel text14px, w:600

<p class="text-lead">Lead — intro paragraph</p>
<p class="text-body">Body — default reading size</p>
<p class="text-sm">Small text</p>
<p class="text-xs">Extra small</p>
<span class="text-caption">CAPTION LABEL</span>
<span class="text-label">UI Label</span>

/* Mix text size + color */
<p class="text-lead text-muted">Muted lead</p>
<p class="text-sm text-primary">Small primary</p>

Colors and modifiers

.text-primary .text-accent .text-success .text-error .text-warning .text-muted .text-white

<span class="text-primary">Primary</span>
<span class="text-accent">Accent</span>
<span class="text-success">Success</span>
<span class="text-error">Error</span>
<span class="text-warning">Warning</span>
<span class="text-muted">Muted</span>
<span class="text-white">White</span>

/* Combine with any heading or text class */
<h2 class="title-lg text-primary">Colored heading</h2>
<p class="text-sm text-muted">Small muted</p>
<span class="text-caption text-accent">ACCENT LABEL</span>

Tips / Callouts

Use .tip with a variant modifier. Icon slot via .tip-icon, title via .tip-title.

Info

Use .tip--info for general information and neutral notes.

Success

Use .tip--success to confirm an action or show a completed state.

Warning

Use .tip--warning to flag something that requires attention before proceeding.

Danger

Use .tip--danger for destructive or critical error messages.

Note

Use .tip--neutral for side notes or supplementary context.

/* Base + variant modifier */
<div class="tip tip--info">
  <svg class="tip-icon">...</svg>
  <div>
    <div class="tip-title">Info</div>
    <div class="tip-body">Message text.</div>
  </div>
</div>

/* Without icon */
<div class="tip tip--warning">
  <div class="tip-title">Warning</div>
  <div class="tip-body">Cannot be undone.</div>
</div>

/* All variants */
.tip--info    /* primary color */
.tip--success /* green */
.tip--warning /* yellow */
.tip--danger /* red */
.tip--neutral /* muted */

Font Families — --font-*

Sans-serif / Display — 12 families

Inter

Aa Bb 123 &!@

--font-inter

Poppins

Aa Bb 123 &!@

--font-poppins

Montserrat

Aa Bb 123 &!@

--font-montserrat

Outfit

Aa Bb 123 &!@

--font-outfit

Jakarta

Aa Bb 123 &!@

--font-jakarta

DM Sans

Aa Bb 123 &!@

--font-dm-sans

Nunito

Aa Bb 123 &!@

--font-nunito

Space Grotesk

Aa Bb 123 &!@

--font-space

Manrope

Aa Bb 123 &!@

--font-manrope

Figtree

Aa Bb 123 &!@

--font-figtree

Sora

Aa Bb 123 &!@

--font-sora

Roboto

Aa Bb 123 &!@

--font-roboto

Monospace — 3 families

Roboto Mono

const x = 42; // 0Oo

--font-roboto-mono

JetBrains Mono

const x = 42; // 0Oo

--font-jetbrains

Fira Code

const x = 42; // 0Oo

--font-fira-code

--font-sans→var(--font-inter)body text

--font-heading→var(--font-poppins)headings

--font-mono→var(--font-roboto-mono)code

/* Active roles — change to restyle entire project */
--font-sans: var(--font-inter);
--font-heading: var(--font-poppins);
--font-mono: var(--font-roboto-mono);

/* Usage */
font-family: var(--font-sans);
font-family: var(--font-heading);
font-family: var(--font-mono);

Font sizes — fixed

--fs-xs12pxCaption · Label · Helper

--fs-sm14pxSmall text · Button · Badge

--fs-base16pxBody paragraph — default size

--fs-lg18pxLarge body · Lead text

--fs-xl20pxSubheading

--fs-2xl24pxSection title

--fs-3xl30pxH3 heading

--fs-4xl36pxH2

--fs-5xl48pxH1

--fs-6xl60pxDisplay

--fs-hero96pxHero

font-size: var(--fs-sm); /* 14px */
font-size: var(--fs-base); /* 16px */
font-size: var(--fs-2xl); /* 24px */
font-size: var(--fs-5xl); /* 48px */
font-size: var(--fs-hero); /* 96px */

Font sizes — fluid clamp(min · vw · max)

--fs-f-xs10 → 12pxCaption · Label

--fs-f-sm12 → 14pxSmall helper text

--fs-f-base14 → 16pxBody — fluid default

--fs-f-lg16 → 20pxLarge body

--fs-f-xl18 → 24pxSubheading

--fs-f-2xl20 → 30pxSection title

--fs-f-3xl24 → 36pxH3

--fs-f-4xl28 → 48pxH2

--fs-f-hero60 → 120pxHero

font-size: var(--fs-f-base); /* clamp(14px,1.4vw,16px) */
font-size: var(--fs-f-xl); /* clamp(18px,2vw,24px) */
font-size: var(--fs-f-hero); /* clamp(60px,10vw,120px) */

Line height

--lh-tight0.9

Display headline tight leading impact

Hero · Display

--lh-snug1.2

Compact heading or UI label text stays close together

Headings · Cards

--lh-normal1.5

Standard body copy reads comfortably at this line height

Body · Default

--lh-relaxed1.8

Long-form articles and documentation with open spacing

Articles · Docs

line-height: var(--lh-tight); /* 0.9 — hero */
line-height: var(--lh-snug); /* 1.2 — headings */
line-height: var(--lh-normal); /* 1.5 — body */
line-height: var(--lh-relaxed); /* 1.8 — articles */

⚡ Utils

_utils.css

Tailwind-style utilities — all via CSS variables. Unified file _utils.css (former _util.css removed). Click a class — it copies to clipboard.

💀 Skeleton

Loading placeholders from _skeleton.css. Base: .skeleton + size/shape modifiers. Three animations: shimmer, pulse, wave.

Text lines

Avatar + text (user row)

Card skeleton

List rows

Table rows

Button skeletons

Button soft variants

<span class="skeleton skeleton-xl skeleton-pill" style="width:110px"></span>
<span class="skeleton skeleton-xl skeleton-pill skeleton-soft" style="width:110px"></span>
<span class="skeleton skeleton-xl skeleton-rounded skeleton-soft" style="width:100px"></span>
<span class="skeleton skeleton-circle skeleton-soft" style="width:40px;height:40px"></span>

Wave animation

/* Add .skeleton-wave wrapper to switch animation */
<div class="skeleton-wave skeleton-group">
  <span class="skeleton skeleton-lg skeleton-full"></span>
  <span class="skeleton skeleton-md skeleton-3/4"></span>
  <span class="skeleton skeleton-md skeleton-full"></span>
  <span class="skeleton skeleton-md skeleton-1/2"></span>
</div>

Form

Stats / Dashboard

Gallery grid

Detail / Product

✨ Animations

Classes from _animations.css. Three categories: Loop (always-on), Hover-triggered (CSS :hover), Scroll-triggered (IntersectionObserver via njx.js). Combine with .anim-fast, .anim-slow, .anim-delay-* modifiers.

Loop — always-on No JS needed. These run continuously as long as the class is applied.

Fade animations — hover to replay

.animate-fade-in

.animate-fade-out

.animate-fade-in-up

.animate-fade-in-down

.animate-fade-in-left

.animate-fade-in-right

.animate-fade-in-out

<div class="animate-fade-in">Fade in</div>
<div class="animate-fade-in-up">From below</div>
<div class="animate-fade-in-down">From above</div>
<div class="animate-fade-in-left">From left</div>
<div class="animate-fade-in-right">From right</div>

<div class="animate-fade-in-up anim-delay-3 anim-slow">...</div>

Float & Bounce — hover to replay

.animate-float

.animate-float-big

.animate-bounce

.animate-bounce-in

.animate-scale-in

.animate-flip

.animate-float-x

<div class="animate-float">Gentle levitation</div>
<div class="animate-float-big">Wide arc float</div>
<div class="animate-bounce">Bouncing loop</div>

<div class="animate-bounce-in">Bounce in</div>
<div class="animate-scale-in">Scale from 0</div>

Hover-triggered Plays once on :hover. No JS needed.

Spin & Rotate — hover to replay

.animate-spin

.animate-spin-slow

.animate-rotate

.animate-spin-y

.animate-spin-x

.animate-spin-ccw

.animate-spin-bounce

.animate-spin-wobble

.animate-spin-fade

.animate-spin-180

.animate-spin-swing

.animate-spin-rock

.animate-spin-tilt

.animate-spin-yoyo

<div class="animate-spin-y">3D flip Y</div>
<div class="animate-spin-x">3D flip X</div>
<div class="animate-spin-ccw">Counter-clockwise</div>
<div class="animate-spin-bounce">Spin + bounce</div>
<div class="animate-spin-wobble">Wobble</div>
<div class="animate-spin-180">Half turn</div>
<div class="animate-spin-swing">Pendulum</div>
<div class="animate-spin-rock">Rock</div>
<div class="animate-spin-tilt">Tilt 45°</div>
<div class="animate-spin-yoyo">Yoyo</div>

<svg class="animate-spin">...</svg>
<div class="animate-spin-slow"></div>
<div class="animate-spin-fade"></div>

Shake, Wiggle & Attention — click to trigger

.animate-shake

.animate-wiggle

.animate-tada

.animate-rubber

.animate-heartbeat

.animate-shake-y

.animate-buzz

<div class="animate-shake">Horizontal shake</div>
<div class="animate-shake-y">Vertical shake</div>
<div class="animate-buzz">Buzz / jitter</div>
<div class="animate-tada">Celebration!</div>
<div class="animate-rubber">Stretch</div>

el.classList.remove("animate-shake");
void el.offsetWidth;
el.classList.add("animate-shake");

Pulse & Scale — hover to replay

.animate-pulse

.animate-scale

.animate-scale-big

.animate-border-pulse

.animate-shimmer

.animate-scale-out

.animate-ping

<div class="animate-pulse"></div>
<div class="animate-scale-big"></div>

<div class="animate-border-pulse"></div>

<div class="animate-shimmer" style="height:16px;border-radius:4px"></div>

Text effects — Neon glow

.animate-neon-primary

.animate-neon-accent

.animate-neon-success

.animate-neon-error

.animate-neon-warning

<h2 class="animate-neon-primary" style="color:var(--color-primary)">Primary</h2>
<h2 class="animate-neon-accent" style="color:var(--color-accent)">Accent</h2>
<h2 class="animate-neon-success" style="color:var(--color-success)">Success</h2>
<h2 class="animate-neon-error" style="color:var(--color-error)">Error</h2>
<h2 class="animate-neon-warning" style="color:var(--color-warning)">Warning</h2>

Text effects — Rainbow glow

.animate-rainbow

.animate-rainbow-primary

.animate-rainbow-accent

.animate-rainbow-success

.animate-rainbow-error

.animate-rainbow-warning

<h2 class="animate-rainbow">Rainbow</h2>
<h2 class="animate-rainbow-primary">Primary</h2>
<h2 class="animate-rainbow-accent">Accent</h2>
<h2 class="animate-rainbow-success">Success</h2>
<h2 class="animate-rainbow-error">Error</h2>
<h2 class="animate-rainbow-warning">Warning</h2>

Text effects — Breathe glow

.animate-breathe

.animate-breathe-primary

.animate-breathe-accent

.animate-breathe-success

.animate-breathe-error

.animate-breathe-warning

<h2 class="animate-breathe">Breathe</h2>
<h2 class="animate-breathe-primary" style="color:var(--color-primary)">Primary</h2>
<h2 class="animate-breathe-accent" style="color:var(--color-accent)">Accent</h2>
<h2 class="animate-breathe-success" style="color:var(--color-success)">Success</h2>
<h2 class="animate-breathe-error" style="color:var(--color-error)">Error</h2>
<h2 class="animate-breathe-warning" style="color:var(--color-warning)">Warning</h2>

Glow & Shadow effects

.animate-glow
primary theme color

.animate-glow-accent
accent color

.animate-border-pulse
expanding ring

.shadow-neon
static white glow

.shadow-neon-primary
static primary glow

<div class="animate-glow">Primary glow</div>
<div class="animate-glow-accent">Accent glow</div>

<div class="animate-border-pulse"></div>

<div class="shadow-neon">White neon</div>
<div class="shadow-neon-primary">Theme glow</div>

Border pulse & Rainbow sweep

.animate-border-pulse

.animate-border-pulse-primary

.animate-border-pulse-accent

.animate-border-pulse-success

.animate-border-pulse-error

.animate-border-pulse-warning

<div class="animate-border-pulse"></div>
<div class="animate-border-pulse-primary"></div>
<div class="animate-border-pulse-accent"></div>
<div class="animate-border-pulse-success"></div>
<div class="animate-border-pulse-error"></div>
<div class="animate-border-pulse-warning"></div>

Speed & Delay modifiers

.anim-fast

0.3s duration

.anim-slow

2s duration

.anim-slower

4s duration

.anim-delay-1

0.1s delay

.anim-delay-2

0.2s delay

.anim-delay-3

0.3s delay

.anim-delay-5

0.5s delay

.anim-delay-1s

1s delay

.anim-paused

Pauses animation

.anim-none

Removes animation

<div class="animate-spin anim-fast"></div>
<div class="animate-spin anim-slow"></div>

<div class="animate-fade-in-up anim-delay-1">Item 1</div>
<div class="animate-fade-in-up anim-delay-3">Item 2</div>
<div class="animate-fade-in-up anim-delay-5">Item 3</div>

<div class="animate-float anim-paused"></div>
<div class="animate-float anim-none"></div>

Real-world examples

Loading state

svg.animate-spin inside btn

Live indicator

3 new alerts

.animate-bounce + .animate-heartbeat badge

Float + Fade

njX UI ✦

.animate-float + .animate-fade-in

Skeleton loader

.animate-shimmer + .anim-delay-*

Scroll-triggered Plays once when element enters the viewport. Requires njx.js.

Fade — from any direction

.scroll-fade-up

.scroll-fade-down

.scroll-fade-left

.scroll-fade-right

<div class="scroll-fade-up">From below</div>
<div class="scroll-fade-down">From above</div>
<div class="scroll-fade-left">From right</div>
<div class="scroll-fade-right">From left</div>

Zoom

.scroll-zoom-in

.scroll-zoom-out

<div class="scroll-zoom-in">Scales 0.8 → 1</div>
<div class="scroll-zoom-out">Scales 1.2 → 1</div>

3D Flip

.scroll-flip-up

.scroll-flip-left

.scroll-flip-right

<div class="scroll-flip-up">rotateX from bottom</div>
<div class="scroll-flip-left">rotateY from left</div>
<div class="scroll-flip-right">rotateY from right</div>

Rotate, Blur, Bounce, Drop

.scroll-rotate-in

.scroll-blur-in

.scroll-bounce-in

.scroll-drop-in

<div class="scroll-rotate-in">Rotates into view</div>

<div class="scroll-blur-in">Unblurs into view</div>

<div class="scroll-bounce-in">Bounces in</div>

<div class="scroll-drop-in">Drops in</div>

Stagger — children appear in sequence

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

<!-- Add .scroll-stagger to parent —>
<div class="scroll-stagger" style="display:flex;gap:10px">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

🌈 Gradients

From _gradients.css. Ready-made gradients for background and text.

🎨 Background Gradients — Main

.gradient-primary

.gradient-primary-light

.gradient-primary-dark

.gradient-primary-vertical

.gradient-accent

.gradient-success

.gradient-error

.gradient-warning

/* _gradients.css — main */
<div class="gradient-primary">...</div>
<div class="gradient-primary-light">...</div>
<div class="gradient-accent">...</div>
<div class="gradient-success">...</div>

🌈 Background Gradients — Combined

.gradient-blue-purple

.gradient-ocean

.gradient-sunset

.gradient-nature

.gradient-gold

.gradient-cosmic

/* _gradients.css — combined */
<div class="gradient-blue-purple">...</div>
<div class="gradient-ocean">...</div>
<div class="gradient-sunset">...</div>
<div class="gradient-nature">...</div>
<div class="gradient-gold">...</div>
<div class="gradient-cosmic">...</div>

🌑 Background Gradients — Dark

.gradient-dark-midnight

.gradient-dark-void

.gradient-dark-blue

.gradient-dark-purple

/* _gradients.css — dark */
<div class="gradient-dark-midnight">...</div>
<div class="gradient-dark-void">...</div>
<div class="gradient-dark-blue">...</div>
<div class="gradient-dark-purple">...</div>

✏️ Text Gradients

.text-gradient-primary

.text-gradient-accent

.text-gradient-blue-purple

.text-gradient-sunset

.text-gradient-ocean

.text-gradient-gold

.text-gradient-cosmic

.text-gradient-rainbow

/* _gradients.css — gradient text */
<h1 class="text-gradient-primary">Primary</h1>
<h1 class="text-gradient-accent">Accent</h1>
<h1 class="text-gradient-blue-purple">Blue Purple</h1>
<h1 class="text-gradient-sunset">Sunset</h1>
<h1 class="text-gradient-ocean">Ocean</h1>
<h1 class="text-gradient-gold">Gold</h1>
<h1 class="text-gradient-cosmic">Cosmic</h1>
<h1 class="text-gradient-rainbow">Rainbow</h1>

🔲 Gradient Borders

.border-gradient-primary

.border-gradient-accent

.border-gradient-rainbow

.border-gradient-gold

/* _gradients.css — gradient borders */
<div class="border-gradient-primary">...</div>
<div class="border-gradient-accent">...</div>
<div class="border-gradient-rainbow">...</div>
<div class="border-gradient-gold">...</div>

✨ Animated Gradients

.gradient-animated

.gradient-animated-subtle

/* _gradients.css — animated */
<div class="gradient-animated">Vivid</div>
<div class="gradient-animated-subtle">Subtle</div>

🎭 Gradient Overlays

.gradient-overlay-dark

.gradient-overlay-primary

/* _gradients.css — overlays (via ::before) */
/* position:relative is required */
<div class="gradient-overlay-dark" style="position:relative">
<div style="position:relative;z-index:1">Over photo</div>
</div>
<div class="gradient-overlay-primary" style="position:relative">...</div>

🌀 Conic Gradients

.gradient-conic

.conic-warm

.conic-cool

/* _gradients.css — conic */
<div class="gradient-conic">...</div>
<div class="gradient-conic-warm">...</div>
<div class="gradient-conic-cool">...</div>
<div class="gradient-conic-pie">...</div>

🕸 Mesh Gradients

.gradient-mesh

.gradient-mesh-warm

.gradient-mesh-cool

/* _gradients.css — mesh (multi-point radial) */
<div class="gradient-mesh">...</div>
<div class="gradient-mesh-warm">...</div>
<div class="gradient-mesh-cool">...</div>

💀 Shimmer / Skeleton Loader

/* .gradient-shimmer — skeleton loader animation */
<div class="gradient-shimmer" style="height:20px;border-radius:4px"></div>
<div class="gradient-shimmer" style="height:80px;border-radius:8px"></div>

📐 Utility — direction & radial

.gradient-horizontal

.gradient-vertical

.gradient-diagonal

.gradient-radial

/* Utility — use CSS vars to set colors */
<div class="gradient-horizontal"
style="--gradient-from:#f9063f;--gradient-to:#667eea">...</div>
<div class="gradient-vertical">...</div>
<div class="gradient-diagonal">...</div>
<div class="gradient-radial">...</div>

🎭 Hover Effects

From _hovers.css. Hover your mouse over elements.

📏 Scale Effects

🔲

.hover-scale-sm

scale(1.02)

🔳

.hover-scale

scale(1.05)

⬛

.hover-scale-lg

scale(1.1)

🟫

.hover-scale-xl

scale(1.15)

/* _hovers.css: hover-scale-sm | hover-scale | hover-scale-lg | hover-scale-xl */
<div class="card hover-scale-sm">...</div> /* scale(1.02) */
<div class="card hover-scale">...</div> /* scale(1.04) */
<div class="card hover-scale-lg">...</div> /* scale(1.07) */
<div class="card hover-scale-xl">...</div> /* scale(1.12) */

⬆️ Lift Effects (translateY)

🪶

.hover-lift-sm

−2px

🚀

.hover-lift

−4px

✈️

.hover-lift-lg

−8px

🛸

.hover-lift-xl

−12px

/* _hovers.css: hover-lift variants */
<div class="card hover-lift-sm">...</div> /* -2px */
<div class="card hover-lift">...</div> /* -4px */
<div class="card hover-lift-lg">...</div> /* -8px */
<div class="card hover-lift-xl">...</div> /* -14px */

✨ Glow Effects (box-shadow)

💜

.hover-glow

💙

.hover-glow-accent

💚

.hover-glow-success

❤️

.hover-glow-error

🤍

.hover-glow-white

🔥

.hover-glow-intense

/* glow variants — all use CSS variables */
<div class="card hover-glow">...</div>
<div class="card hover-glow-accent">...</div>
<div class="card hover-glow-success">...</div>
<div class="card hover-glow-error">...</div>
<div class="card hover-glow-white">...</div>
<div class="card hover-glow-intense">...</div>

🌈 Brightness & Filter

☀️

.hover-bright

×1.15

💡

.hover-bright-strong

×1.3

🌒

.hover-dim

×0.85

🌑

.hover-dim-strong

×0.7

🖤

.hover-grayscale

/* _hovers.css: brightness & filter */
<div class="card hover-bright">...</div> /* ×1.15 */
<div class="card hover-bright-strong">...</div> /* ×1.3 */
<div class="card hover-dim">...</div> /* ×0.8 */
<div class="card hover-grayscale">...</div> /* grayscale */

👁️ Opacity Effects

🌫️

.hover-opacity-sm

0.9

🌁

.hover-opacity

0.8

🌬️

.hover-opacity-lg

0.6

👻

.hover-fade

0.7 + shrink

/* _hovers.css: opacity effects */
<div class="card hover-opacity-sm">...</div> /* 0.85 */
<div class="card hover-opacity">...</div> /* 0.7 */
<div class="card hover-opacity-lg">...</div> /* 0.5 */
<div class="card hover-fade">...</div> /* 0.3 */

🔲 Border Effects

⬜

.hover-border

primary

🔷

.hover-border-accent

accent

🟩

.hover-border-success

success

🌟

.hover-border-glow

border + glow

/* _hovers.css: border effects */
<div class="card hover-border">...</div> /* primary */
<div class="card hover-border-accent">...</div>
<div class="card hover-border-success">...</div>
<div class="card hover-border-glow">...</div> /* + glow */

🔄 Rotate Effects

🔁

.hover-rotate

+5deg

🔃

.hover-rotate-neg

−5deg

🔽

.hover-rotate-180

180deg

🌀

.hover-rotate-360

full spin

/* _hovers.css: rotate effects */
<div class="card hover-rotate">...</div> /* 3deg */
<div class="card hover-rotate-neg">...</div> /* -3deg */
<div class="card hover-rotate-180">...</div> /* 180deg */
<div class="card hover-rotate-360">...</div> /* 360deg */

🃏 Card Combo Effects

.hover-mega

/* Combo: hover-card | hover-card-glow | hover-mega */
<div class="card hover-card">...</div>
<div class="card hover-card-glow">...</div>
<div class="card hover-mega">...</div>
/* Combine */
<div class="card hover-scale hover-glow">...</div>

🔘 Button Effects

/* hover-btn | hover-btn-press | hover-btn-glow | hover-shimmer */
<button class="btn btn-primary hover-btn">Button</button>
<button class="btn btn-primary hover-btn-press">Press</button>
<button class="btn btn-primary hover-btn-glow">Glow</button>
/* hover-shimmer requires overflow:hidden */
<button class="btn btn-outline hover-shimmer" style="position:relative;overflow:hidden">Shimmer</button>

🎆 Special Effects

.hover-pulse

.hover-shimmer

.hover-backdrop-blur

.hover-gradient

/* special effects */
<div class="card hover-pulse">...</div>
/* hover-shimmer: overflow:hidden needed */
<div class="card hover-shimmer" style="position:relative;overflow:hidden">...</div>
<div class="card hover-backdrop-blur">...</div>
<div class="card hover-gradient">...</div>

✏️ Text & Link Effects

hover-underline-animated

Hover me Products About us

underline slides left → right

hover-underline-center

Hover me Portfolio Contact

underline expands from center

color & strikethrough

hover-strikethrough hover-primary hover-accent

accent line / color shift

/* underline slides left → right */
<a class="hover-underline-animated">About</a>

/* underline expands from center */
<a class="hover-underline-center">Contact</a>

/* strikethrough line on hover */
<a class="hover-strikethrough">Old price</a>

/* text color shift */
<a class="hover-primary">Link</a>
<a class="hover-accent">Link</a>

🎨 Fill from Bottom

.hover-fill

fills with primary

.hover-fill-accent

fills with accent

.hover-fill-success

.hover-primary-bg

instant fill

/* hover-fill — slides from bottom */
<div class="hover-fill">Primary</div>
<div class="hover-fill hover-fill-accent">Accent</div>
/* instant bg fill */
<div class="hover-primary-bg">...</div>
<div class="hover-accent-bg">...</div>

🔮 3D Tilt — hover to see perspective

🚀

.hover-tilt

tilts left on hover

💎

.hover-tilt-r

tilts right on hover

🎨

Product Card

use on any card element

<div class="card hover-tilt">...</div>


<div class="card hover-tilt hover-tilt-r">...</div>

✏️ Border Draw — lines animate in on hover

On navigation items

Home Products Contact

📦

Feature Card

Top & bottom lines draw in from opposite sides on hover

On buttons

<a class="hover-border-draw" href="#">Nav link</a>
<div class="card hover-border-draw">...</div>
<button class="btn btn-ghost hover-border-draw">...</button>

🖼 Image Zoom (hover-zoom)

hover-zoom

hover-zoom-lg

hover-zoom-out

/* hover-zoom — parent clips, img scales */
<div class="hover-zoom">
<img src="photo.jpg">
</div>
<div class="hover-zoom-sm"><img></div> /* ×1.05 */
<div class="hover-zoom-lg"><img></div> /* ×1.15 */
<div class="hover-zoom-out"><img></div> /* ×0.95 */

🔬 Filter Effects

.hover-grayscale

gray→color

.hover-sepia

.hover-invert

.hover-bright-strong

.hover-dim

/* filter effects — great for images */
<img class="hover-grayscale" src="..."> /* gray→color */
<img class="hover-sepia" src="...">
<img class="hover-invert" src="...">
<img class="hover-bright-strong" src="...">
<img class="hover-blur" src="...">

💬 Hover Tips

Pure CSS tooltips via data-tip attribute — works on any element. No JS, no wrappers.

Positions

/* default: top */
<button data-tip="Tooltip on top">Top</button>

<button data-tip="Tooltip on bottom" data-tip-pos="bottom">Bottom</button>
<button data-tip="Tooltip on left" data-tip-pos="left">Left</button>
<button data-tip="Tooltip on right" data-tip-pos="right">Right</button>

Color variants

/* no data-tip-color = dark bubble */
<button data-tip="Default bubble">Default</button>

<button data-tip="Primary" data-tip-color="primary">...</button>
<button data-tip="Success!" data-tip-color="success">...</button>
<button data-tip="Caution" data-tip-color="warning">...</button>
<button data-tip="Danger!" data-tip-color="danger">...</button>

Works on any element

Hover over text tag-primary

/* works on any HTML element */

<span data-tip="Plain text tooltip">Hover me</span>

<span class="tag tag-primary" data-tip=".tag-primary">tag</span>

<img data-tip="Image tooltip" src="..." />

<div data-tip="var(--color-primary)"
data-tip-color="primary"></div>

🔲 Buttons

All variants from _buttons.css. Base: .btn + variant.

/* _buttons.css — base: .btn + variant */
<button class="btn btn-primary">Primary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-warning">Warning</button>

Outline

<button class="btn btn-outline">Outline</button>
<button class="btn btn-outline-accent">Accent</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-error">Error</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-white">White</button>

Ghost

<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-ghost-primary">Primary</button>
<button class="btn btn-ghost-accent">Accent</button>
<button class="btn btn-ghost-success">Success</button>
<button class="btn btn-ghost-error">Error</button>
<button class="btn btn-ghost-warning">Warning</button>

Soft / Tinted variants

<button class="btn btn-soft-primary">Primary</button>
<button class="btn btn-soft-accent">Accent</button>
<button class="btn btn-soft-success">Success</button>
<button class="btn btn-soft-error">Delete</button>
<button class="btn btn-soft-warning">Warning</button>
<button class="btn btn-soft-info">Info</button>

Link buttons — Filled

Primary Accent Success Error Warning Dark Light

<a class="link-btn link-btn-primary">Primary</a>
<a class="link-btn link-btn-accent">Accent</a>
<a class="link-btn link-btn-success">Success</a>
<a class="link-btn link-btn-error">Error</a>
<a class="link-btn link-btn-warning">Warning</a>
<a class="link-btn link-btn-dark">Dark</a>
<a class="link-btn link-btn-light">Light</a>

Link buttons — Outline

Primary Accent Success Error Warning Dark Light

<a class="link-btn link-btn-outline-primary">Primary</a>
<a class="link-btn link-btn-outline-accent">Accent</a>
<a class="link-btn link-btn-outline-success">Success</a>
<a class="link-btn link-btn-outline-error">Error</a>
<a class="link-btn link-btn-outline-warning">Warning</a>
<a class="link-btn link-btn-outline-dark">Dark</a>
<a class="link-btn link-btn-outline-light">Light</a>

Link buttons — Ghost

Primary Accent Success Error Warning Dark Light

<a class="link-btn link-btn-ghost-primary">Primary</a>
<a class="link-btn link-btn-ghost-accent">Accent</a>
<a class="link-btn link-btn-ghost-success">Success</a>
<a class="link-btn link-btn-ghost-error">Error</a>
<a class="link-btn link-btn-ghost-warning">Warning</a>
<a class="link-btn link-btn-ghost-dark">Dark</a>
<a class="link-btn link-btn-ghost-light">Light</a>

Link buttons — Sizes & Arrow

Small filled Small ghost Default With arrow Filled arrow

<a class="link-btn link-btn-primary link-btn-sm">Small</a>


<a class="link-btn link-arrow">With arrow</a>
<a class="link-btn link-btn-primary link-arrow">Filled + arrow</a>

Sizes

/* Sizes: xs → sm → md (default) → lg → xl → 2xl */
<button class="btn btn-primary btn-xs">XS</button>
<button class="btn btn-primary btn-sm">SM</button>
<button class="btn btn-primary">MD (default)</button>
<button class="btn btn-primary btn-lg">LG</button>
<button class="btn btn-primary btn-xl">XL</button>

Gradient & Glow

/* _buttons.css — token gradient & glow */
<button class="btn btn-glow-primary">Glow Primary</button>
<button class="btn btn-glow-accent">Glow Accent</button>
<button class="btn btn-gradient btn-gradient-primary-accent">Primary Accent</button>
<button class="btn btn-gradient btn-gradient-primary-success">Primary Success</button>
<button class="btn btn-gradient btn-gradient-accent-warning">Accent Warning</button>

Outline Gradient — border & text shimmer

<button class="btn btn-outline-gradient btn-outline-gradient-primary">Primary</button>
<button class="btn btn-outline-gradient btn-outline-gradient-accent">Accent</button>
<button class="btn btn-outline-gradient btn-outline-gradient-error">Error</button>

<button class="btn btn-outline-gradient btn-outline-gradient-fire">Fire</button>
<button class="btn btn-outline-gradient btn-outline-gradient-ocean">Ocean</button>
<button class="btn btn-outline-gradient btn-outline-gradient-nature">Nature</button>

Gradient Hover

<button class="btn btn-gradient-hover btn-gradient-hover-primary">Primary</button>
<button class="btn btn-gradient-hover btn-gradient-hover-fire">Fire</button>
<button class="btn btn-gradient-hover btn-gradient-hover-ocean">Ocean</button>
<button class="btn btn-gradient-hover btn-gradient-hover-nature">Nature</button>

Shine

<button class="btn btn-shine btn-shine-primary">Primary</button>
<button class="btn btn-shine btn-shine-fire">Fire</button>
<button class="btn btn-shine btn-shine-ocean">Ocean</button>
<button class="btn btn-shine btn-shine-nature">Nature</button>

Aura — glow halo blooms on hover

<button class="btn btn-aura btn-aura-sunset">Sunset</button>
<button class="btn btn-aura btn-aura-aurora">Aurora</button>
<button class="btn btn-aura btn-aura-cosmic">Cosmic</button>
<button class="btn btn-aura btn-aura-candy">Candy</button>
<button class="btn btn-aura btn-aura-gold">Gold</button>
<button class="btn btn-aura btn-aura-ice">Ice</button>

Rainbow & Animated BG

<button class="btn btn-rainbow">Rainbow</button>
<button class="btn btn-rainbow-pastel">Pastel</button>
<button class="btn btn-animated-fire">Fire</button>
<button class="btn btn-animated-ocean">Ocean</button>
<button class="btn btn-animated-aurora">Aurora</button>
<button class="btn btn-animated-candy">Candy</button>

Glow Hover — rainbow border blooms on hover

<button class="btn btn-glow-hover">Rainbow</button>
<button class="btn btn-glow-hover btn-glow-hover-fire">Fire</button>
<button class="btn btn-glow-hover btn-glow-hover-ocean">Ocean</button>
<button class="btn btn-glow-hover btn-glow-hover-aurora">Aurora</button>
<button class="btn btn-glow-hover btn-glow-hover-sunset">Sunset</button>
<button class="btn btn-glow-hover btn-glow-hover-gold">Gold</button>

Icon Buttons

/* btn-icon — square aspect ratio, keeps .btn sizing */
<button class="btn btn-primary btn-icon btn-xs"><svg>...</svg></button>
<button class="btn btn-primary btn-icon btn-sm"><svg>...</svg></button>
<button class="btn btn-primary btn-icon"><svg>...</svg></button>
/* .btn-square — removes pill radius */
<button class="btn btn-ghost btn-icon btn-square"><svg>...</svg></button>
/* Icon + Label */
<button class="btn btn-success">
<svg>...</svg> Download
</button>

Button Group

/* .btn-group — chain any .btn */
<div class="btn-group">
  <button class="btn btn-primary btn-sm">Left</button>
  <button class="btn btn-primary btn-sm">Center</button>
  <button class="btn btn-primary btn-sm">Right</button>
</div>

Loading & Disabled states

/* .btn-loading — hides label, shows centered spinner */
<button class="btn btn-primary btn-loading">Loading</button>
<button class="btn btn-accent btn-loading btn-sm">Loading</button>
/* Disabled */
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-error is-disabled">is-disabled</button>

Glass & Neon

<button class="btn btn-glass">Glass</button>

<button class="btn btn-neon">Neon</button>
<button class="btn btn-neon btn-lg">Neon Large</button>

<button class="btn btn-glow-primary">Glow Primary</button>

3D Depth — click to feel the press

<button class="btn btn-3d">Primary 3D</button>
<button class="btn btn-3d-success">Success 3D</button>
<button class="btn btn-3d-error">Danger 3D</button>
<button class="btn btn-3d btn-lg">Large 3D</button>

Badge buttons

5 12 3 99+

<span class="btn-badge-wrap">
  <button class="btn btn-primary btn-sm">Inbox</button>
  <span class="btn-count">5</span>
</span>

<span class="btn-badge-wrap">
  <button class="btn btn-ghost btn-icon">...</button>
  <span class="btn-dot"></span>
</span>

Real-world patterns

Hero CTA

Toolbar

Form actions

🃏 Cards

Variants from _cards.css.

Variants

Base Card

Neutral surface for dashboards, settings and content sections.

card View →

Glass

Translucent panel with backdrop blur for overlays and hero UI.

card-glass blur

Dark

Dense dark variant for analytics, terminals and control panels.

card-dark

Bordered

Stronger edge definition for grouped information and modules.

card-bordered

Primary Border

Highlights active plans, selected states and featured widgets.

card-bordered-primary active

Glow

Attention-grabbing glow for promotions, CTAs and highlights.

card-glow

Gradient

Bold visual surface for hero sections, banners and storytelling.

card-gradient

Shadow

Soft colored shadow for layered blocks that need subtle depth.

card-shadow-primary

/* _cards.css */
<div class="card">Basic card</div>
<div class="card-glass">Glassmorphism</div>
<div class="card-dark">Dark</div>
<div class="card-bordered">With border</div>
<div class="card-bordered-primary">Primary border</div>
<div class="card-glow">Glow effect</div>
<div class="card-gradient">Gradient</div>

Color Glow Cards — card-bg-*

Primary

Power Mode

Primary color glow for hero actions and key features.

card-bg-primary

Accent

Bold Impact

Accent glow for standout promotions and announcements.

card-bg-accent

Success

All Systems Go

Green glow for confirmations, completed tasks and status.

card-bg-success

Error

Critical Alert

Red glow for errors, warnings and destructive actions.

card-bg-error

Warning

Heads Up

Amber glow for notices, deprecations and caution states.

card-bg-warning

Dark

Midnight

Deep black surface for terminals and code-heavy layouts.

card-bg-dark

Light

Daylight

Bright surface for light-mode layouts and clean dashboards.

card-bg-light

<div class="card-bg-primary">…</div>
<div class="card-bg-accent">…</div>
<div class="card-bg-success">…</div>
<div class="card-bg-error">…</div>
<div class="card-bg-warning">…</div>
<div class="card-bg-dark">…</div>
<div class="card-bg-light">…</div>

🖼 Card with image on top (card-media)

🌌

Design

Beautiful UI Patterns

Explore modern interface design patterns used in top products today.

Name	Email	Role	Status
Alex	[email protected]	Admin	Active
Maria	[email protected]	User	Pending
Ivan	[email protected]	Editor	Banned
Olga	[email protected]	User	Active

Read more View all GitHub Docs

<a class="link link-arrow">Read more</a>
<a class="link link-arrow link-primary">View all</a>
<a class="link link-external">GitHub</a>
<a class="link link-external link-muted">Docs</a>

Link cards — block links

📄

Documentation

Full API reference and guides

→

⚡

Quick Start

Up and running in 30 seconds

→

🎨

Themes

9 built-in themes, all customisable

→

<a href="#" class="link-card">
  <div class="link-card-icon">📄</div>
  <div class="link-card-body">
    <div class="link-card-title">Documentation</div>
    <div class="link-card-desc">Full API reference</div>
  </div>
  <span class="link-card-arrow">→</span>
</a>

Link list — nav-style

Dashboard Profile Notifications Settings Help

<div class="link-list">
  <a href="#" class="is-active">Dashboard</a>
  <a href="#">Profile</a>
  <a href="#">Settings</a>
</div>

🔲 Sections & Containers

From _sections.css. Containers and wrappers for layouts.

Containers (container-*)

default .container (max-width: 1280px)

.container-sm (max-width: 640px)

.container-md (max-width: 960px)

.container-lg (max-width: 1200px)

.container-xl (max-width: 1400px)

.container-fluid (100% width)

/* _sections.css: container, container-sm/md/lg/xl, container-fluid */
<div class="container"> /* max-width: 1280px */
  Content
</div>
<div class="container-sm"> /* max-width: 640px */
  Content
</div>
<div class="container-fluid"> /* 100% width */
  Content
</div>

Section (padding variants)

.section (padding: 64px 0 by default)

.section-sm (padding: 32px 0)

.section-lg (padding: 96px 0)

/* section | section-sm (32px) | section-lg (96px) */
<section class="section"> /* padding: 64px 0 */
  <div class="container">...</div>
</section>
<section class="section section-sm"> /* padding: 32px 0 */
  <div class="container">...</div>
</section>
<section class="section section-lg"> /* padding: 96px 0 */
  <div class="container">...</div>
</section>

Section Banner (full-height hero)

.section-banner

Full screen hero section (min-height: 100dvh)

Wrappers & Lists

.items-wrapper-col (flex column)

Item 1

Item 2

.list-items-row (flex row)

Item A

Item B

Item C

Social List — Default (Icon Buttons)

Social List — Glass Card

Social List — Pills (Icon + Label)

<ul class="social-list social-list-pills">
<li><a href="#"><svg> GitHub</a></li>
</ul>

Social List — Colored Hover (Brand Colors)

Social List — Minimal / Ghost

Social List — Vertical Stack

Social List — Outlined

Background Support

.section.bg (with background)

.bg (utility class)

Wrapper & Agent classes

.wrapper — container with position: relative and z-index: 1

.agent — for elements with max-width: 100%

🔗 Social List

From _social.css. Flexible social icon links — 6 variants with hover effects, brand colors, pills, glass and more.

Default (Icon Buttons)

Glass Card

Pills (Icon + Label)

<ul class="social-list social-list-pills">
  <li><a href="#" aria-label="GitHub">
    <svg ...><path d=.../></svg>
    GitHub
  </a></li>
  <li><a href="#" aria-label="Twitter">
    <svg ...><path d=.../></svg>
    Twitter
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg ...><path d=.../></svg>
    Telegram
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg ...><path d=.../></svg>
    Discord
  </a></li>
  <li><a href="#" aria-label="LinkedIn">
    <svg ...><path d=.../></svg>
    LinkedIn
  </a></li>
</ul>

Colored Hover (Brand Colors)

Minimal / Ghost

Vertical Stack

<ul class="social-list social-list-vertical">
  <li><a href="#" aria-label="GitHub">
    <svg ...><path d=.../></svg>
    GitHub
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg ...><path d=.../></svg>
    Telegram
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg ...><path d=.../></svg>
    Discord
  </a></li>
  <li><a href="#" aria-label="LinkedIn">
    <svg ...><path d=.../></svg>
    LinkedIn
  </a></li>
  <li><a href="#" aria-label="YouTube">
    <svg ...><path d=.../></svg>
    YouTube
  </a></li>
</ul>

Outlined

🗂 Tabs

From _tab.css. Variants: underline (default), .tab-nav-pills, .tab-nav-boxed, .tab-nav-card. Modifiers: .is-full, .tab-nav-sm, .tab-nav-lg. JS: tabSwitch(btn).

Default — underline

njX is a zero-dependency CSS library with 9 built-in themes. One <link> tag — no build step required.

9 themes · 30+ components · CSS variables · Bulma-compatible · 0 dependencies.

v1.3 — Added _links.css, new collapse variants, improved tab system.

<div class="tab-wrap">
  <div class="tab-nav">
    <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>

Pills

Stats for today: 1,204 visits · 38 signups

Stats for this week: 8,720 visits · 214 signups

Stats for this month: 32,100 visits · 890 signups

<div class="tab-nav tab-nav-pills">
  <button class="tab-btn is-active" onclick="tabSwitch(this)">Daily</button>
  <button class="tab-btn" onclick="tabSwitch(this)">Weekly</button>
  <button class="tab-btn" onclick="tabSwitch(this)">Monthly</button>
</div>

Boxed

<div class="tab-wrap">...</div>

.tab-nav { display: flex; }

function tabSwitch(btn) { ... }

Card — top border (VS Code style)

<!DOCTYPE html><html data-theme="dark">...

@import "_base.css"; @import "_buttons.css";

document.addEventListener('DOMContentLoaded', init);

<div class="tab-nav tab-nav-card">
<button class="tab-btn is-active" onclick="tabSwitch(this)">index.html</button>
<button class="tab-btn" onclick="tabSwitch(this)">style.css</button>
</div>

Badges + full width

4 unread messages in your inbox.

12 sent messages.

1 draft saved.

<div class="tab-nav is-full">
  <button class="tab-btn is-active" onclick="tabSwitch(this)">
    Inbox <span class="tab-badge">4</span>
  </button>
</div>

Sizes — sm / default / lg

📂 Collapse / Accordion

From _collapse.css. Supports native <details> and JS class .is-open. Variants: .collapse-plus .collapse-ghost .collapse-primary. Wrappers: .accordion .accordion-flush.

Basic — details API

What is njX?

njX is a zero-dependency CSS component library with 9 built-in themes. Switch themes instantly via data-theme on the <html> element.

No build step required?

Correct — just one <link> tag. No npm, no webpack, no PostCSS config. Works in any environment.

Can I customise the theme?

Yes. Override --color-primary and other CSS variables in your own :root block. All components update automatically.

<details class="collapse">
  <summary class="collapse-header">
    Title <span class="collapse-icon"></span>
  </summary>
  <div class="collapse-body">Content goes here.</div>
</details>

Basic — JS API (.is-open)

What is a JS collapse?

Add .is-open to the .collapse element to expand it. Remove to collapse. Use any event — click, hover, programmatic.

This one starts open

Pre-open by adding .is-open to the wrapper div in HTML. No JS needed at load time.

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

<script>
function collapseToggle(header) {
  header.closest('.collapse').classList.toggle('is-open');
}
</script>

Variants — plus / ghost / primary

Plus/minus icon

Uses .collapse-plus — shows a ＋ that morphs into — when open.

Ghost (no border)

Uses .collapse-ghost — transparent background and border. Great inside cards or sidebars.

Primary accent

Uses .collapse-primary — tinted border and header that matches your theme's primary color.

<details class="collapse collapse-plus">...</details>


<details class="collapse collapse-ghost">...</details>


<details class="collapse collapse-primary">...</details>

Accordion wrapper

Section A

Content for section A. The .accordion wrapper adds 6px gap between items.

Section B (open)

Content for section B. Each collapse is independent — multiple can be open at once.

Section C

Content for section C.

<div class="accordion">
  <details class="collapse">
    <summary class="collapse-header">Section A <span class="collapse-icon"></span></summary>
    <div class="collapse-body">Content A</div>
  </details>
  <details class="collapse">
    <summary class="collapse-header">Section B <span class="collapse-icon"></span></summary>
    <div class="collapse-body">Content B</div>
  </details>
</div>

Accordion Flush — connected

Feature overview

The .accordion-flush wrapper removes individual borders and joins all items into one bordered block with dividers between them.

Installation

One <link> tag — that's it. No npm, no build tools. Works offline too.

Browser support

All modern browsers. Uses color-mix() which requires Chrome 111+, Firefox 113+, Safari 16.2+.

Customisation

Override CSS variables on :root or any parent element. Scoped theming is fully supported.

<div class="accordion-flush">
  <details class="collapse">
    <summary class="collapse-header">Item 1 <span class="collapse-icon"></span></summary>
    <div class="collapse-body">Content</div>
  </details>
  <details class="collapse">
    <summary class="collapse-header">Item 2 <span class="collapse-icon"></span></summary>
    <div class="collapse-body">Content</div>
  </details>
</div>

🔽 Dropdown

From _dropdown.css. Native <details> or JS dropdownToggle(). Positions: .dropdown-right .dropdown-top .dropdown-center. Variants: .dropdown-primary .dropdown-dark.

Basic — details API

<details class="dropdown">
  <summary class="dropdown-trigger btn btn-ghost btn-sm">
    Menu <span class="dropdown-arrow"></span>
  </summary>
  <div class="dropdown-menu">
    <div class="dropdown-label">Section</div>
    <a class="dropdown-item">Item</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item is-danger">Delete</a>
  </div>
</details>

Menu positions

Variants — primary / dark

<details class="dropdown dropdown-primary">...</details>


<details class="dropdown dropdown-dark">...</details>

JS API — dropdownToggle()

💬 Popups / Modals

From _popups.css. Variant is set on .lib-modal-box — the overlay is automatically colored via :has(). Close — Escape or click the overlay.

All variants — colored overlays

<div class="lib-modal-overlay" id="my-modal">
  <div class="lib-modal-box is-success">
    <button class="lib-modal-close">✕</button>
    <div class="lib-modal-icon-wrap">✅</div>
    <div class="lib-modal-title">Success!</div>
    <div class="lib-modal-text">Description.</div>
    <div class="lib-modal-actions">
      <button class="btn btn-success btn-sm">Great!</button>
    </div>
  </div>
</div>

Size variants — is-sm · is-lg

<div class="lib-modal-box is-sm">...</div>


<div class="lib-modal-box is-lg">...</div>


<div class="lib-modal-box is-sm is-primary">...</div>

Stacked actions — lib-modal-actions.is-column

<div class="lib-modal-actions is-column">
  <button class="btn btn-error btn-sm">Delete permanently</button>
  <button class="btn btn-warning btn-sm">Archive instead</button>
  <button class="btn btn-ghost btn-sm">Cancel</button>
</div>

Modal with form

<div class="lib-modal-box is-primary">
  <div class="lib-modal-icon-wrap">📝</div>
  <div class="lib-modal-title">Send a message</div>
  
  <input type="text" placeholder="Your name" />
  <textarea placeholder="Your message..."></textarea>
  <div class="lib-modal-divider"></div>
  <div class="lib-modal-actions">
    <button class="btn btn-primary btn-sm">Send</button>
    <button class="btn btn-ghost btn-sm">Cancel</button>
  </div>
</div>

Full HTML structure

<button onclick="openModal('my-modal')">Open</button>


<div id="my-modal" class="lib-modal-overlay"
     onclick="if(event.target===this)closeModal(this)">
  <div class="lib-modal-box is-primary">
    <button class="lib-modal-close">✕</button>
    <div class="lib-modal-icon-wrap">🔷</div>
    <div class="lib-modal-title">Title here</div>
    <div class="lib-modal-text">Description text.</div>
    <div class="lib-modal-divider"></div>
    <div class="lib-modal-actions">
      <button class="btn btn-primary btn-sm">Confirm</button>
      <button class="btn btn-ghost btn-sm">Cancel</button>
    </div>
  </div>
</div>

Interactive preview — click any card

⬜

Default modal

Neutral styling, no color tint.

.lib-modal-box

🔷

Primary variant

Themed accent, adapts to active theme.

.is-primary

✅

Success variant

Green tint — confirmations, approvals.

.is-success

🚨

Error variant

Red tint — destructive actions, critical alerts.

.is-error

⚠️

Warning variant

Amber tint — cautions, non-destructive alerts.

.is-warning

ℹ️

Info variant

Cyan tint — tips, hints, announcements.

.is-info

🔹

Small size

max-width: 340px — compact quick confirms.

.is-sm

🔲

Large size

max-width: 620px — spacious content, long text.

.is-lg

📋

Stacked actions

Buttons stack vertically — 3+ action choices.

.is-column

📝

Form modal

Any HTML inside the box — inputs, textareas.

form inside box

<div id="modal-1" class="lib-modal-overlay" onclick="if(event.target===this)closeModal(this)">
  <div class="lib-modal-box is-success">
    <button class="lib-modal-close">✕</button>
    <div class="lib-modal-icon-wrap">✅</div>
    <div class="lib-modal-title">Success!</div>
    <div class="lib-modal-text">Description of the action or result.</div>
    <div class="lib-modal-actions">
      <button class="btn btn-success btn-sm">Confirm</button>
      <button class="btn btn-ghost btn-sm">Cancel</button>
    </div>
  </div>
</div>


<div class="lib-modal-box is-sm">...</div>
<div class="lib-modal-box is-lg">...</div>


<div class="lib-modal-box is-column">
  <div class="lib-modal-actions">
    <button class="btn btn-primary btn-sm">Option A</button>
    <button class="btn btn-ghost btn-sm">Option B</button>
  </div>
</div>


<div class="lib-modal-box">
  <div class="lib-modal-title">Edit profile</div>
  <form style="display:flex;flex-direction:column;gap:12px;margin-top:16px">
    <input class="inp" type="text" placeholder="Name">
    <input class="inp" type="email" placeholder="Email">
    <div class="lib-modal-actions">
      <button class="btn btn-primary btn-sm">Save</button>
      <button class="btn btn-ghost btn-sm">Cancel</button>
    </div>
  </form>
</div>

🗂 Sidebar

Drawer/sidebar panel — 4 variants: left overlay, right overlay, left push, fullpage. Controlled via sidebarOpen(id) / sidebarClose(id) / sidebarToggle(id).

Left — overlay (default)

<button class="btn btn-primary" onclick="sidebarOpen('my-sidebar')">Open</button>


<div class="sidebar-backdrop" id="my-sidebar-backdrop" onclick="sidebarClose('my-sidebar')"></div>

<aside class="sidebar" id="my-sidebar">
<div class="sidebar-header">...</div>
<div class="sidebar-body">...</div>
</aside>

Right — overlay

Left — push content

<div class="sidebar-layout">
<aside class="sidebar sidebar-push" id="push-sidebar">...</aside>
<div class="sidebar-content">...</div>
</div>

Fullpage — full viewport

Right — push content

Mini — icon rail (collapsible)

<div class="sidebar-layout">
  <aside class="sidebar sidebar-push sidebar-mini is-open" id="mini-rail">
    
  </aside>
  <div class="sidebar-content">...</div>
</div>

sidebarExpandToggle('mini-rail') // expand / collapse

Floating — detached, glass blur

JS API

sidebarOpen('id') sidebarClose('id') sidebarToggle('id') sidebarExpandToggle('id')

sidebarOpen('my-sidebar')         // open overlay
sidebarClose('my-sidebar')        // close overlay
sidebarToggle('my-sidebar')       // toggle open/close
sidebarExpandToggle('mini-rail')  // expand/collapse mini

🔔 Notifications & Messages

Toasts · Bell dropdown · Inline alerts · Message inbox — from _notifications.css.

Toast Notifications — click to trigger · auto-dismiss · stackable

/* njxFireToast(type, title, msg, duration=4000) */

njxFireToast("success", "Deployed!", "Your changes are live ✓");
njxFireToast("error", "Error 500", "Server failed to respond");
njxFireToast("warning", "Low storage", "Only 120MB remaining");
njxFireToast("info", "New update", "v1.0.7 is available");

Notification Bell — click to open · mark as read · badge counter

Bell

3

2

!

Click any icon to trigger a toast

Inline Alerts — click × to dismiss · smooth collapse

✅

Deployment successful

Version 1.0.6 is live. CDN cache updated in 28 regions.

❌

Payment failed

Your card ending in 4242 was declined. Please update billing info.

⚠️

Storage almost full

You're using 92% of your 5GB storage. Upgrade to avoid interruptions.

💡

New feature available

Skeleton loaders are now in the component library. Check the docs.

🔒

Security notice

We detected a sign-in from a new device in Tokyo, Japan.

Message Inbox — click to read · badge counter

Messages 3

A

alex_dev2m

Re: PR #38 carousel component

Looks great! Just one question about the autoplay logic...

M

maria_ui15m

Design tokens feedback

Hey! I reviewed the token structure and have some suggestions...

📦

npm registry1h

[email protected] published

Your package has been successfully published to the npm registry...

K

kai_codes3h

Collaboration proposal

I'd love to contribute to the animation system if you're open...

G

GitHub1d

New star on njx-css-ui

react_dev starred your repository njx-css-ui

Notification — static variants

🔔Basic notification — default style

ℹ️is-primary — Informational message

✅is-success — Completed successfully

⚠️is-warning — Warning, attention needed

❌is-danger — Error or critical issue

/* notification: is-primary | is-success | is-warning | is-danger */
<div class="notification is-success">
<button class="delete is-small" onclick="this.closest('.notification').style.display='none'"></button>
Completed successfully
</div>

Messages

Primary

Message text with header and dismiss button

Success

Operation completed successfully

Warning

This action may have side effects

Danger

An error occurred. Please try again.

<div class="message is-primary">
<div class="message-header">Header <button class="delete is-small"></button></div>
<div class="message-body">Message text</div>
</div>

Loaders

default

accent

success

lg

xl

/* loader: default | loader-accent | loader-success | loader-lg | loader-xl */
<div class="loader"></div>
<div class="loader loader-accent"></div>
<div class="loader loader-success"></div>
<div class="loader loader-lg"></div>
<div class="loader loader-xl"></div>

🎠 Carousel / Slider

CSS-only — scroll-snap, no JS needed, works with touch/swipe.
JS — sequential prev/next, dots sync, autoplay support.

CSS — Scroll only (swipe / drag)

🚀

Card 1

scroll-snap-align: start

⚡

Card 2

swipe or drag

✅

Card 3

pure CSS, zero JS

🎯

Card 4

touch-friendly

/* .scroll-carousel-wrap — fade edges */
<div class="scroll-carousel-wrap">
  <div class="scroll-carousel">
    <div style="min-width:260px">Card 1</div>
    <div style="min-width:260px">Card 2</div>
  </div>
</div>

CSS — Full-width snap (one slide at a time)

🌌

Slide 1

swipe or drag →

🌸

Slide 2

snaps to center

🌊

Slide 3

zero JS

🍀

Slide 4

touch-friendly

<div class="snap-carousel">
  <div style="height:170px">Slide 1</div>
  <div style="height:170px">Slide 2</div>
  <div style="height:170px">Slide 3</div>
</div>

CSS — Peek (shows edge of next card)

🎯

Card 1

next card peeks at right

💎

Card 2

swipe to navigate

🚀

Card 3

zero JS

⚡

Card 4

touch-friendly

CSS — Vertical scroll snap

📱

Row 1

scroll down ↓

🖥

Row 2

snap-type: y mandatory

⌨️

Row 3

zero JS

JS — Sequential prev/next + dots

🚀

Slide 1 / 4

Click arrows — goes 1→2→3→4

⚡

Slide 2 / 4

Dots sync with arrows

✅

Slide 3 / 4

Click dot to jump

🎯

Slide 4 / 4

Wraps infinitely

JS — Autoplay (pauses on hover)

🌌

Auto Slide 1

autoplay every 2.5s

🌸

Auto Slide 2

hover to pause

🌊

Auto Slide 3

data-autoplay="2500"

Hero Slider — autoplay · progress bar · prev/next · dots

njX UI · Component Library

Beautiful UI.
Zero dependencies.

30+ components, 9 themes, 308 KB. Drop one CDN link and ship faster.

Get Started ★ GitHub

Themes

9 Themes.
One click to switch.

Dark · Light · Red · Blue · Green · Cyan · Yellow · Pink · Purple. All driven by CSS variables.

Dark Purple Pink Green

Performance

308 KB total.
Lighter than a logo.

Minified + gzipped. No framework. No build step. Just a CSS link.

npm install njx-ui

Components

30+ components.
Ready to use.

Buttons · Cards · Forms · Nav · Modals · Skeleton · Animations and more.

Browse All →

<div class="hero-slider">
  <div class="hero-slider-track">
    <div class="hero-slider-slide">
      <div class="hero-slider-body">
        <div class="hero-slider-label">Label</div>
        <div class="hero-slider-title">Title</div>
        <div class="hero-slider-desc">Desc</div>
      </div>
    </div>
  </div>
  <div class="hero-slider-nav">
    <button class="hero-slider-btn">‹</button>
    <button class="hero-slider-btn">›</button>
  </div>
  <div class="hero-slider-dots"></div>
  <div class="hero-slider-progress"></div>
</div>

Testimonials Slider — swipe · prev/next · counter

★★★★★

Switched from Bootstrap and never looked back. The theme system is pure genius — one attribute on the html tag and everything updates instantly. My team ships UI twice as fast now.

A

alex_dev

Senior Frontend Engineer · Berlin

Verified

★★★★★

I was skeptical about a CSS-only library in 2025, but the skeleton loaders alone are worth it. The animations are buttery smooth and the 308 KB footprint is incredible for what you get.

M

maria_ui

UI Designer · Amsterdam

New

★★★★★

We migrated our docs site to njX UI in a weekend. The dark theme out of the box is stunning and component variety meant we barely had to write custom CSS. Highly recommend.

K

kai_codes

Full-Stack Dev · Tokyo

Pro user

★★★★★

The carousel component alone sold me. CSS scroll-snap with touch support and no dependencies? Insane. I've replaced Swiper on three projects already.

R

react_dev

React Developer · London

Power user

1 / 4

Autoplay Strip — CSS @keyframes only · hover to pause

⚡ Buttons

🎨 Themes

📋 Forms

🃏 Cards

🔔 Alerts

◎ Skeleton

🌊 Hovers

🧩 Nav

📊 Progress

💬 Popups

🏷 Tags

🎠 Carousel

⚡ Buttons

🎨 Themes

📋 Forms

🃏 Cards

🔔 Alerts

◎ Skeleton

🌊 Hovers

🧩 Nav

📊 Progress

💬 Popups

🏷 Tags

🎠 Carousel

<div class="autoplay-strip-wrap">
  <div class="autoplay-strip">
    <div class="autoplay-strip-item">⚡ Buttons</div>
    <div class="autoplay-strip-item">🎨 Themes</div>
    /* ...duplicate same set for loop... */
  </div>
</div>

📐 CSS Classes Reference

CSS Scroll-only
.scroll-carousel-wrap — fade edges
.scroll-carousel — scrollable track

JS Carousel
.js-carousel-wrap — outer container
data-autoplay="ms" — autoplay
.js-carousel — viewport (overflow:hidden)
.js-carousel-track — sliding track
.js-carousel-btn — arrow button
.js-prev / .js-next — direction
.js-dots — dot container
.js-dot — single dot
.is-active — active dot state

Carousel item sizes
.carousel-item-sm — 160px
.carousel-item-md — 260px
.carousel-item-lg — 360px
.carousel-item-xl — 480px

/* 1. CSS scroll-only — simplest */
<div class="scroll-carousel-wrap">
  <div class="scroll-carousel">...</div>
</div>

/* 2. JS: arrows outside overflow:hidden */
<div class="js-carousel-wrap">
  <div style="position:relative">
    <div class="js-carousel">...</div>
    <button class="js-carousel-btn js-prev">‹</button>
    <button class="js-carousel-btn js-next">›</button>
  </div>
  <div class="js-dots">...</div>
</div>

/* 3. Autoplay */
<div class="js-carousel-wrap" data-autoplay="3000">...</div>

Component classes. Production-ready polish.

The entire UI reactsto a single attribute.

.text-gradient-primary

.text-gradient-accent

.text-gradient-blue-purple

.text-gradient-sunset

.text-gradient-ocean

.text-gradient-gold

.text-gradient-cosmic

.text-gradient-rainbow

The entire UI reacts
to a single attribute.