Product
Introducing Webhook Events for Alert Changes
Add real-time Socket webhook events to your workflows to automatically receive software supply chain alert changes in real time.
By Phil Gates-Idem -  Nov 21, 2025
🚀 DAY 5 OF LAUNCH WEEK:Introducing Webhook Events for Alert Changes.Learn more →
@engie-group/design-system-library
Advanced tools
ENGIE Design System
Welcome to the ENGIE Design System. It's a library of UI components written in HTML/CSS/Vanilla JS. To begin with, you have multiple ways to work with our design system. Start with the installation and then feel free to explore the different sections of the design system to start building applications based on ENGIE standards. https://design.engie.com/
Quick Start
Install the package inside your new application: npm i @engie-group/design-system-library
For an alternative use (zip, cdn), please read the dedicated section https://design.digital.engie.com/design-system/getting-started/developers/#quick-start
How to use
You can start using the design system through two methods :
The package has the following file structure:
.
├── CHANGELOG.md
├── README.md
├── dist
│  ├── css
│  ├── fonts
│  └── js
└── src
├── js
│  └── components
├── scss
└── fonts
Basic usage
You can use the built files from the dist/ directory.
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link href="/your-css-path/nj-components.min.css" rel="stylesheet">
Be sure to include the Google material font. See the documentation here.
JS
Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script src="/your-js-path/nj-components.js"></script>
Advanced usage
You can import the sources files from the src/ directory. Feel free to use your asset builder (Webpack, gulp, grunt...)
SCSS
Import nj.scss file in your project.
@import "~@engie-group/design-system-library/src/scss/nj";
Fonts path: In case you have to resolve the relative path to fonts files you can set the $icon-font-path variable or use resolve-url-loader with webpack.
Be sure to include the Google material font. See the documentation here.
JS
- Import the library in your project.
import NJ from '@engie-group/design-system-library';
- Initialize all components
Auto Init allows you to initialize all of the Design System Components with a single function call. It is important to note that you cannot pass in options using this method.
document.addEventListener('DOMContentLoaded', function(event) {
NJ.AutoInit();
});
- OR Initialise a single component
You can also individually initialize the components of your choice:
NB: Currently only the alert component has this option.
document.addEventListener('DOMContentLoaded', function(event) {
NJ.Alert.init(alertElements);
});
Troubleshooting
If you have any issues while getting set up with ENGIE Design System, please create an issue here.
FAQs
Engie design system library
We found that @engie-group/design-system-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 12 Nov 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
ENISA Becomes a CVE Root, Expanding Its Role in Europe’s Vulnerability Ecosystem
ENISA has become a CVE Program Root, giving the EU a central authority for coordinating vulnerability reporting, disclosure, and cross-border response.
By Sarah Gooding -  Nov 21, 2025
Product
Introducing Socket Scanning for OpenVSX Extensions
Socket now scans OpenVSX extensions, giving teams early detection of risky behaviors, hidden capabilities, and supply chain threats in developer tools.
By Mix Irving, Ryan Eberhardt -  Nov 20, 2025