Dark-first UI Component Framework With RTL Support – NYX

Category: Frameworks , Javascript | July 16, 2026
0 Comment
AuthorNYX
Last UpdateJuly 16, 2026
LicenseMIT
Tags
Views24 views
OfficialGo to website
Live DemoDownload
Dark-first UI Component Framework With RTL Support – NYX

NYX is a dark-first CSS and vanilla JavaScript component framework that provides the layouts, controls, feedback patterns, overlays, data views, and motion effects required by modern web design.

Its Luminous Depth design system combines glowing accents, translucent surfaces, gradients, and deep shadows across more than 100 components.

The framework uses CSS to handle the design tokens, responsive grid, utilities, typography, and component styling.

The optional browser runtime (nyx.js) adds advanced behavior for modals, drawers, tabs, accordions, command palettes, carousels, toasts, sortable tables, date controls, and other interactive components.

Features:

  • Dark-first design system with a built-in light theme.
  • 100+ layout, navigation, form, data, commerce, and feedback components.
  • Responsive 12-column grid with flex, spacing, alignment, and display utilities.
  • Vanilla JavaScript runtime with no framework dependency.
  • Declarative data-nyx-* controls for UI behavior.
  • CSS custom properties for colors, typography, spacing, radii, shadows, and glow.
  • Violet, emerald, rose, and amber accent presets.
  • RTL layouts, Arabic font tokens, regional widgets, and date conversion utilities.
  • Overlay focus handling, ARIA dialog semantics, live regions, and reduced-motion support.
  • Full bundle and individual component CSS files.

How To Use It:

Installation

Load the stylesheet in the document head and place the main script at the end of the document or use the defer attribute.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/nyx-css@1/nyx.min.css"
>
<script
  src="https://cdn.jsdelivr.net/npm/nyx-css@1/nyx.min.js"
  defer
></script>

Add the nyx class to the body. This class applies the canvas, base typography, focus rings, and scrollbar styles. The optional nyx-reset class adds the framework reset.

<body class="nyx nyx-reset">
  <!-- NYX components -->
</body>

You can also install the package for projects that manage frontend assets through npm. The package exports the full CSS and JavaScript files, their minified versions, and individual component modules.

npm install nyx-css

NYX uses system font fallbacks when its preferred fonts are unavailable. Load Inter, Plus Jakarta Sans, and JetBrains Mono when the interface should match the intended typography.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap"
>

Basic Usage

The following page creates a themed card and opens a modal through declarative attributes. The runtime detects the trigger automatically after the document loads.

<!doctype html>
<html lang="en" data-theme="dark" data-accent="violet">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/nyx-css@1/nyx.min.css"
  >
  <script
    src="https://cdn.jsdelivr.net/npm/nyx-css@1/nyx.min.js"
    defer
  ></script>
</head>
<body class="nyx nyx-reset">
  <main class="nyx-container" style="padding-block: var(--nyx-s7)">
    <article class="nyx-card nyx-card-glass">
      <span class="nyx-badge nyx-badge-success">Active</span>
      <h1 class="nyx-h2">Project workspace</h1>
      <p class="nyx-muted">
        Review members, permissions, and recent workspace activity.
      </p>
      <button
        class="nyx-btn nyx-btn-primary"
        data-nyx-toggle="modal"
        data-nyx-target="#memberDialog"
      >
        Invite a member
      </button>
    </article>
  </main>
  <div class="nyx-modal" id="memberDialog">
    <div class="nyx-modal-box">
      <h2 class="nyx-modal-title">Invite a member</h2>
      <label class="nyx-label" for="memberEmail">Email address</label>
      <input
        class="nyx-input"
        id="memberEmail"
        type="email"
        placeholder="[email protected]"
      >
      <div class="nyx-flex nyx-justify-end nyx-gap-3">
        <button class="nyx-btn nyx-btn-glass" data-nyx-dismiss>
          Cancel
        </button>
        <button class="nyx-btn nyx-btn-primary">
          Send invitation
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Available UI Components

  • Layout and typography include containers, grids, flex utilities, stacks, dividers, headings, lead text, gradient text, and code styles.
  • Controls include buttons, button groups, inputs, selects, text areas, checkboxes, radios, toggles, ranges, floating labels, comboboxes, and multiselects.
  • Navigation covers navbars, sidebars, breadcrumbs, tabs, pills, pagination, dropdowns, command palettes, and context menus.
  • Feedback patterns include alerts, badges, toasts, snackbars, progress bars, skeletons, spinners, banners, and status indicators.
  • Overlay components include modals, drawers, sheets, popovers, tooltips, accordions, collapsible regions, and carousels.
  • Data interfaces include sortable tables, data grids, KPI rows, charts, kanban boards, date pickers, calendars, and hierarchical selectors.
  • Visual components include spotlight effects, gradient borders, orbit layouts, marquees, timelines, ratings, avatars, animated backgrounds, and scroll reveals.
  • Regional components cover Hijri dates, prayer times, qibla direction, zakat calculations, Arabic numerals, national addresses, delivery states, BNPL displays, and ZATCA invoice data.

Load Individual CSS Modules

Projects that use a small part of the framework can load selected component files. tokens.css remains required since every module reads values from the shared token system.

<link rel="stylesheet" href="components/tokens.css">
<link rel="stylesheet" href="components/base.css">
<link rel="stylesheet" href="components/layout.css">
<link rel="stylesheet" href="components/buttons.css">
<link rel="stylesheet" href="components/cards.css">
<link rel="stylesheet" href="components/overlays.css">

Include nyx.js when the selected components require runtime behavior.

<script src="nyx.js"></script>

Theme and RTL Customization

Set the color scheme and accent preset on the root HTML element. Supported accent presets: violet, emerald, rose, and amber. Violet acts as the default when data-accent is absent.

<html
  lang="ar"
  dir="rtl"
  data-theme="dark"
  data-accent="emerald"
>

Override root variables after the NYX stylesheet to create a project-specific theme.

-root {
  --nyx-accent: #e84a8a;
  --nyx-accent-2: #27c7b8;
  --nyx-bg: #090b12;
  --nyx-surface: #131722;
  --nyx-surface-2: #1b2130;
  --nyx-radius: 12px;
  --nyx-radius-lg: 18px;
  --nyx-font-display: "Manrope", system-ui, sans-serif;
  --nyx-font-body: "Inter", system-ui, sans-serif;
  --nyx-shadow: 0 8px 28px rgb(0 0 0 / 45%);
  --nyx-glow: 0 0 28px color-mix(
    in srgb,
    var(--nyx-accent) 38%,
    transparent
  );
}

Theme and direction changes can also run through the global API. NYX stores these selections in localStorage.

// Switch between the built-in light and dark themes.
Nyx.toggleTheme();
// Switch between LTR and RTL document directions.
Nyx.toggleDir();
// Apply one of the built-in accent themes.
Nyx.setAccent('rose');

Alternatives:

See Also:

You Might Be Interested In:

Leave a Reply