Blaze UI (original) (raw)

Last Updated : 23 Jul, 2025

**Blaze UI is a free & open-source (MIT Licence) Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI

**Why Blaze UI?

• **Accessibility: It allows us to educate its importance & make enables the website from accessible to everyone via Accessible selectors.
• **Responsive: It allows us to build a mobile-first design that can be accessible to all the screen-size devices.
• **Custom builds: It implements the concept of variables and mixins, that facilitate us to customize our components.
• **Opt-in: Blaze UI allows us to control any of our designs that we want it to & is not controlled automatically by the Blaze.

Blaze UI

**Installation Steps

There are 2 different ways the Blaze UI can be utilized in the project:

• By using the CDN Links
• By installing the Node Modules

We will explore both the option for using the Blaze UI & understand it through the implementation.

**By implementing through CDN Link

The Blaze UI toolkit can be used via CDN links i.e. for CSS & JavaScript, which is described below:

**Step 1: For CSS & JavaScript Components: We need to add the following link inside the tag:

**CSS Component:

**JavaScript Component:

**Step 2: Add the specific component by implementing the particular class:

Button

**By installing the Node Modules

We can use the Blaze UI by installing the Node Modules. The steps for installation are given below:

**Step 1: Run the below command to install the Blaze UI:

npm install @blaze/atoms --save

**Step 2: Add the below

**Step 3: Add the particular class to implement the specific component:

Content

**Step 4: Run the following command to execute the application:

npm run test

**Example: This example describes the implementation of Blaze UI by specifying the required CDN links.

HTML `

GeeksforGeeks

<div role="tree" class="c-tree">
    <button role="treeitem" aria-expanded="false"
        class="c-tree__item">
        HTML
    </button>
    <button role="treeitem" aria-expanded="true"
        class="c-tree__item">
        CSS
    </button>
    <div role="tree" class="c-tree">
        <span role="treeitem" class="c-tree__item">
            Bootstrap
        </span>
        <span role="treeitem" class="c-tree__item">
            Foundation
        </span>
        <span role="treeitem" class="c-tree__item">
            Semantic UI
        </span>
        <span role="treeitem" class="c-tree__item">
            Pure CSS
        </span>
    </div>
    <button role="treeitem" aria-expanded="true"
        class="c-tree__item">
        JavaScript
    </button>
    <span role="treeitem" class="c-tree__item">
        FabricJS
    </span>
    <span role="treeitem" class="c-tree__item">
        NodeJS
    </span>
    <span role="treeitem" class="c-tree__item">
        BackboneJS
    </span>
    <span role="treeitem" class="c-tree__item">
        ExpressJS
    </span>
</div>

`

**Output: