VOOZH about

URL: https://www.geeksforgeeks.org/css/blaze-ui/

⇱ Blaze UI - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Blaze UI

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
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
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 <head> tag:

CSS Component:

<link rel="stylesheet" href="https://unpkg.com/@blaze/css@12.2.0/dist/blaze/blaze.css">

JavaScript Component:

<script type="module" src="https://unpkg.com/@blaze/atoms@13.1.0/dist/blaze-atoms/blaze-atoms.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@blaze/atoms@13.1.0/dist/blaze-atoms/blaze-atoms.js"></script>

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

<button class="c-button" type="button">Button</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
👁 Image

Step 2: Add the below <script> tag inside the <head> section in the index.html file:

<script src="node_modules/@blaze/atoms/dist/blaze-atoms.js"></script>

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

<p class="u-centered" style="color:violet">Content</p>

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.

Output:

👁 Image
Comment