Skip to main content
Version: Next

Installation

Get started with ignix-lite in just a few simple steps.

Ignix Lite is a browser-native, zero-dependency semantic UI library designed to work out of the box with native HTML tags, CSS variables, and native web components.

1. Install Package​

Install the library package locally to your project dependencies:

npm install @mindfiredigital/ignix-lite

2. Import Stylesheet​

To load the semantic design styles, you must import the CSS stylesheet in your project. You can do this by referencing the file from your local node_modules folder or via a CDN link.

If you are building a static website, link directly to the file inside node_modules:

<link rel="stylesheet" href="./node_modules/@mindfiredigital/ignix-lite/dist/ignix-lite.min.css" />

3. Import JavaScript (Required for Interaction)​

Some components rely on lightweight, native web components or event listeners to handle interactive behavior (such as toggling menus, sorting tables, or displaying toast notifications).

important

The JavaScript library file (ignix-lite.min.js) is required only if you are using any of the following interactive components:

  • Table (sorting & filtering)
  • Dropdown (menu toggle & overlay click)
  • Combobox (filtering list options)
  • Toast (notification spawning & automatic dismissal)
  • Tooltip (hover-popover layout alignment)
  • Tabs (switching tab panels)

You can import the JavaScript bundle using one of the following methods:

Add the script to your HTML (preferably at the bottom of the <body> or using the defer attribute):

<script src="./node_modules/@mindfiredigital/ignix-lite/dist/ignix-lite.min.js" defer></script>

Basic HTML Template​

Here is a full basic template for static HTML projects using local node_modules dependencies:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ignix Lite Application</title>
  
  <!-- 1. Link Stylesheet from node_modules -->
  <link rel="stylesheet" href="./node_modules/@mindfiredigital/ignix-lite/dist/ignix-lite.min.css" />
  
  <!-- 2. Defer JavaScript for interactive components (dropdown, toast, tabs, etc.) -->
  <script src="./node_modules/@mindfiredigital/ignix-lite/dist/ignix-lite.min.js" defer></script>
</head>
<body>
  <h1>My First App</h1>
  <button data-intent="primary">Get Started</button>
  <p>Start styling your application using classless semantic markup!</p>
</body>
</html>

Next Steps​

Explore the individual component guidelines to see examples, markup structures, and supported attributes: