njX UI
Theme
v1.2.0
njX UI Preview

Drop in the CDN link. Assemble your landing.

njX UI is a CDN-first CSS library for building landing pages fast: ready-made components, utilities, fluid typography and motion helpers — copy a block, paste, ship. No framework to learn, no build step to configure. This page is the full live preview.

Quick Start Start With Themes Explore Components ★ GitHub
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui@1/css/style.min.css">
9 themes one data-theme
30+ components CSS-first system
Motion ready hover, loop, scroll
How It Feels
<button class="btn btn-primary">Launch</button>
<div class="card glass">...</div>
<html data-theme="ocean">

The idea: a landing page in hours, not days — copy ready component classes, switch the theme with one attribute, and never touch a build toolchain.

Best For

Landing pages first — promo sites, product pages, launch pages. Also great for docs, prototypes and internal tools where speed matters more than a design-system committee.

At A Glance
30+ component sections on this page
9 built-in themes
44 KB gzip over the wire
Theme Foundation Start with tokens and palettes to see how the same UI system reshapes itself through a single HTML attribute.
Core Components Jump into buttons, cards, forms, tables, navigation and overlays to inspect the main building blocks.
Motion & Polish Review animation, gradient and hover helpers to see how `njX UI` adds visual energy without heavy runtime logic.
🎨 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); 
/* njx-alpine.js preset — load it before Alpine, that's all the JS */
<script defer src="https://cdn.jsdelivr.net/npm/njx-ui@1/js/njx-alpine.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

/* Toggle dark / light */
<button x-data="njxTheme" @click="toggle()"
        x-text="t === 'dark' ? 'Light' : 'Dark'"></button>

/* Pick any of the 9 themes */
<div x-data="njxTheme">
  <button @click="set('purple')">Purple</button>
  <button @click="set('cyan')">Cyan</button>
  <button @click="set('pink')">Pink</button>
</div>

/* data-theme on <html> + localStorage persistence — handled by the preset */
Theme switcher variants
Toggle
Segmented
Icon
Settings row
Dark mode Light mode 
/* 1. JS helpers (add once to your project) */
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. Toggle variant HTML */
<button onclick="toggleDarkLight()">...</button>

/* 3. Segmented variant HTML */
<div class="sw-seg">
  <button onclick="applyTheme('dark')">Dark</button>
  <button onclick="applyTheme('light')">Light</button>
</div>

/* 4. CSS active states (pure CSS, no JS) */
html:not([data-theme="light"]) .dark-btn { background: var(--color-primary); }
html[data-theme="light"]       .light-btn { background: var(--color-primary); }
/* njx-alpine.js preset — zero helpers to write:
   <script defer src="https://cdn.jsdelivr.net/npm/njx-ui@1/js/njx-alpine.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script> */

/* 1. Toggle variant */
<button x-data="njxTheme" @click="toggle()">...</button>

/* 2. Segmented variant */
<div class="sw-seg" x-data="njxTheme">
  <button @click="set('dark')"  :class="{ active: t === 'dark' }">Dark</button>
  <button @click="set('light')" :class="{ active: t === 'light' }">Light</button>
</div>

/* 3. Icon / settings row — the same one-liners */
<button x-data="njxTheme" @click="set('purple')">Purple</button>

/* 4. CSS active states (pure CSS, no JS) */
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
Main colors
<!-- _base.css — main colors via var() -->
<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
Primary shades (100→900)
<!-- _base.css — shades --color-primary-100 ... --color-primary-900 -->

/* Lightest shade */
background: var(--color-primary-100);

/* Base (= --color-primary) */
color: var(--color-primary-500);

/* Darkest */
background: var(--color-primary-900);

/* Example: button hover darker than base */
.btn-primary:hover {
  background: var(--color-primary-600);
}

/* Example: light background with accent shade */
.highlight {
  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
Neutrals (50→900)
<!-- _base.css — neutral palette --color-neutral-50 ... 900 -->

/* Light background over card */
background: var(--color-neutral-50);

/* Mid gray — for icons, placeholders */
color: var(--color-neutral-500);

/* Dark background */
background: var(--color-neutral-900);

/* Practical examples */
border: 1px solid var(--color-neutral-300);
color: var(--color-neutral-600);   /* muted text */
background: var(--color-neutral-100); /* table zebra rows */
Accent shades (100→900)
100
200
300
400
500 ←base
600
700
800
900
Accent shades (100→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
Success shades (100→800)
color: var(--color-success-400);  /* base */
background: var(--color-success-100); /* pale green bg */
Error shades (100→800)
100
200
300
400
500 ←base
600
700
800
Error shades (100→800)
color: var(--color-error-500);   /* base */
background: var(--color-error-100);  /* pale red bg */
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
border-radius: var(--radius-sm);    /* 6px  — input, badge */
border-radius: var(--radius-md);    /* 12px — card, panel */
border-radius: var(--radius-lg);    /* 20px — modal, sheet */
border-radius: var(--radius-xl);    /* 30px — hero block */
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
Shadows
box-shadow: var(--shadow-sm);       /* subtle lift */
box-shadow: var(--shadow-md);       /* card hover */
box-shadow: var(--shadow-lg);       /* modal / dropdown */
box-shadow: var(--shadow-primary);  /* primary glow */
box-shadow: var(--shadow-glow);     /* light 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
Transitions
transition: all var(--ease-fast);  /* 0.15s — micro feedback */
transition: all var(--ease);       /* 0.30s — standard hover */
transition: all var(--ease-slow);  /* 0.50s — entrance / exit */

/* Example */
.btn { transition: background var(--ease-fast), transform var(--ease-fast); }
Z-index scale
--z-0 · 0
--z-1 · 1
--z-10 · 10
--z-50 · 50
--z-100 · 100
--z-modal · 1000
--z-00Base stacking context
--z-11Sticky headers
--z-1010Dropdowns · Menus
--z-5050Tooltips · Popovers
--z-100100Topbar · Navigation
--z-modal1000Modals · Dialogs
Z-index scale
z-index: var(--z-1);      /* sticky headers */
z-index: var(--z-10);     /* dropdowns */
z-index: var(--z-50);     /* tooltips, popovers */
z-index: var(--z-100);    /* topbar / navbar */
z-index: var(--z-modal);  /* modals, dialogs */
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
Responsive tokens — automatic scaling
/* No code needed — tokens scale automatically at breakpoints.
   Any component using var(--fs-base), var(--space-*), etc.
   will respond to viewport size changes without media queries.

   Override a token in your component for custom scaling: */
@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
Spacing scale
<!-- _base.css — spacing scale (4px step) -->

/* Small spacing */
gap: var(--space-2);         /* 8px */
padding: var(--space-3);     /* 12px */
margin: var(--space-4);      /* 16px */

/* Medium spacing */
padding: var(--space-6);     /* 24px */
gap: var(--space-8);         /* 32px */

/* Large spacing */
padding: var(--space-12);    /* 48px */
margin-bottom: var(--space-16);  /* 64px */

/* Combination */
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-6
col-4
col-4
col-4
col-8 · Main
col-4 · Sidebar
col-3
col-3
col-3
col-3
12-Column Flex Grid — .row + .col-*
<div class="row">
  <div class="col-6">50%</div>
  <div class="col-6">50%</div>
</div>
<div class="row">
  <div class="col-8">Main (66%)</div>
  <div class="col-4">Sidebar (33%)</div>
</div>
<div class="row">
  <div class="col-4">33%</div>
  <div class="col-4">33%</div>
  <div class="col-4">33%</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
CSS Grid — Fixed Columns .grid-col-1 … .grid-col-6
<!-- Fixed columns: 1–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-5 gap-4">...</div>
<div class="grid-col-6 gap-4">...</div>

<!-- Responsive: collapses on mobile (< 600px → 1 col)
     and on tablet (600–899px: 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
CSS Grid — Auto-fit Adaptive .grid-auto-*
<!-- 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
Sidebar
Main Content
.grid-sidebar-r — 1fr | 260px
Main Content
Sidebar
.grid-thirds — 1fr | 2fr | 1fr
Left
Main
Right
CSS Grid — Layout Presets
<!-- Layout presets -->
<div class="grid-sidebar-l gap-4">
  <aside>Sidebar (260px)</aside>
  <main>Main content</main>
</div>

<div class="grid-sidebar-r gap-4">
  <main>Main content</main>
  <aside>Sidebar (260px)</aside>
</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
Headings
<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
Text
<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
Colors and modifiers
<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 paragraph</p>
<span class="text-caption text-accent">ACCENT LABEL</span>
Tips / Callouts
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.
Tips / Callouts
<!-- 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 here.</div>
  </div>
</div>

<!-- Without icon -->
<div class="tip tip--warning">
  <div>
    <div class="tip-title">Warning</div>
    <div class="tip-body">This action cannot be undone.</div>
  </div>
</div>

<!-- All variants -->
<div class="tip tip--info">...</div>
<div class="tip tip--success">...</div>
<div class="tip tip--warning">...</div>
<div class="tip tip--danger">...</div>
<div class="tip tip--neutral">...</div>
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
HTML
/* Active roles — change here to restyle entire project */
--font-sans:    var(--font-inter);       /* body text */
--font-heading: var(--font-poppins);     /* headings  */
--font-mono:    var(--font-roboto-mono); /* code      */

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

/* Or apply a specific font directly */
font-family: var(--font-space);
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 sizes — fixed
font-size: var(--fs-sm);    /* 14px */
font-size: var(--fs-base);  /* 16px — default */
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 sizes — fluid clamp(min · vw · max)
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
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
Text lines
<div class="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-2/3"></span>
  <span class="skeleton skeleton-sm skeleton-1/2"></span>
</div>
Avatar + text (user row)
Avatar + text (user row)
<div class="skeleton-user">
  <span class="skeleton skeleton-circle" style="width:48px;height:48px"></span>
  <div class="skeleton-user-info">
    <span class="skeleton skeleton-md skeleton-2/3"></span>
    <span class="skeleton skeleton-sm skeleton-1/2"></span>
  </div>
</div>
Card skeleton
Card skeleton
<div class="skeleton-card">
  <span class="skeleton skeleton-card-img"></span>
  <div class="skeleton-card-body">
    <span class="skeleton skeleton-lg skeleton-3/4"></span>
    <span class="skeleton skeleton-md skeleton-full"></span>
    <span class="skeleton skeleton-md skeleton-2/3"></span>
    <span class="skeleton skeleton-xl skeleton-1/3"></span>
  </div>
</div>
List rows
List rows
<div class="skeleton-list">
  <div class="skeleton-list-item">
    <span class="skeleton skeleton-circle" style="width:40px;height:40px"></span>
    <div class="skeleton-list-item-info">
      <span class="skeleton skeleton-md skeleton-1/2"></span>
      <span class="skeleton skeleton-sm skeleton-3/4"></span>
    </div>
    <span class="skeleton skeleton-sm" style="width:52px"></span>
  </div>
  <!-- repeat rows -->
</div>
Table rows
Table rows
<div class="skeleton-table">
  <div class="skeleton-table-row">
    <span class="skeleton skeleton-circle" style="width:32px;height:32px"></span>
    <span class="skeleton skeleton-sm skeleton-1/4"></span>
    <span class="skeleton skeleton-sm skeleton-2/3"></span>
    <span class="skeleton skeleton-sm skeleton-1/3"></span>
    <span class="skeleton skeleton-sm skeleton-pill" style="width:60px"></span>
  </div>
  <!-- repeat rows -->
</div>
Button skeletons
Button skeletons
<span class="skeleton skeleton-xl skeleton-pill" style="width:100px"></span>
<span class="skeleton skeleton-xl skeleton-pill" style="width:130px"></span>
<span class="skeleton skeleton-xl skeleton-rounded" style="width:110px"></span>
<span class="skeleton skeleton-circle" style="width:48px;height:48px"></span>
Button soft variants
Button soft variants
<!-- .skeleton-soft dims to ~40% opacity (ghost/outline button) -->
<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
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
Form
<div class="skeleton-form">
  <div class="skeleton-form-row-inline">
    <div class="skeleton-form-row">
      <span class="skeleton skeleton-form-label"></span>
      <span class="skeleton skeleton-form-input"></span>
    </div>
    <div class="skeleton-form-row">
      <span class="skeleton skeleton-form-label"></span>
      <span class="skeleton skeleton-form-input"></span>
    </div>
  </div>
  <div class="skeleton-form-row">
    <span class="skeleton skeleton-form-label"></span>
    <span class="skeleton skeleton-form-input"></span>
  </div>
  <!-- submit / cancel / delete row -->
  <div style="display:flex;gap:10px;align-items:center">
    <span class="skeleton skeleton-xl skeleton-pill" style="width:110px"></span>
    <span class="skeleton skeleton-xl skeleton-pill skeleton-soft" style="width:90px"></span>
    <span class="skeleton skeleton-xl skeleton-pill skeleton-soft" style="width:90px;margin-left:auto"></span>
  </div>
</div>
Stats / Dashboard
Stats / Dashboard
<div class="skeleton-stats">
  <div class="skeleton-stat">
    <span class="skeleton skeleton-stat-icon"></span>
    <span class="skeleton skeleton-stat-value"></span>
    <span class="skeleton skeleton-stat-label"></span>
  </div>
  <!-- repeat per stat -->
</div>
Gallery grid
Gallery grid
<div class="skeleton-gallery">
  <span class="skeleton skeleton-gallery-item"></span>
  <span class="skeleton skeleton-gallery-item"></span>
  <span class="skeleton skeleton-gallery-item"></span>
  <span class="skeleton skeleton-gallery-item"></span>
  <span class="skeleton skeleton-gallery-item"></span>
  <span class="skeleton skeleton-gallery-item"></span>
</div>
Detail / Product
Detail / Product
<div class="skeleton-detail">
  <span class="skeleton skeleton-detail-img"></span>
  <div class="skeleton-detail-info">
    <span class="skeleton skeleton-lg skeleton-3/4"></span>
    <span class="skeleton skeleton-md skeleton-full"></span>
    <span class="skeleton skeleton-md skeleton-2/3"></span>
    <span class="skeleton skeleton-xl skeleton-1/3"></span>
  </div>
</div>
✨ 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
Fade animations — hover to replay
<!-- Fade-in from any direction (one-shot, play on load) -->
<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-out">Fade out</div>
<div class="animate-fade-in-out">Fade in/out loop</div>

<!-- Combine with delay + speed -->
<div class="animate-fade-in-up anim-delay-3 anim-slow">Later, slower</div>
Float & Bounce — hover to replay
.animate-float
.animate-float-big
.animate-bounce
.animate-bounce-in
.animate-scale-in
.animate-flip
.animate-float-x
Float & Bounce — hover to replay
<!-- Continuous float (loop) -->
<div class="animate-float">Gentle levitation</div>
<div class="animate-float-big">Wide arc float</div>
<div class="animate-float-x">Horizontal sway</div>
<div class="animate-bounce">Bouncing loop</div>

<!-- One-shot entrance animations -->
<div class="animate-bounce-in">Bounce in on load</div>
<div class="animate-scale-in">Scale from 0</div>
<div class="animate-flip">3D flip entrance</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
Spin & Rotate — hover to replay
<!-- Hover-triggered (play once on hover) -->
<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 swing</div>
<div class="animate-spin-rock">Rock / teeter</div>
<div class="animate-spin-tilt">Tilt 45°</div>
<div class="animate-spin-yoyo">Spin & return</div>

<!-- Loop (always spinning) -->
<svg class="animate-spin">...</svg>
<div class="animate-spin-slow">...</div>
<div class="animate-spin-fade">...</div>
<div class="animate-rotate">...</div>
Shake, Wiggle & Attention — click to trigger
.animate-shake
.animate-wiggle
.animate-tada
.animate-rubber
.animate-heartbeat
.animate-shake-y
.animate-buzz
<!-- One-shot: play once per trigger -->
<div class="animate-shake">Error state</div>   <!-- horizontal shake -->
<div class="animate-shake-y">Vertical shake</div>
<div class="animate-buzz">Buzz / jitter</div>
<div class="animate-tada">Celebration!</div>   <!-- scale + rotate party -->
<div class="animate-rubber">Stretch!</div>     <!-- rubberBand squish -->

<!-- Loop: continuous attention getter -->
<div class="animate-wiggle">Wiggling...</div>
<div class="animate-heartbeat">● Live</div>

<!-- JS replay trick -->
el.classList.remove("animate-shake");
void el.offsetWidth; // force reflow
el.classList.add("animate-shake");
<!-- Alpine replay: toggle the class off, re-add next tick -->
<div x-data="{ on: false, replay() { this.on = false; this.$nextTick(() => this.on = true) } }">
  <div :class="{ 'animate-shake': on }" @click="replay()">Error state</div>
  <button class="btn btn-sm" @click="replay()">Shake it</button>
</div>

<!-- Loop animations (wiggle / heartbeat) are plain classes — no JS at all -->
<div class="animate-wiggle">Wiggling...</div>
Pulse & Scale — hover to replay
.animate-pulse
.animate-scale
.animate-scale-big
.animate-border-pulse
.animate-shimmer
.animate-scale-out
.animate-ping
Pulse & Scale — hover to replay
<!-- Subtle scale pulse (loop) -->
<div class="animate-pulse">Scale 1→1.05</div>
<div class="animate-scale-big">Scale 1→1.1</div>
<div class="animate-ping">Ping / ring pulse</div>
<div class="animate-scale-out">Scale out + fade</div>

<!-- Border glow pulse -->
<div class="animate-border-pulse"></div>

<!-- Skeleton / loading shimmer -->
<div class="animate-shimmer" style="height:16px;border-radius:4px"></div>
<div class="animate-shimmer" style="height:12px;width:60%;border-radius:4px"></div>
Text effects — Neon glow
.animate-neon-primary
.animate-neon-accent
.animate-neon-success
.animate-neon-error
.animate-neon-warning
Text effects — Neon glow
<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
Text effects — Rainbow glow
<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
Text effects — Breathe glow
<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
Glow & Shadow effects
<!-- Pulsing glow (box-shadow based) -->
<div class="animate-glow">Primary color glow</div>
<div class="animate-glow-accent">Accent color glow</div>

<!-- Expanding border ring -->
<div class="animate-border-pulse"></div>

<!-- Static neon shadow utilities -->
<div class="shadow-neon">White neon glow</div>
<div class="shadow-neon-primary">Theme color 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
Border pulse & Rainbow sweep
<!-- Pulsing border ring — semantic colors -->
<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
Speed & Delay modifiers
<!-- Speed modifiers -->
<div class="animate-spin anim-fast">Very fast</div>
<div class="animate-spin anim-slow">Slow</div>
<div class="animate-spin anim-slower">Very slow</div>

<!-- Delay modifiers -->
<div class="animate-fade-in-up anim-delay-1">0.1s later</div>
<div class="animate-fade-in-up anim-delay-3">0.3s later</div>
<div class="animate-fade-in-up anim-delay-1s">1s later</div>

<!-- Pause / remove -->
<div class="animate-float anim-paused">Paused</div>
<div class="animate-float anim-none">No animation</div>

<!-- Staggered entrance (great for lists) -->
<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>
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
Fade — from any direction
<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
Zoom
<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
3D Flip
<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
Rotate, Blur, Bounce, Drop
<!-- Slight rotation + fade -->
<div class="scroll-rotate-in">Rotates into view</div>

<!-- Blur to sharp + fade -->
<div class="scroll-blur-in">Unblurs into view</div>

<!-- Springy entrance from below -->
<div class="scroll-bounce-in">Bounces in</div>

<!-- Drops from above with overshoot -->
<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
Stagger — children appear in sequence
<!-- Add .scroll-stagger to parent — children animate one by one -->
<div class="scroll-stagger" style="display:flex;gap:10px">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Works with any layout -->
<ul class="scroll-stagger">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>
🌈 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
🎨 Background Gradients — Main
<!-- _gradients.css — background gradients -->
<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
🌈 Background Gradients — Combined
<!-- _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
🌑 Background Gradients — Dark
<!-- _gradients.css — dark gradients -->
<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

✏️ Text Gradients
<!-- _gradients.css — gradient text (background-clip: 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
🔲 Gradient Borders
<!-- _gradients.css — gradient borders (via mask + padding) -->
<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
✨ Animated Gradients
<!-- _gradients.css — animated gradients (background-size: 200%) -->
<div class="gradient-animated">Bright animated</div>
<div class="gradient-animated-subtle">Soft animated</div>
🎭 Gradient Overlays
.gradient-overlay-dark
.gradient-overlay-primary
🎭 Gradient Overlays
<!-- _gradients.css — gradient overlays (::before pseudo) -->
<!-- Element must have position:relative -->
<div class="gradient-overlay-dark" style="position:relative">
  <img src="bg.jpg" />
  <div style="position:relative;z-index:1">Text above</div>
</div>
<div class="gradient-overlay-primary" style="position:relative">...</div>
🌀 Conic Gradients
.gradient-conic
.conic-warm
.conic-cool
🌀 Conic Gradients
<!-- _gradients.css — conic gradients -->
<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
🕸 Mesh Gradients
<!-- _gradients.css — mesh (multi-point radial gradients) -->
<div class="gradient-mesh">...</div>
<div class="gradient-mesh-warm">...</div>
<div class="gradient-mesh-cool">...</div>
💀 Shimmer / Skeleton Loader
💀 Shimmer / Skeleton Loader
<!-- .gradient-shimmer — animated skeleton loader -->
<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 — direction & radial
<!-- Utility classes with CSS vars --gradient-from / --gradient-to -->
<div class="gradient-horizontal" style="--gradient-from:#f9063f;--gradient-to:#667eea">...</div>
<div class="gradient-vertical" style="--gradient-from:#f9063f;--gradient-to:#667eea">...</div>
<div class="gradient-diagonal" style="--gradient-from:#f9063f;--gradient-to:#667eea">...</div>
<div class="gradient-radial" style="--gradient-from:#f9063f;--gradient-to:transparent">...</div>
🌫 Background Blocks
From _backgrounds.css. Muted section backdrops built from the palette: tints, fades, soft glows and subtle patterns. Apply to <section> or any wrapper.
Tints (bg-tint-*)
.bg-tint — neutral wash
.bg-tint-primary
.bg-tint-accent
.bg-tint-success
Tints (bg-tint-*)
<!-- Quiet solid washes with hairline borders — from _backgrounds.css -->
<section class="section bg-tint">…</section>            <!-- neutral, dark-secondary 45% -->
<section class="section bg-tint-primary">…</section>    <!-- primary 6% -->
<section class="section bg-tint-accent">…</section>     <!-- accent 6% -->
<section class="section bg-tint-success">…</section>    <!-- success 5% -->
Fades (bg-fade-*)
.bg-fade-down — dissolves downward
.bg-fade-up — dissolves upward
Fades (bg-fade-*)
<!-- Vertical washes that dissolve into the page -->
<section class="section bg-fade-down">…</section>  <!-- solid on top → transparent -->
<section class="section bg-fade-up">…</section>    <!-- transparent → solid on bottom -->
Soft Glows (bg-glow-*)
.bg-glow — primary + accent corners
.bg-glow-primary — pool from the top
.bg-glow-accent — pool from the bottom
Soft Glows (bg-glow-*)
<!-- Soft radial color pools (njX hero style, dimmed).
     ::before covers the block, children stay above it. -->
<section class="section bg-glow">…</section>          <!-- primary + accent corners -->
<section class="section bg-glow-primary">…</section>  <!-- primary pool from the top -->
<section class="section bg-glow-accent">…</section>   <!-- accent pool from the bottom -->

<!-- Wrap several sections to run one glow through all of them -->
<div class="bg-glow">
  <section class="section">…</section>
  <section class="section">…</section>
</div>
Patterns (bg-dots · bg-grid-lines)
.bg-dots — 22px dot grid
.bg-grid-lines — 40px line grid
Patterns (bg-dots · bg-grid-lines)
<!-- Barely-there dot and line grids -->
<section class="section bg-dots">…</section>        <!-- 22px dot grid -->
<section class="section bg-grid-lines">…</section>  <!-- 40px line grid -->
🎭 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)
📏 Scale Effects
<!-- _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
⬆️ Lift Effects (translateY)
<!-- _hovers.css: hover-lift-sm | hover-lift | hover-lift-lg | hover-lift-xl -->
<div class="card hover-lift-sm">...</div>   <!-- translateY(-2px) -->
<div class="card hover-lift">...</div>      <!-- translateY(-4px) -->
<div class="card hover-lift-lg">...</div>   <!-- translateY(-8px) -->
<div class="card hover-lift-xl">...</div>   <!-- translateY(-14px) -->
✨ Glow Effects (box-shadow)
💜
.hover-glow
💙
.hover-glow-accent
💚
.hover-glow-success
❤️
.hover-glow-error
🤍
.hover-glow-white
🔥
.hover-glow-intense
✨ Glow Effects (box-shadow)
<!-- hover-glow | hover-glow-accent | hover-glow-success | hover-glow-error | hover-glow-white | hover-glow-intense -->
<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
🌈 Brightness & Filter
<!-- _hovers.css: brightness & filter -->
<div class="card hover-bright">...</div>         <!-- brightness(1.15) -->
<div class="card hover-bright-strong">...</div>  <!-- brightness(1.3) -->
<div class="card hover-dim">...</div>           <!-- brightness(0.8) -->
<div class="card hover-grayscale">...</div>     <!-- grayscale(100%) -->
👁️ Opacity Effects
🌫️
.hover-opacity-sm
0.9
🌁
.hover-opacity
0.8
🌬️
.hover-opacity-lg
0.6
👻
.hover-fade
0.7 + shrink
👁️ Opacity Effects
<!-- _hovers.css: opacity effects -->
<div class="card hover-opacity-sm">...</div>  <!-- opacity: 0.85 -->
<div class="card hover-opacity">...</div>     <!-- opacity: 0.7 -->
<div class="card hover-opacity-lg">...</div>  <!-- opacity: 0.5 -->
<div class="card hover-fade">...</div>        <!-- opacity: 0.3 -->
🔲 Border Effects
⬜
.hover-border
primary
🔷
.hover-border-accent
accent
🟩
.hover-border-success
success
🌟
.hover-border-glow
border + glow
🔲 Border Effects
<!-- _hovers.css: border effects -->
<div class="card hover-border">...</div>         <!-- border primary -->
<div class="card hover-border-accent">...</div>  <!-- border accent -->
<div class="card hover-border-success">...</div> <!-- border success -->
<div class="card hover-border-glow">...</div>   <!-- border + glow -->
🔄 Rotate Effects
🔁
.hover-rotate
+5deg
🔃
.hover-rotate-neg
−5deg
🔽
.hover-rotate-180
180deg
🌀
.hover-rotate-360
full spin
🔄 Rotate Effects
<!-- _hovers.css: rotate effects -->
<div class="card hover-rotate">...</div>      <!-- rotate(3deg) -->
<div class="card hover-rotate-neg">...</div>  <!-- rotate(-3deg) -->
<div class="card hover-rotate-180">...</div> <!-- rotate(180deg) -->
<div class="card hover-rotate-360">...</div> <!-- rotate(360deg) -->
🃏 Card Combo Effects
.hover-card
.hover-card-glow
.hover-card-slide
.hover-mega
🃏 Card Combo Effects
<!-- Combo: hover-card (lift+border+shadow), hover-card-glow, hover-mega -->
<div class="card hover-card">...</div>
<div class="card hover-card-glow">...</div>
<div class="card hover-card-slide">...</div>
<div class="card hover-mega">...</div>

<!-- Can be combined -->
<div class="card hover-scale hover-glow">...</div>
🔘 Button Effects
🔘 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 requires position:relative + overflow:hidden -->
<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
✏️ Text & Link Effects
<!-- Underline slides left→right -->
<a class="hover-underline-animated" href="#">About</a>

<!-- Underline expands from center -->
<a class="hover-underline-center" href="#">Contact</a>

<!-- Strikethrough line on hover -->
<a class="hover-strikethrough" href="#">Old price</a>

<!-- Text color changes -->
<a class="hover-primary" href="#">Link</a>
<a class="hover-accent" href="#">Link</a>
🎨 Fill from Bottom
.hover-fill
fills with primary
.hover-fill-accent
fills with accent
.hover-fill-success
.hover-primary-bg
instant fill
🎨 Fill from Bottom
<!-- hover-fill — sliding fill from bottom -->
<div class="hover-fill">Fill Primary</div>
<div class="hover-fill hover-fill-accent">Fill Accent</div>
<div class="hover-fill hover-fill-success">Fill Success</div>

<!-- hover-primary-bg — instant color fill -->
<div class="hover-primary-bg">BG Fill</div>
<div class="hover-accent-bg">Accent BG</div>
<div class="hover-success-bg">Success BG</div>
<div class="hover-error-bg">Error 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
🔮 3D Tilt — hover to see perspective
<!-- tilt left -->
<div class="card hover-tilt">...</div>

<!-- tilt right -->
<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
✏️ Border Draw — lines animate in on hover
<!-- border lines draw top+bottom on hover -->
<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
🖼 Image Zoom (hover-zoom)
<!-- hover-zoom: overflow:hidden on parent, img scales inside -->
<div class="hover-zoom">
  <img src="photo.jpg" alt="">
</div>
<div class="hover-zoom-sm"><img ...></div>  <!-- scale(1.05) -->
<div class="hover-zoom-lg"><img ...></div>  <!-- scale(1.15) -->
<div class="hover-zoom-out"><img ...></div> <!-- scale(0.95) -->
🔬 Filter Effects
.hover-grayscale
gray→color
.hover-sepia
.hover-invert
.hover-bright-strong
.hover-dim
🔬 Filter Effects
<!-- Filter effects (great for images) -->
<img class="hover-grayscale" src="...">  <!-- starts gray, hover reveals color -->
<img class="hover-sepia" src="...">
<img class="hover-invert" src="...">
<img class="hover-bright-strong" src="..."> <!-- brightness(1.3) -->
<img class="hover-dim" src="...">           <!-- brightness(0.85) -->
<img class="hover-blur" src="...">          <!-- blur(2px) on hover -->
💬 Hover Tips
Pure CSS tooltips via data-tip attribute — works on any element. No JS, no wrappers.
Positions
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
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 element
<!-- 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"
     style="width:40px;height:40px;background:var(--color-primary)">
</div>
🔲 Buttons
All variants from _buttons.css. Base: .btn + variant.
HTML
<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
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
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
Soft / Tinted variants
<!-- Soft: tinted bg + colored text + colored border -->
<!-- Great for secondary actions, tags, status chips -->
<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>

<!-- Combine with sizes -->
<button class="btn btn-soft-primary btn-sm">Small soft</button>
<button class="btn btn-soft-error btn-xs">xs soft</button>
Link buttons — Filled
Primary Accent Success Error Warning Dark Light
Link buttons — Filled
<a href="#" class="link-btn link-btn-primary">Primary</a>
<a href="#" class="link-btn link-btn-accent">Accent</a>
<a href="#" class="link-btn link-btn-success">Success</a>
<a href="#" class="link-btn link-btn-error">Error</a>
<a href="#" class="link-btn link-btn-warning">Warning</a>
<a href="#" class="link-btn link-btn-dark">Dark</a>
<a href="#" class="link-btn link-btn-light">Light</a>
Link buttons — Outline
Primary Accent Success Error Warning Dark Light
Link buttons — Outline
<a href="#" class="link-btn link-btn-outline-primary">Primary</a>
<a href="#" class="link-btn link-btn-outline-accent">Accent</a>
<a href="#" class="link-btn link-btn-outline-success">Success</a>
<a href="#" class="link-btn link-btn-outline-error">Error</a>
<a href="#" class="link-btn link-btn-outline-warning">Warning</a>
<a href="#" class="link-btn link-btn-outline-dark">Dark</a>
<a href="#" class="link-btn link-btn-outline-light">Light</a>
Link buttons — Ghost
Primary Accent Success Error Warning Dark Light
Link buttons — Ghost
<a href="#" class="link-btn link-btn-ghost-primary">Primary</a>
<a href="#" class="link-btn link-btn-ghost-accent">Accent</a>
<a href="#" class="link-btn link-btn-ghost-success">Success</a>
<a href="#" class="link-btn link-btn-ghost-error">Error</a>
<a href="#" class="link-btn link-btn-ghost-warning">Warning</a>
<a href="#" class="link-btn link-btn-ghost-dark">Dark</a>
<a href="#" class="link-btn link-btn-ghost-light">Light</a>
Link buttons — Sizes & Arrow
Small filled Small ghost Default With arrow Filled arrow
Link buttons — Sizes & Arrow
<!-- Small -->
<a href="#" class="link-btn link-btn-primary link-btn-sm">Small</a>

<!-- With arrow -->
<a href="#" class="link-btn link-arrow">With arrow</a>
<a href="#" class="link-btn link-btn-primary link-arrow">Filled + arrow</a>
Sizes
Sizes
<button class="btn btn-primary btn-xs">XS</button>
<button class="btn btn-primary btn-sm">SM</button>
<button class="btn btn-primary btn-md">MD (default)</button>
<button class="btn btn-primary btn-lg">LG</button>
<button class="btn btn-primary btn-xl">XL</button>
Gradient & Glow
Gradient & Glow
<!-- _buttons.css — gradient & glow variants -->
<button class="btn btn-glow-primary">Glow Primary</button>
<button class="btn btn-glow-accent">Glow Accent</button>
<button class="btn btn-glow-success">Glow Success</button>
<button class="btn btn-glow-error">Glow Error</button>
<button class="btn btn-glow-warning">Glow Warning</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>
<button class="btn btn-gradient btn-gradient-error-warning">Error Warning</button>
Outline Gradient — border & text shimmer
Outline Gradient — border & text shimmer
<!-- Gradient border + gradient text, no extra markup -->
<!-- Single colour 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-success">Success</button>
<button class="btn btn-outline-gradient btn-outline-gradient-error">Error</button>
<button class="btn btn-outline-gradient btn-outline-gradient-warning">Warning</button>

<!-- Two-colour shimmer -->
<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
Gradient Hover
<!-- Animated gradient flow — hover speeds it up -->
<button class="btn btn-gradient-hover btn-gradient-hover-primary">Primary</button>
<button class="btn btn-gradient-hover btn-gradient-hover-accent">Accent</button>
<button class="btn btn-gradient-hover btn-gradient-hover-success">Success</button>
<button class="btn btn-gradient-hover btn-gradient-hover-error">Error</button>
<button class="btn btn-gradient-hover btn-gradient-hover-warning">Warning</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
Shine
<!-- Shifting gradient + light sweep on hover -->
<button class="btn btn-shine btn-shine-primary">Primary</button>
<button class="btn btn-shine btn-shine-accent">Accent</button>
<button class="btn btn-shine btn-shine-success">Success</button>
<button class="btn btn-shine btn-shine-error">Error</button>
<button class="btn btn-shine btn-shine-warning">Warning</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
Aura — glow halo blooms on hover
<!-- Aura: solid gradient bg + blurred halo ::before that 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
Rainbow & Animated BG
<button class="btn btn-rainbow">Rainbow</button>
<button class="btn btn-rainbow-pastel">Pastel</button>
<button class="btn btn-animated-bg">Animated</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
Glow Hover — rainbow border blooms on hover
<!-- Dark bg button — coloured halo border appears 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
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>
<button class="btn btn-accent btn-icon btn-lg"><svg ...></svg></button>
<!-- Square (no pill radius) -->
<button class="btn btn-ghost btn-icon btn-square"><svg ...></svg></button>
<!-- Icon + Text -->
<button class="btn btn-success">
  <svg ...></svg>
  Download
</button>
Button Group
Button Group
<!-- .btn-group wraps any .btn children -->
<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>

<!-- Toggle group -->
<div class="btn-group">
  <button class="btn btn-outline btn-sm">Day</button>
  <button class="btn btn-outline btn-sm">Week</button>
  <button class="btn btn-outline btn-sm">Month</button>
</div>
Loading & Disabled states
Loading & Disabled states
<!-- .btn-loading — hides text, shows spinner -->
<button class="btn btn-primary btn-loading">Loading</button>
<button class="btn btn-accent btn-loading btn-sm">Loading</button>

<!-- Disabled states -->
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-error is-disabled">is-disabled</button>
Glass & Neon
Glass & Neon
<!-- Glass: frosted backdrop blur -->
<button class="btn btn-glass">Glass</button>

<!-- Neon: glowing border + text shadow (uses --color-primary) -->
<button class="btn btn-neon">Neon</button>
<button class="btn btn-neon btn-lg">Neon Large</button>

<!-- Glow primary: solid with expanding shadow -->
<button class="btn btn-glow-primary">Glow Primary</button>
3D Depth — click to feel the press
3D Depth — click to feel the press
<!-- 3D depth: thick bottom border sinks on :active -->
<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-dark">Dark 3D</button>

<!-- Combine with size modifiers -->
<button class="btn btn-3d btn-lg">Large 3D</button>
<button class="btn btn-3d btn-sm">Small 3D</button>
Badge buttons
5 12 3 99+
Badge buttons
<!-- Badge wrap: relative parent + absolute badge -->
<span class="btn-badge-wrap">
  <button class="btn btn-primary btn-sm">Inbox</button>
  <span class="btn-count">5</span>
</span>

<!-- Dot indicator (no number) -->
<span class="btn-badge-wrap">
  <button class="btn btn-ghost btn-icon btn-sm">
    <svg .../>
  </button>
  <span class="btn-dot"></span>
</span>

<!-- Custom badge color -->
<span class="btn-badge-wrap">
  <button class="btn btn-dark">Notifications</button>
  <span class="btn-count" style="background:#f59e0b">99+</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
Variants
<!-- _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
Color Glow Cards — card-bg-*
<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.
Read more
🎧
Product
Pro Headphones X1
Studio-quality sound with active noise cancellation.
$249
👤
Team
Alex Johnson
Senior Product Designer with 8 years of experience.
Design UX
🖼 Card with image on top (card-media)
<div class="card-media">
  <!-- image or colored div -->
  <img class="card-media-img" src="photo.jpg" alt="">
  <div class="card-media-body">
    <div class="card-media-label">Category</div>
    <div class="card-media-title">Card Title</div>
    <div class="card-media-text">Description text goes here.</div>
    <a class="btn btn-primary btn-sm">Action</a>
  </div>
</div>
🌄 Full cover image card (card-cover)
Travel
Mountain Peak
Hover to zoom the background image
Lifestyle
City Nights
Gradient overlay with content at bottom
Nature
Ocean Depths
Use any image as background
🌄 Full cover image card (card-cover)
<div class="card-cover">
  <!-- background image via inline style or background-image -->
  <div class="card-cover-bg" style="background-image:url(photo.jpg)"></div>
  <div class="card-cover-body">
    <div class="card-cover-label">Category</div>
    <div class="card-cover-title">Title</div>
    <div class="card-cover-text">Text</div>
  </div>
</div>
🌈 Gradient cards
🔮
Purple
card-gradient-purple
🌸
Sunset
card-gradient-sunset
🌊
Ocean
card-gradient-ocean
🍀
Emerald
card-gradient-emerald
🔥
Fire
card-gradient-fire
🌈 Gradient cards
<div class="card-gradient-purple">Purple gradient</div>
<div class="card-gradient-sunset">Sunset</div>
<div class="card-gradient-ocean">Ocean</div>
<div class="card-gradient-emerald">Emerald</div>
<div class="card-gradient-fire">Fire</div>
🌑 Shadow variants
card-shadow-sm
Subtle shadow
card-shadow-md
Medium shadow
card-shadow-lg
Large shadow
card-shadow-primary
Primary glow
card-shadow-accent
Accent glow
🌑 Shadow variants
<div class="card-shadow-sm">Subtle</div>
<div class="card-shadow-md">Medium</div>
<div class="card-shadow-lg">Large</div>
<div class="card-shadow-primary">Primary glow</div>
<div class="card-shadow-accent">Accent glow</div>
↔️ Horizontal card (card-horizontal)
🚀
Launch your project
Deploy in seconds with our one-click pipeline and automated CI/CD workflow.
🔒
Enterprise security
SOC2 certified with end-to-end encryption and advanced access controls.
📊
Real-time analytics
Monitor your KPIs with live dashboards and customizable reports.
↔️ Horizontal card (card-horizontal)
<div class="card-horizontal">
  <div class="card-h-img">🚀</div>
  <div class="card-h-body">
    <div class="card-h-title">Title</div>
    <div class="card-h-text">Description text here.</div>
  </div>
</div>
📈 Stat / Metric cards (card-stat)
📦
12,480
Total orders
▲ 14.2% this week
💰
$84.2k
Revenue
▲ 8.5% vs last month
👥
3,291
Active users
▼ 2.1% this week
⭐
4.87
Avg. rating
▲ 0.3 vs last quarter
📈 Stat / Metric cards (card-stat)
<div class="card-stat">
  <div class="card-stat-icon">📦</div>
  <div class="card-stat-value">12,480</div>
  <div class="card-stat-label">Total orders</div>
  <div class="card-stat-trend up">▲ 14.2% this week</div>
</div>
<!-- trend classes: .up (green) / .down (red) -->
✨ Gradient Hover Cards — card-gradient-hover-*
Primary
Hover to reveal the gradient overlay.
card-gradient-hover-primary
Accent
Smooth color wash on hover.
card-gradient-hover-accent
Success
Green tint for positive actions.
card-gradient-hover-success
Fire
Hot gradient for promotions.
card-gradient-hover-fire
Ocean
Deep blue for analytics panels.
card-gradient-hover-ocean
Sunset
Warm glow for landing pages.
card-gradient-hover-sunset
Aurora
Cool cyan-purple for dashboards.
card-gradient-hover-aurora
Error
Red wash for alerts and warnings.
card-gradient-hover-error
✨ Gradient Hover Cards — card-gradient-hover-*
<!-- Gradient appears smoothly on hover -->
<div class="card-gradient-hover card-gradient-hover-primary">...</div>
<div class="card-gradient-hover card-gradient-hover-accent">...</div>
<div class="card-gradient-hover card-gradient-hover-fire">...</div>
<div class="card-gradient-hover card-gradient-hover-ocean">...</div>
<div class="card-gradient-hover card-gradient-hover-sunset">...</div>
<div class="card-gradient-hover card-gradient-hover-aurora">...</div>
💎 Shine Cards — card-shine-*
Primary
Hover for light sweep.
card-shine-primary
Accent
Bold blue-to-purple.
card-shine-accent
Fire
Red-orange flame sweep.
card-shine-fire
Ocean
Blue depth with shine.
card-shine-ocean
Sunset
Warm orange-pink glow.
card-shine-sunset
Aurora
Cyan-purple northern lights.
card-shine-aurora
Cosmic
Deep violet-magenta space.
card-shine-cosmic
💎 Shine Cards — card-shine-*
<!-- Gradient background + shine sweep on hover -->
<div class="card-shine card-shine-primary">...</div>
<div class="card-shine card-shine-fire">...</div>
<div class="card-shine card-shine-ocean">...</div>
<div class="card-shine card-shine-sunset">...</div>
<div class="card-shine card-shine-aurora">...</div>
<div class="card-shine card-shine-cosmic">...</div>
🔲 Outline Gradient Cards — card-outline-gradient-*
Primary
Animated gradient border.
card-outline-gradient-primary
Accent
Rotating blue-purple outline.
card-outline-gradient-accent
Fire
Red-orange hot border.
card-outline-gradient-fire
Ocean
Blue depth outline animation.
card-outline-gradient-ocean
Sunset
Warm gradient frame.
card-outline-gradient-sunset
Aurora
Cyan-purple flowing border.
card-outline-gradient-aurora
Cosmic
Violet-magenta cosmic ring.
card-outline-gradient-cosmic
🔲 Outline Gradient Cards — card-outline-gradient-*
<!-- Animated gradient border, transparent background -->
<div class="card-outline-gradient card-outline-gradient-primary">...</div>
<div class="card-outline-gradient card-outline-gradient-fire">...</div>
<div class="card-outline-gradient card-outline-gradient-ocean">...</div>
<div class="card-outline-gradient card-outline-gradient-sunset">...</div>
<div class="card-outline-gradient card-outline-gradient-aurora">...</div>
<div class="card-outline-gradient card-outline-gradient-cosmic">...</div>
🌟 Aura Cards — card-aura-*
Primary
Hover — glow blooms behind the card.
card-aura-primary
Sunset
Orange-pink aura for promos.
card-aura-sunset
Aurora
Cyan-violet northern glow.
card-aura-aurora
Cosmic
Deep violet-magenta pulse.
card-aura-cosmic
Gold
Premium amber glow for pricing.
card-aura-gold
Ocean
Aqua depth for dashboards.
card-aura-ocean
🌟 Aura Cards — card-aura-*
<!-- Hover triggers glowing aura behind the card -->
<div class="card-aura card-aura-primary">...</div>
<div class="card-aura card-aura-sunset">...</div>
<div class="card-aura card-aura-aurora">...</div>
<div class="card-aura card-aura-cosmic">...</div>
<div class="card-aura card-aura-gold">...</div>
<div class="card-aura card-aura-ocean">...</div>
Bulma card
Card title

Card content. Description text.

Save Edit Delete
Bulma card
<div class="card-bulma">
  <div class="card-header">
    <div class="card-header-title">Title</div>
  </div>
  <div class="card-content">
    <p>Card content</p>
  </div>
  <div class="card-footer">
    <a class="card-footer-item">Save</a>
    <a class="card-footer-item text-error">Delete</a>
  </div>
</div>
🏷 Tags & Badges
From _tags.css. Tags, badges, dots.
Tags (outline)
default tag-primary tag-accent tag-success tag-error tag-warning tag-white
Tags (outline)
<!-- _tags.css — outline tags -->
<span class="tag">default</span>
<span class="tag tag-primary">primary</span>
<span class="tag tag-accent">accent</span>
<span class="tag tag-success">success</span>
<span class="tag tag-error">error</span>
<span class="tag tag-warning">warning</span>
<span class="tag tag-white">white</span>
Tags (filled)
filled-primary filled-accent filled-success filled-error filled-warning filled-dark
Tags (filled)
<!-- _tags.css — outline variants -->
<span class="tag">default</span>
<span class="tag tag-primary">primary</span>
<span class="tag tag-accent">accent</span>
<span class="tag tag-success">success</span>
<span class="tag tag-error">error</span>
<span class="tag tag-warning">warning</span>

<!-- filled variants -->
<span class="tag tag-filled-primary">filled-primary</span>
<span class="tag tag-filled-success">filled-success</span>
<span class="tag tag-filled-dark">filled-dark</span>
Badges & Dots
5 99 OK ! 3   
Badges & Dots
<!-- Badges -->
<span class="badge">5</span>
<span class="badge badge-primary">99</span>
<span class="badge badge-success">OK</span>
<span class="badge badge-error">!</span>
<span class="badge badge-warning">3</span>

<!-- Dots (status indicators) -->
<span class="dot"></span>
<span class="dot dot-primary"></span>
<span class="dot dot-success"></span>
<span class="dot dot-error"></span>
<span class="dot dot-online"></span>
<span class="dot dot-offline"></span>
📋 Forms & Inputs
Classes .inp, .field, .inp-success, .inp-error, .float-field, .inp-wrap. All via CSS variables.
Base sizes
Base sizes
<!-- _form.css — sizes -->
<input class="inp inp-sm" type="text" placeholder="Small">
<input class="inp" type="text" placeholder="Default">
<input class="inp inp-lg" type="text" placeholder="Large">
States — primary / success / error / disabled
Primary (focused)
Success
✓ Value is correct
Error
✕ Enter a valid email
Disabled
States — primary / success / error / disabled
<!-- inp-primary | inp-success | inp-error | disabled -->
<div class="field">
  <div class="field-label">Email</div>
  <input class="inp inp-success" type="text" value="[email protected]">
  <div class="field-success-msg">✓ Value is correct</div>
</div>

<div class="field">
  <div class="field-label">Password</div>
  <input class="inp inp-error" type="text" value="wrong">
  <div class="field-error-msg">✕ Minimum 8 characters</div>
</div>

<input class="inp" type="text" placeholder="Disabled" disabled>
Input with icon
🔍
📧 ✓
🔒 👁
Input with icon
<!-- .inp-wrap is required for icons -->
<div class="inp-wrap">
  <span class="inp-icon-left">🔍</span>
  <input class="inp" type="text" placeholder="Search...">
</div>

<!-- icon on the right -->
<div class="inp-wrap">
  <span class="inp-icon-left">🔒</span>
  <input class="inp inp-suffix" type="password" placeholder="Password">
  <span class="inp-icon-right">👁</span>
</div>
Float label
Float label
<!-- placeholder=" " is required (space) -->
<div class="float-field">
  <input class="inp" type="text" placeholder=" " id="f1">
  <label class="float-label" for="f1">Username</label>
</div>

<div class="float-field">
  <input class="inp inp-success" type="email" placeholder=" " id="f2" value="[email protected]">
  <label class="float-label" for="f2">Email</label>
</div>
Glass / dark variants
Glass / dark variants
<!-- .inp-glass — glassmorphism variant (for gradient backgrounds) -->
<input class="inp inp-glass" type="text" placeholder="Glass input">

<select class="inp inp-glass inp-select">
  <option>Choose option</option>
  <option>Aviator</option>
</select>

<textarea class="inp inp-glass inp-area" placeholder="Textarea..."></textarea>
Checkbox & Toggle
Checkbox & Toggle
<!-- Checkboxes: .check + is-success | is-error -->
<label class="check"><input type="checkbox" checked> Primary</label>
<label class="check is-success"><input type="checkbox" checked> Success</label>
<label class="check is-error"><input type="checkbox"> Error</label>

<!-- Toggle: toggle-track + toggle-label are required -->
<label class="toggle">
  <input type="checkbox" checked>
  <span class="toggle-track"></span>
  <span class="toggle-label">Toggle ON</span>
</label>
📝 Enhanced Form Cards — Login / Register / States
🔐 Login Form
Email
✉️
Password
🔒

No account? Create account

📋 Registration
First name
Last name
Phone
📱
Date of birth
📝 Enhanced Form Cards — Login / Register / States
<!-- form-card is-primary | is-success | is-error | is-warning -->
<div class="form-card is-primary">
  <div class="form-card-title">🔐 Sign In</div>

  <div class="field">
    <div class="field-label">Email</div>
    <div class="inp-wrap">
      <span class="inp-icon-left">✉️</span>
      <input class="inp inp-primary" type="email" placeholder="[email protected]">
    </div>
  </div>

  <button class="btn btn-primary" style="width:100%">Login</button>
</div>
✅ Form States & Input Groups
✅ Validation States
Successful validation
✓ This email is available
Validation error
✕ Minimum 6 characters
Floating Label
🔗 Field Groups
🔍 Search
🌐 Website
https://
💰 Amount
$
🏷️ Promo code
✅ Form States & Input Groups
<!-- Input Group: flex + overflow:hidden -->
<div style="display:flex;border-radius:12px;overflow:hidden;border:2px solid var(--lib-comp-brd)">
  <input type="text" class="inp" placeholder="Search..." style="flex:1;border:none;border-radius:0">
  <button class="btn btn-primary" style="border-radius:0">🔍 Find</button>
</div>

<!-- with prefix -->
<div style="display:flex;border-radius:12px;overflow:hidden;border:2px solid var(--lib-comp-brd)">
  <span style="padding:0 16px;display:flex;align-items:center;background:var(--color-dark-secondary);color:var(--color-primary);font-weight:700">https://</span>
  <input type="url" class="inp" placeholder="yoursite.com" style="flex:1;border:none;border-radius:0">
</div>
☑️ Checkboxes, Radios & Toggles
☑️ Option Selection
Interests
Payment method
🎛 Toggle Switches
Notification Settings
Privacy
☑️ Checkboxes, Radios & Toggles
<!-- Checkbox -->
<label class="check">
  <input type="checkbox" checked>
  <span>💻 Development</span>
</label>

<!-- Radio -->
<label class="check">
  <input type="radio" name="plan" checked>
  <span>💳 Bank card</span>
</label>
<label class="check">
  <input type="radio" name="plan">
  <span>🏦 Transfer</span>
</label>

<!-- Toggle -->
<label class="toggle">
  <input type="checkbox" checked>
  <span class="toggle-track"></span>
  <span class="toggle-label">Notifications</span>
</label>
📊 Progress
From _notifications.css.
progress (native)
progress is-accent
progress is-success
progress is-large
progress-bar (custom)
progress-bar gradient animated
HTML
<!-- progress native: is-primary | is-accent | is-success | is-large -->
<progress class="progress is-primary" value="70" max="100"></progress>
<progress class="progress is-success is-large" value="90" max="100"></progress>

<!-- progress-bar custom: with animation -->
<div class="progress-bar">
  <div class="progress-bar-fill" style="width:65%"></div>
</div>

<!-- gradient + animation -->
<div class="progress-bar">
  <div class="progress-bar-fill is-gradient is-animated" style="width:80%"></div>
</div>
📋 Table
From _table.css.
Name Email Role Status
Alex [email protected] Admin Active
Maria [email protected] User Pending
Ivan [email protected] Editor Banned
Olga [email protected] User Active
HTML
<!-- _table.css: is-striped | is-hoverable | is-bordered + table-container -->
<div class="table-container">
  <table class="table is-striped is-hoverable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alex</td>
        <td>[email protected]</td>
        <td><span class="tag tag-success">Active</span></td>
      </tr>
      <tr class="is-selected">
        <td>Ivan</td>
        <td>[email protected]</td>
        <td><span class="tag tag-error">Banned</span></td>
      </tr>
    </tbody>
  </table>
</div>
📄 Pagination
From _breadcrumb.css.
← Back 1 2 3 … 10 Forward →
HTML
<!-- pagination: pagination-prev | pagination-item | pagination-item.is-current | pagination-ellipsis | pagination-next -->
<a class="pagination-prev">← Back</a>
<span class="pagination-item">1</span>
<span class="pagination-item is-current">2</span>
<span class="pagination-item">3</span>
<span class="pagination-ellipsis">…</span>
<span class="pagination-item">10</span>
<a class="pagination-next">Forward →</a>
🗃 Panel
List panel component — filterable, selectable, with tabs, badges and actions. From _breadcrumb.css. Color variants: is-primary is-success is-warning is-danger.
Color variants
Primary
⭐ Dashboard 📁 Projects ⚙️ Settings
Success
✅ Deployed 📦 Packages 🔗 Links
Warning
⚠️ Pending 🕐 Queued 🔄 In Progress
Danger
❌ Errors 🚫 Blocked 🗑️ Deleted
Color variants
<div class="panel is-primary">
  <div class="panel-heading">Title</div>
  <a class="panel-block is-active"><span class="panel-icon">⭐</span> Item</a>
  <a class="panel-block"><span class="panel-icon">📁</span> Item 2</a>
</div>
With tabs
Repository
All Public Private Forks
⭐ njx-css-ui 📁 marksheet 📄 blog 🔧 config
With tabs
<div class="panel is-primary">
  <div class="panel-heading">Repository</div>
  <div class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
  </div>
  <a class="panel-block is-active">item</a>
</div>
With search filter
Team members
👤 Alice Johnson Admin 👤 Bob Smith Member 👤 Carol White Member
With search filter
<div class="panel">
  <div class="panel-heading">Team members</div>
  <div class="panel-search">
    <input type="text" placeholder="Search…">
  </div>
  <a class="panel-block">
    Alice <span class="panel-block-badge">Admin</span>
  </a>
  <div class="panel-footer">...</div>
</div>
Selectable — checkboxes
Features
Selectable — checkboxes
<div class="panel">
  <div class="panel-heading">Features</div>
  <label class="panel-block">
    <input type="checkbox" checked> Dark mode
    <span class="panel-block-meta">enabled</span>
  </label>
  <div class="panel-footer">
    <button class="btn btn-sm btn-primary">Save</button>
  </div>
</div>
With notification badges
Notifications
All Mentions Updates
💬 Messages 12 🔔 Alerts 3 ⭐ Starred 24 📦 Releases 0
With notification badges
<a class="panel-block">
  <span class="panel-icon">💬</span> Messages
  <span class="panel-block-badge">12</span>
</a>
With avatars
Contributors
AJ Alice Johnson 32 commits BS Bob Smith 18 commits CW Carol White 9 commits
3 contributors total
With avatars
<a class="panel-block">
  <span class="panel-avatar">AJ</span>
  Alice Johnson
  <span class="panel-block-meta">32 commits</span>
</a>
🚀 Hero Blocks
Ready hero sections built from btn, tag, card, typography and layout utilities.
Hero — Product Launch
Public beta

Build faster with less CSS

A polished first screen for SaaS, open-source projects and product launches.

Start free View GitHub
npm install npm i njx-ui
9 themes 0 deps 308 KB CSS first
Hero — Product Launch
<section class="section">
  <div class="container grid grid-2 gap-8 items-center">
    <div>
      <span class="tag tag-primary">Public beta</span>
      <h1 class="title-hero fluid mt-4">Build faster with less CSS</h1>
      <p class="text-lead text-muted mt-4">A polished first screen for SaaS, open-source projects and product launches.</p>
      <div class="flex gap-3 mt-6">
        <a class="btn btn-primary btn-lg" href="#">Start free</a>
        <a class="btn btn-outline btn-lg" href="#">View GitHub</a>
      </div>
    </div>
    <div class="card-gradient p-6">npm i njx-ui</div>
  </div>
</section>
Hero — Docs / Developer Tool
Documentation

Components developers can copy today.

A compact docs hero with search, shortcuts and a clear primary path.

Buttons50+ variants Cards30+ layouts FormsInputs & selects
Hero — Docs / Developer Tool
<section class="section">
  <div class="container grid grid-2 gap-6 items-center">
    <div>
      <span class="tag tag-accent">Documentation</span>
      <h1 class="title-xl mt-4">Components developers can copy today.</h1>
      <p class="text-muted mt-3">A compact docs hero with search and shortcuts.</p>
      <input class="input mt-5" placeholder="buttons, cards, forms...">
    </div>
    <div class="grid gap-3">
      <a class="card-glass p-4" href="#">Buttons</a>
      <a class="card-glass p-4" href="#">Cards</a>
      <a class="card-glass p-4" href="#">Forms</a>
    </div>
  </div>
</section>
▣ Page Cards
Full page card sections for features, blog grids, case studies and product galleries.
Feature Cards Page
Feature grid

Everything a launch page needs.

A full-width cards section with hierarchy, CTA and reusable card styles.

01

Hero blocks

Strong first screens with CTA and proof points.

Explore →
02

Cards

Feature, pricing, dashboard and content cards.

Explore →
03

Forms

Inputs, contact blocks and newsletter capture.

Explore →
Feature Cards Page
<section class="section">
  <div class="container">
    <div class="text-center">
      <span class="tag tag-primary">Feature grid</span>
      <h2 class="title-lg mt-3">Everything a launch page needs.</h2>
      <p class="text-muted">A full-width cards section with hierarchy and CTA.</p>
    </div>
    <div class="grid grid-3 gap-5 mt-8">
      <article class="card-aura card-aura-primary p-5">...</article>
      <article class="card-aura card-aura-aurora p-5">...</article>
      <article class="card-aura card-aura-gold p-5">...</article>
    </div>
  </div>
</section>
Article / Showcase Cards Page
Guide Build a landing page in 30 minutes Read →
Demo Alpine recipes for interactive components Open →
Release New gradient, cards and CTA sections Details →
Article / Showcase Cards Page
<section class="section">
  <div class="container grid grid-2 gap-6">
    <aside class="card-gradient p-6">...</aside>
    <div class="grid gap-4">
      <article class="card-glass p-4">...</article>
      <article class="card-glass p-4">...</article>
      <article class="card-glass p-4">...</article>
    </div>
  </div>
</section>
🔲 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)
Containers (container-*)
<!-- _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 (padding variants)
<!-- 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)
v2.0 is live
Launch your product
with one CDN link
.section-banner — full-height opening screen (min-height: 100dvh, background cover)
Get started → See examples
Section Banner (full-height hero)
<!-- .section-banner: full-screen hero (min-height: 100dvh, bg cover) -->
<section class="section-banner" style="background-image: url(hero.jpg)">
  <div class="container text-center">
    <span class="tag tag-primary">v2.0 is live</span>
    <h1 class="title-hero fluid mt-4">Launch your product<br>with one CDN link</h1>
    <p class="text-lead text-muted mt-4">A full-height opening screen: background image or gradient, headline, actions.</p>
    <div class="flex justify-center gap-3 mt-6">
      <a class="btn btn-gradient btn-lg hover-lift" href="#">Get started →</a>
      <a class="btn btn-outline btn-lg" href="#">See examples</a>
    </div>
  </div>
</section>
Ready Page Block — SaaS Landing
New release

Ship your next product page before lunch.

Hero, feature cards, pricing and CTA blocks built from njX UI primitives.

Get started View docs
Conversion lift 32% after moving to focused page sections
01 Fast setup

Drop one stylesheet and compose sections.

02 Theme ready

Works with all 9 built-in color themes.

03 No runtime

CSS first blocks for static and Astro pages.

Ready Page Block — SaaS Landing
<section class="section">
  <div class="container">
    <nav class="flex-center-between">
      <strong>LaunchKit</strong>
      <div class="flex gap-3">
        <a class="link" href="#">Features</a>
        <a class="link" href="#">Pricing</a>
        <a class="btn btn-primary btn-sm" href="#">Start free</a>
      </div>
    </nav>

    <div class="grid grid-2 gap-8 items-center mt-8">
      <div>
        <span class="tag tag-primary">New release</span>
        <h1 class="title-hero fluid mt-4">Ship your next product page before lunch.</h1>
        <p class="text-lead text-muted mt-4">Hero, feature cards, pricing and CTA blocks built from njX UI primitives.</p>
        <div class="flex gap-3 mt-6">
          <a class="btn btn-primary btn-lg" href="#">Get started</a>
          <a class="btn btn-outline btn-lg" href="#">View docs</a>
        </div>
      </div>
      <div class="card-gradient p-6">...</div>
    </div>
  </div>
</section>
Ready Page Block — App Dashboard
Live

Revenue overview

MRR $42.8k
Trials 318
Churn risk 2.4%
Acme Inc.$8,400
Northwind$5,920
Bluefin$3,180
Ready Page Block — App Dashboard
<section class="section">
  <div class="container grid grid-2 gap-6">
    <aside class="card-dark p-5">
      <strong>Orbit CRM</strong>
      <a class="link" href="#">Overview</a>
      <a class="link" href="#">Pipeline</a>
      <a class="link" href="#">Reports</a>
    </aside>

    <main class="items-wrapper-col gap-5">
      <header class="flex-center-between">
        <div>
          <span class="tag tag-success">Live</span>
          <h2 class="title-md">Revenue overview</h2>
        </div>
        <button class="btn btn-primary btn-sm">Export</button>
      </header>

      <div class="grid grid-3 gap-4">
        <article class="card-bg-primary">...</article>
        <article class="card-bg-success">...</article>
        <article class="card-bg-warning">...</article>
      </div>
    </main>
  </div>
</section>
Ready Page Block — Pricing + Contact
Simple plans

Start small. Upgrade when needed.

Pricing, trust notes and a contact form in one ready page composition.

Starter $0

Docs, prototypes and quick pages.

Pro $19

Teams that ship multiple marketing pages.

Open source MIT

Fork, customize and build with the library.

Ready Page Block — Pricing + Contact
<section class="section">
  <div class="container">
    <div class="text-center">
      <span class="tag tag-accent">Simple plans</span>
      <h2 class="title-lg mt-3">Start small. Upgrade when needed.</h2>
      <p class="text-muted">Pricing, trust notes and a contact form in one ready page composition.</p>
    </div>

    <div class="grid grid-3 gap-5 mt-8">
      <article class="card-bordered p-5">...</article>
      <article class="card-glow p-5">...</article>
      <article class="card-bordered p-5">...</article>
    </div>

    <form class="card-glass flex gap-3 mt-6">
      <input class="input" placeholder="Email address">
      <button class="btn btn-primary">Request demo</button>
    </form>
  </div>
</section>
Wrappers & Lists
.items-wrapper-col (flex column)
Item 1
Item 2
.list-items-row (flex row)
Item A
Item B
Item C
Wrappers & Lists
<div class="items-wrapper-col">...</div>
<div class="list-items-row">...</div>
Social List — Default (Icon Buttons)
Social List — Default (Icon Buttons)
<ul class="social-list">
  <li><a href="#" aria-label="GitHub"><svg ...></svg></a></li>
  <li><a href="#" aria-label="Twitter"><svg ...></svg></a></li>
  ...
</ul>
Social List — Glass Card
Social List — Glass Card
<ul class="social-list social-list-glass">...</ul>
Social List — Pills (Icon + Label)
Social List — Pills (Icon + Label)
<ul class="social-list social-list-pills">
  <li><a href="#"><svg ...></svg> GitHub</a></li>
</ul>
Social List — Colored Hover (Brand Colors)
Social List — Colored Hover (Brand Colors)
<ul class="social-list social-list-colored">
  <li><a href="#" data-net="github">...</a></li>
  <li><a href="#" data-net="twitter">...</a></li>
</ul>
Social List — Minimal / Ghost
Social List — Minimal / Ghost
<ul class="social-list social-list-minimal">...</ul>
Social List — Vertical Stack
Social List — Vertical Stack
<ul class="social-list social-list-vertical">...</ul>
Social List — Outlined
Social List — Outlined
<ul class="social-list social-list-outlined">...</ul>
Background Support
.section.bg (with background)
.bg (utility class)
Background Support
<section class="section bg" style="background-image: url(...)">...</section>
Wrapper & Agent classes
.wrapper — container with position: relative and z-index: 1
.agent — for elements with max-width: 100%
Wrapper & Agent classes
<div class="wrapper">...</div>
<img class="agent" src="...">
🔗 Social List
From _social.css. Flexible social icon links — 6 variants with hover effects, brand colors, pills, glass and more.
Default (Icon Buttons)
Default (Icon Buttons)
<ul class="social-list">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Twitter">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Instagram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  </a></li>
  <li><a href="#" aria-label="YouTube">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
  </a></li>
  <li><a href="#" aria-label="LinkedIn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
  </a></li>
</ul>
Glass Card
Glass Card
<ul class="social-list social-list-glass">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Instagram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  </a></li>
  <li><a href="#" aria-label="YouTube">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
  </a></li>
</ul>
Pills (Icon + Label)
Pills (Icon + Label)
<ul class="social-list social-list-pills">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
    GitHub
  </a></li>
  <li><a href="#" aria-label="Twitter">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    Twitter
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
    Telegram
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
    Discord
  </a></li>
  <li><a href="#" aria-label="LinkedIn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
    LinkedIn
  </a></li>
</ul>
Colored Hover (Brand Colors)
Colored Hover (Brand Colors)
<ul class="social-list social-list-colored">
  <li><a href="#" aria-label="GitHub" data-net="github">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Twitter" data-net="twitter">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Instagram" data-net="instagram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  </a></li>
  <li><a href="#" aria-label="YouTube" data-net="youtube">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Discord" data-net="discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Telegram" data-net="telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
  </a></li>
  <li><a href="#" aria-label="LinkedIn" data-net="linkedin">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
  </a></li>
  <li><a href="#" aria-label="TikTok" data-net="tiktok">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.76a4.85 4.85 0 01-1.01-.07z"/></svg>
  </a></li>
</ul>
Minimal / Ghost
Minimal / Ghost
<ul class="social-list social-list-minimal">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Twitter">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Instagram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
  </a></li>
</ul>
Vertical Stack
Vertical Stack
<ul class="social-list social-list-vertical">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
    GitHub
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
    Telegram
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
    Discord
  </a></li>
  <li><a href="#" aria-label="LinkedIn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
    LinkedIn
  </a></li>
  <li><a href="#" aria-label="YouTube">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
    YouTube
  </a></li>
</ul>
Outlined
Outlined
<ul class="social-list social-list-outlined">
  <li><a href="#" aria-label="GitHub">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Twitter">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Discord">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Telegram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
  </a></li>
  <li><a href="#" aria-label="Instagram">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
  </a></li>
  <li><a href="#" aria-label="YouTube">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
  </a></li>
</ul>
🌐 Social Blocks
Ready social proof, community and follow sections.
Social Proof Strip
Social Proof Strip
<section class="section">
  <div class="container">
    <span class="tag tag-success">Trusted by builders</span>
    <h2 class="title-lg mt-3">A small CSS toolkit with real demos.</h2>
    <div class="grid grid-3 gap-4 mt-6">
      <article class="card-glass p-5"><strong>40+</strong><span>CodePen demos</span></article>
      <article class="card-glass p-5"><strong>9</strong><span>themes</span></article>
      <article class="card-glass p-5"><strong>0</strong><span>dependencies</span></article>
    </div>
  </div>
</section>
Community Follow Block
Community Follow Block
<section class="section">
  <div class="container card-glass p-6">
    <span class="tag tag-primary">Community</span>
    <h2 class="title-lg mt-3">Follow the project and ship with us.</h2>
    <p class="text-muted">Use this block for footer pages, launch pages and docs home screens.</p>
    <ul class="social-list social-list-pills mt-6">
      <li><a href="#" data-net="github">GitHub</a></li>
      <li><a href="#" data-net="twitter">X / Twitter</a></li>
      <li><a href="#" data-net="telegram">Telegram</a></li>
    </ul>
  </div>
</section>
⚡ CTA Blocks
Ready call-to-action sections for product pages, docs and newsletters.
Gradient CTA
● Free & open source

Start your landing tonight.

One CDN link, nine themes, zero build steps. Copy a block from the docs and ship.

MIT license · no sign-up · 44 KB gzip

Get njX UI → Browse examples
Gradient CTA
<!-- End-of-page CTA: gradient card, pulse label, primary + ghost action -->
<section class="section">
  <div class="container card-gradient p-8">
    <span class="tag animate-pulse">● Free & open source</span>
    <h2 class="title-lg mt-3">Start your landing tonight.</h2>
    <p>One CDN link, nine themes, zero build steps. Copy a block from the docs and ship.</p>
    <div class="flex gap-3 mt-6">
      <a class="btn btn-light btn-lg hover-lift" href="#">Get njX UI →</a>
      <a class="btn btn-outline-white btn-lg" href="#">Browse examples</a>
    </div>
    <p class="text-sm mt-4" style="opacity:.75">MIT license · no sign-up · 44 KB gzip</p>
  </div>
</section>
CTA with Metrics

Why wait? The numbers are in.

44 KB
gzipped
9
themes
0
build steps
Start building →
CTA with Metrics
<!-- CTA with metrics: outline-gradient card + text-gradient numbers -->
<section class="section">
  <div class="container card-outline-gradient p-8 text-center">
    <h2 class="title-lg">Why wait? The numbers are in.</h2>
    <div class="grid-col-3 gap-6 mt-6">
      <div>
        <div class="text-3xl font-bold text-gradient-primary">44 KB</div>
        <div class="text-sm text-muted">gzipped</div>
      </div>
      <div>
        <div class="text-3xl font-bold text-gradient-primary">9</div>
        <div class="text-sm text-muted">themes</div>
      </div>
      <div>
        <div class="text-3xl font-bold text-gradient-primary">0</div>
        <div class="text-sm text-muted">build steps</div>
      </div>
    </div>
    <a class="btn btn-shine btn-xl mt-6" href="#">Start building →</a>
  </div>
</section>
Newsletter CTA
✉ Updates

New components, straight to your inbox.

One email a month: new blocks, themes and examples. No spam, unsubscribe anytime.

Newsletter CTA
<!-- Newsletter CTA: glass card + inline form -->
<section class="section">
  <div class="container card-glass p-6">
    <span class="tag tag-accent">✉ Updates</span>
    <h2 class="title-md mt-3">New components, straight to your inbox.</h2>
    <p class="text-muted">One email a month: new blocks, themes and examples. No spam, unsubscribe anytime.</p>
    <form class="flex gap-3 mt-5">
      <input class="input" type="email" placeholder="[email protected]">
      <button class="btn btn-primary hover-glow">Subscribe</button>
    </form>
  </div>
</section>
✉ Contact Blocks
Ready contact sections with cards, forms and support links.
Contact Page Section
Support

Tell us what you are building.

A full contact page block with channel cards and a focused support form.

EmailPrivate support GitHubIssues and bugs TelegramQuick ping
Contact Page Section
<section class="section">
  <div class="container grid grid-2 gap-6">
    <div>
      <span class="tag tag-primary">Support</span>
      <h2 class="title-lg mt-3">Tell us what you are building.</h2>
      <p class="text-muted">A full contact page block with channel cards and a focused form.</p>
      <div class="grid grid-3 gap-3 mt-5">
        <a class="card-glass p-4" href="#">Email</a>
        <a class="card-glass p-4" href="#">GitHub</a>
        <a class="card-glass p-4" href="#">Telegram</a>
      </div>
    </div>
    <form class="card-glass p-5 grid gap-3">
      <input class="input" type="email" placeholder="[email protected]">
      <textarea class="input" rows="5" placeholder="Message"></textarea>
      <button class="btn btn-primary">Send message</button>
    </form>
  </div>
</section>
Compact Support Card
Need help?

Open an issue or send a message.

Use this block at the bottom of docs and product pages.

Email support GitHub issue
Compact Support Card
<section class="section">
  <div class="container card-gradient p-6">
    <span class="tag">Need help?</span>
    <h2 class="title-md mt-3">Open an issue or send a message.</h2>
    <div class="flex gap-3 mt-5">
      <a class="btn btn-light" href="#">Email support</a>
      <a class="btn btn-outline-white" href="#">GitHub issue</a>
    </div>
  </div>
</section>
🗂 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>
    <button class="tab-btn" onclick="tabSwitch(this)">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel is-active">Content 1</div>
    <div class="tab-panel">Content 2</div>
    <div class="tab-panel">Content 3</div>
  </div>
</div>

<script>
function tabSwitch(btn) {
  const wrap = btn.closest(".tab-wrap");
  wrap.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("is-active"));
  wrap.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("is-active"));
  btn.classList.add("is-active");
  const idx = [...btn.parentElement.children].indexOf(btn);
  wrap.querySelectorAll(".tab-panel")[idx].classList.add("is-active");
}
</script>
<!-- Alpine drives the same .is-active classes — no tabSwitch() needed -->
<div class="tab-wrap" x-data="{ tab: 0 }">
  <div class="tab-nav">
    <button class="tab-btn" :class="{ 'is-active': tab === 0 }" @click="tab = 0">Tab 1</button>
    <button class="tab-btn" :class="{ 'is-active': tab === 1 }" @click="tab = 1">Tab 2</button>
    <button class="tab-btn" :class="{ 'is-active': tab === 2 }" @click="tab = 2">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel" :class="{ 'is-active': tab === 0 }">Content 1</div>
    <div class="tab-panel" :class="{ 'is-active': tab === 1 }">Content 2</div>
    <div class="tab-panel" :class="{ 'is-active': tab === 2 }">Content 3</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>
<!-- njx-alpine.js preset: x-data="njxTabs" — select(i) / isActive(i), no tabSwitch() -->
<div class="tab-wrap" x-data="njxTabs">
  <div class="tab-nav tab-nav-pills">
    <button class="tab-btn" :class="{ 'is-active': isActive(0) }" @click="select(0)">Daily</button>
    <button class="tab-btn" :class="{ 'is-active': isActive(1) }" @click="select(1)">Weekly</button>
    <button class="tab-btn" :class="{ 'is-active': isActive(2) }" @click="select(2)">Monthly</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel" :class="{ 'is-active': isActive(0) }">Stats for today</div>
    <div class="tab-panel" :class="{ 'is-active': isActive(1) }">Stats for this week</div>
    <div class="tab-panel" :class="{ 'is-active': isActive(2) }">Stats for this month</div>
  </div>
</div>
Boxed
<div class="tab-wrap">...</div>
.tab-nav { display: flex; }
function tabSwitch(btn) { ... }
Boxed
<div class="tab-nav tab-nav-boxed">...</div>
<div class="tab-content tab-content-bordered">...</div>
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>
<!-- njx-alpine.js preset: x-data="njxTabs" — same .tab-nav-card classes -->
<div class="tab-wrap" x-data="njxTabs">
  <div class="tab-nav tab-nav-card">
    <button class="tab-btn" :class="{ 'is-active': isActive(0) }" @click="select(0)">index.html</button>
    <button class="tab-btn" :class="{ 'is-active': isActive(1) }" @click="select(1)">style.css</button>
  </div>
  <div class="tab-content tab-content-bordered">
    <div class="tab-panel" :class="{ 'is-active': isActive(0) }">...</div>
    <div class="tab-panel" :class="{ 'is-active': isActive(1) }">...</div>
  </div>
</div>
Badges + full width
4 unread messages in your inbox.
12 sent messages.
1 draft saved.
<!-- Full-width tabs with badges -->
<div class="tab-nav is-full">
  <button class="tab-btn is-active" onclick="tabSwitch(this)">
    Inbox <span class="tab-badge">4</span>
  </button>
  <button class="tab-btn" onclick="tabSwitch(this)">
    Sent <span class="tab-badge">12</span>
  </button>
</div>
<!-- njx-alpine.js preset: x-data="njxTabs" -->
<div class="tab-wrap" x-data="njxTabs">
  <div class="tab-nav is-full">
    <button class="tab-btn" :class="{ 'is-active': isActive(0) }" @click="select(0)">
      Inbox <span class="tab-badge">4</span>
    </button>
    <button class="tab-btn" :class="{ 'is-active': isActive(1) }" @click="select(1)">
      Sent <span class="tab-badge">12</span>
    </button>
  </div>
  <div class="tab-content">
    <div class="tab-panel" :class="{ 'is-active': isActive(0) }">4 unread messages.</div>
    <div class="tab-panel" :class="{ 'is-active': isActive(1) }">12 sent messages.</div>
  </div>
</div>
Sizes — sm / default / lg
Sizes — sm / default / lg
<div class="tab-nav tab-nav-sm">...</div>
<div class="tab-nav">...</div>
<div class="tab-nav tab-nav-lg">...</div>
📂 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.
Basic — details API
<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>
<!-- Same .is-open class — Alpine just toggles it. njx.js not needed. -->
<div class="collapse" x-data="{ open: false }" :class="{ 'is-open': open }">
  <div class="collapse-header" @click="open = !open">
    Title <span class="collapse-icon"></span>
  </div>
  <div class="collapse-body">Content</div>
</div>

<!-- Exclusive accordion — one item open at a time -->
<div class="accordion" x-data="{ active: null }">
  <div class="collapse" :class="{ 'is-open': active === 1 }">
    <div class="collapse-header" @click="active = active === 1 ? null : 1">
      Section A <span class="collapse-icon"></span>
    </div>
    <div class="collapse-body">Content A</div>
  </div>
  <div class="collapse" :class="{ 'is-open': active === 2 }">
    <div class="collapse-header" @click="active = active === 2 ? null : 2">
      Section B <span class="collapse-icon"></span>
    </div>
    <div class="collapse-body">Content B</div>
  </div>
</div>
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.
Variants — plus / ghost / primary
<!-- Plus/minus icon -->
<details class="collapse collapse-plus">...</details>

<!-- Ghost (transparent) -->
<details class="collapse collapse-ghost">...</details>

<!-- Primary accent -->
<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.
Accordion wrapper
<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.
Accordion Flush — connected
<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>
💬 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
<!-- Overlay is automatically colored via :has() -->
<!-- Variants: is-primary | is-success | is-error | is-warning | is-info -->

<div id="my-modal" class="lib-modal-overlay"
     onclick="if(event.target===this)closeModal(this)">

  <div class="lib-modal-box is-success">
    <button class="lib-modal-close"
      onclick="closeModal(document.getElementById('my-modal'))">✕</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">Great!</button>
      <button class="btn btn-ghost btn-sm">Close</button>
    </div>
  </div>

</div>

<script>
function openModal(id) {
  document.getElementById(id).classList.add("open");
  document.body.style.overflow = "hidden";
}
function closeModal(el) {
  el.classList.remove("open");
  document.body.style.overflow = "";
}
// close on Escape
document.addEventListener("keydown", e => {
  if (e.key === "Escape")
    document.querySelectorAll(".lib-modal-overlay.open")
      .forEach(closeModal);
});
</script>
<!-- One Alpine root drives every variant: open = 'success' | 'error' | … -->
<!-- Single modal? Take the njx-alpine.js preset: x-data="njxModal" (show/hide, Escape, scroll lock) -->
<div x-data="{ open: null }" @keydown.escape.window="open = null">
  <button class="btn btn-success btn-sm" @click="open = 'success'">✅ Success</button>
  <button class="btn btn-danger btn-sm"  @click="open = 'error'">❌ Error</button>

  <div class="lib-modal-overlay" :class="{ open: open === 'success' }" @click.self="open = null">
    <div class="lib-modal-box is-success">
      <button class="lib-modal-close" @click="open = null">✕</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" @click="open = null">Great!</button>
        <button class="btn btn-ghost btn-sm" @click="open = null">Close</button>
      </div>
    </div>
  </div>

  <div class="lib-modal-overlay" :class="{ open: open === 'error' }" @click.self="open = null">
    <div class="lib-modal-box is-error">...</div>
  </div>
</div>
Size variants — is-sm · is-lg
Size variants — is-sm · is-lg
<!-- Small: max-width 340px -->
<div class="lib-modal-box is-sm">...</div>

<!-- Large: max-width 620px -->
<div class="lib-modal-box is-lg">...</div>

<!-- Combine size + color -->
<div class="lib-modal-box is-sm is-primary">...</div>
Stacked actions — lib-modal-actions.is-column
Stacked actions — lib-modal-actions.is-column
<!-- Add .is-column to stack buttons vertically -->
<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
Modal with form
<!-- Place any HTML inside .lib-modal-box -->
<div class="lib-modal-box is-primary">
  <div class="lib-modal-icon-wrap">📝</div>
  <div class="lib-modal-title">Send a message</div>
  <div class="lib-modal-text">Fill in the details below.</div>
  <!-- form fields -->
  <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
<!-- Trigger button -->
<button onclick="openModal('my-modal')">Open</button>

<!-- Modal (place anywhere in body) -->
<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"
      onclick="closeModal(document.getElementById('my-modal'))">✕</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>

<script>
function openModal(id) {
  document.getElementById(id).classList.add("open");
  document.body.style.overflow = "hidden";
}
function closeModal(el) {
  el.classList.remove("open");
  document.body.style.overflow = "";
}
document.addEventListener("keydown", e => {
  if (e.key === "Escape")
    document.querySelectorAll(".lib-modal-overlay.open").forEach(closeModal);
});
</script>
<!-- Same .open class on the overlay — Alpine replaces openModal/closeModal -->
<div x-data="{ open: false }" @keydown.escape.window="open = false">
  <button class="btn btn-primary" @click="open = true">Open</button>

  <div class="lib-modal-overlay" :class="{ open }" @click.self="open = false">
    <div class="lib-modal-box is-primary">
      <button class="lib-modal-close" @click="open = false">✕</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" @click="open = false">Confirm</button>
        <button class="btn btn-ghost btn-sm" @click="open = false">Cancel</button>
      </div>
    </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 
<!-- ── Color variants — add modifier to .lib-modal-box ── -->
<!-- default | is-primary | is-success | is-error | is-warning | is-info -->

<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" onclick="closeModal(document.getElementById('modal-1'))">✕</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>

<!-- ── Size variants ── -->
<div class="lib-modal-box is-sm">...</div>   <!-- max-width: 340px -->
<div class="lib-modal-box is-lg">...</div>   <!-- max-width: 620px -->

<!-- ── Stacked actions ── -->
<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>
    <button class="btn btn-ghost btn-sm">Option C</button>
  </div>
</div>

<!-- ── Form inside ── -->
<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" type="submit">Save</button>
      <button class="btn btn-ghost btn-sm" type="button">Cancel</button>
    </div>
  </form>
</div>

<script>
function openModal(id) {
  document.getElementById(id).classList.add("open");
  document.body.style.overflow = "hidden";
}
function closeModal(el) {
  el.classList.remove("open");
  document.body.style.overflow = "";
}
document.addEventListener("keydown", e => {
  if (e.key === "Escape")
    document.querySelectorAll(".lib-modal-overlay.open").forEach(closeModal);
});
</script>
<!-- njx-alpine.js preset: x-data="njxModal" — show()/hide(), Escape,
     backdrop click and body scroll lock handled by the preset -->
<div x-data="njxModal">
  <div class="card hover-lift" @click="show()">
    <div class="lib-modal-title">Default modal</div>
    <div class="text-sm text-muted">Click to preview</div>
  </div>

  <div class="lib-modal-overlay">
    <div class="lib-modal-box">
      <button class="lib-modal-close" @click="hide()">✕</button>
      <div class="lib-modal-icon-wrap">⬜</div>
      <div class="lib-modal-title">Default</div>
      <div class="lib-modal-text">Neutral styling, no color tint.</div>
      <div class="lib-modal-actions">
        <button class="btn btn-primary btn-sm" @click="hide()">Confirm</button>
        <button class="btn btn-ghost btn-sm" @click="hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Color / size variants — the same .lib-modal-box modifiers -->
<div class="lib-modal-box is-success">...</div>
<div class="lib-modal-box is-sm is-primary">...</div>
🔔 Notifications & Messages
Toasts · Bell dropdown · Inline alerts · Message inbox — from _notifications.css.
Toast Notifications — click to trigger · auto-dismiss · stackable
<!-- Toast: success | error | warning | info -->
<!-- Slides in from bottom-right, auto-dismisses, stackable -->
<button onclick="njxFireToast(type, title, message)">Show Toast</button>

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");
<!-- Same .lib-toast classes — Alpine manages the stack, showToast() not needed -->
<div x-data="{
  toasts: [], id: 0,
  fire(msg, type) {
    const t = { id: ++this.id, msg, type };
    this.toasts.push(t);
    setTimeout(() => this.dismiss(t.id), 2200);
  },
  dismiss(id) { this.toasts = this.toasts.filter(t => t.id !== id); }
}">
  <button class="btn btn-primary btn-sm" @click="fire('Saved!', 'success')">Success</button>
  <button class="btn btn-ghost btn-sm" @click="fire('Error occurred', 'error')">Error</button>

  <div id="lib-toast-container">
    <template x-for="t in toasts" :key="t.id">
      <div class="lib-toast" :class="'lib-toast-' + t.type"
           @click="dismiss(t.id)" x-text="t.msg"></div>
    </template>
  </div>
</div>
Notification Bell — click to open · mark as read · badge counter
Bell
Notifications  4 new
A
alex_dev pushed to main branch
2 min ago · GitHub
✓
CI/CD Build #142 passed successfully
8 min ago · Pipeline
M
maria_ui commented on your PR #38
15 min ago · GitHub
⚠
Alert CPU usage above 85% on prod
22 min ago · Monitor
K
kai_codes started following you
1 hour ago
📦
npm [email protected] published successfully
3 hours ago
View all notifications →
3
2
!

Click any icon to trigger a toast 

<div style="position:relative" id="njxBellWrap">
  <button class="njx-bell-btn" onclick="njxToggleBell()">🔔
    <span class="njx-bell-badge" id="njxBellBadge">4</span>
  </button>
  <div class="njx-notif-dropdown" id="njxBellDropdown">
    <div class="njx-notif-item unread" onclick="njxReadNotif(this)">
      <div class="njx-notif-avatar">A</div>
      <div class="njx-notif-body">
        <div class="njx-notif-text"><b>alex_dev</b> pushed to main</div>
        <div class="njx-notif-time">2 min ago</div>
      </div>
    </div>
  </div>
</div>

/* njxToggleBell()   — open/close dropdown
   njxReadNotif(el)  — mark single item read
   njxMarkAllRead()  — mark all read, clear badge */
<!-- Alpine state in the markup: items[], computed unread, outside click -->
<div style="position:relative" @click.outside="open = false" x-data="{
  open: false,
  items: [
    { id: 1, who: 'alex_dev', text: 'pushed to main',      time: '2 min ago', read: false },
    { id: 2, who: 'mona',     text: 'commented on PR #38', time: '1 h ago',   read: false },
  ],
  get unread() { return this.items.filter(n => !n.read).length },
}">
  <button class="njx-bell-btn" @click="open = !open">🔔
    <span class="njx-bell-badge" x-show="unread > 0" x-text="unread"></span>
  </button>
  <div class="njx-notif-dropdown" :class="{ open }">
    <template x-for="n in items" :key="n.id">
      <div class="njx-notif-item" :class="{ unread: !n.read }" @click="n.read = true">
        <div class="njx-notif-avatar" x-text="n.who[0].toUpperCase()"></div>
        <div class="njx-notif-body">
          <div class="njx-notif-text"><b x-text="n.who"></b> <span x-text="n.text"></span></div>
          <div class="njx-notif-time" x-text="n.time"></div>
        </div>
      </div>
    </template>
    <button class="njx-inbox-action-btn" @click="items.forEach(n => n.read = true)">✓✓ Mark all read</button>
  </div>
</div>
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. 
<!-- njx-ni-success | njx-ni-error | njx-ni-warning | njx-ni-info | njx-ni-dark -->
<div class="njx-notif-inline njx-ni-success">
  <span class="njx-notif-inline-icon">✅</span>
  <div class="njx-notif-inline-body">
    <div class="njx-notif-inline-title">Deployment successful</div>
    <div class="njx-notif-inline-msg">Version 1.0.6 is live.</div>
  </div>
  <button class="njx-notif-inline-close" onclick="njxDismissAlert(this)">×</button>
</div>

/* njxDismissAlert(btn) — collapses parent alert smoothly */
/* njxRestoreAlerts()   — restores all dismissed alerts   */
<!-- x-show + x-collapse-style transition — njxDismissAlert() not needed -->
<div class="njx-notif-inline njx-ni-success" x-data="{ show: true }" x-show="show"
     x-transition.duration.250ms>
  <span class="njx-notif-inline-icon">✅</span>
  <div class="njx-notif-inline-body">
    <div class="njx-notif-inline-title">Deployment successful</div>
    <div class="njx-notif-inline-msg">Version 1.0.6 is live.</div>
  </div>
  <button class="njx-notif-inline-close" @click="show = false">×</button>
</div>
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
View all messages → 
<div class="njx-inbox">
  <div class="njx-inbox-header">
    <div class="njx-inbox-title">Messages <span class="badge badge-primary" id="njxMsgBadge">3</span></div>
    <div class="njx-inbox-actions">
      <button class="njx-inbox-action-btn" onclick="njxMarkAllMsgs()">✓✓</button>
    </div>
  </div>
  <div class="njx-msg-item unread" onclick="njxReadMsg(this)">
    <div class="njx-msg-avatar">A</div>
    <div class="njx-msg-content">
      <div class="njx-msg-top">
        <span class="njx-msg-name">alex_dev</span>
        <span class="njx-msg-time">2m</span>
      </div>
      <div class="njx-msg-subject">Re: PR #38</div>
      <div class="njx-msg-preview">Looks great! One question...</div>
    </div>
    <div class="njx-msg-dot"></div>
  </div>
</div>

/* njxReadMsg(el)    — mark message read, update badge
   njxMarkAllMsgs() — mark all read */
<!-- messages[] in x-data — badge and dots are just bindings -->
<div class="njx-inbox" x-data="{
  msgs: [
    { id: 1, who: 'alex_dev', subj: 'Re: PR #38',     preview: 'Looks great! One question...', time: '2m',  read: false },
    { id: 2, who: 'mona',     subj: 'Design review',  preview: 'Updated the mockups —',        time: '1h',  read: false },
  ],
  get unread() { return this.msgs.filter(m => !m.read).length },
}">
  <div class="njx-inbox-header">
    <div class="njx-inbox-title">Messages
      <span class="badge badge-primary" x-show="unread > 0" x-text="unread"></span>
    </div>
    <div class="njx-inbox-actions">
      <button class="njx-inbox-action-btn" @click="msgs.forEach(m => m.read = true)">✓✓</button>
    </div>
  </div>
  <template x-for="m in msgs" :key="m.id">
    <div class="njx-msg-item" :class="{ unread: !m.read }" @click="m.read = true">
      <div class="njx-msg-avatar" x-text="m.who[0].toUpperCase()"></div>
      <div class="njx-msg-content">
        <div class="njx-msg-top">
          <span class="njx-msg-name" x-text="m.who"></span>
          <span class="njx-msg-time" x-text="m.time"></span>
        </div>
        <div class="njx-msg-subject" x-text="m.subj"></div>
        <div class="njx-msg-preview" x-text="m.preview"></div>
      </div>
      <div class="njx-msg-dot" x-show="!m.read"></div>
    </div>
  </template>
</div>
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>
<!-- Dismiss via x-show — no inline style juggling -->
<div class="notification is-success" x-data="{ show: true }" x-show="show" x-transition.duration.200ms>
  <button class="delete is-small" @click="show = false"></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.
Messages
<!-- message: is-primary | is-success | is-warning | is-danger -->
<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
Loaders
<!-- 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>
Download njX UI
Choose your build type
CDN
Select components 26 of 26
·
Foundation always included · 7 files
Components 20 files
Visual 3 files
JavaScript
Complete Package
Every file, every variant — one ZIP.
2 files
9 themes
MIT license
CSS
style.min.css Full UI — 30+ components, 9 themes, utility classes
308 KB · 44 KB gz
JS
njx.js JS helper — tabs, modals, toasts, carousels
14 KB
style.min.css