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/fluid-design-system-webcomponents
Advanced tools
@engie-group/fluid-design-system-webcomponents
A platform-agnostic Web Components implementation of the ENGIE Fluid Design System components
Fluid design system Web Components
Description
A platform-agnostic Web Components implementation of the ENGIE Fluid Design System components.
This library provides reusable, accessible, and customizable UI components that can be used in any web application, regardless of the framework.
Key Features
- đ§ Framework-agnostic - Works with any framework or no framework
- âżď¸ Accessible - Built with WCAG 2.1 guidelines in mind
- đą Responsive - Works across all device sizes
- đ Modern - Built using the latest Web Components standards
Versioning
â ď¸ This package is not stable yet. It doesn't follow semantic versioning, breaking changes may be introduced in minor versions.
We recommend fixing the version with the exact package version to avoid breaking changes affecting your live website. Moreover, we recommend checking the CHANGELOG before updating the package after a release.
Installation
Package manager
Libraries are distributed on NPM, you can install them in your node package with the following command:
# Using pnpm
pnpm add @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens
# Using npm
npm install @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens
# Using yarn
yarn add @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens
CSS
Component styling is based on CSS classes and some CSS custom properties (called design tokens). In order for each component to be rendered as expected, you need to include CSS files as global stylesheet in your project.
You can include them in your HTML <head>:
Using CDN
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-webcomponents@<VERSION>/dist/fluid/fluid.css" rel="stylesheet">
Using package manager
In your HTML <head>
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-webcomponents/dist/fluid/fluid.css" rel="stylesheet">
or in your JavaScript entry file :
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system-webcomponents/css';
or in your CSS entry file :
@import '@engie-group/fluid-design-tokens/css';
@import '@engie-group/fluid-design-system-webcomponents/css';
/* Or
@import '@engie-group/fluid-design-tokens/lib/css/tokens.css'
@import '@engie-group/fluid-design-system-webcomponents/dist/fluid/fluid.css'
depending on you bundler configuration */
âšď¸ We recommend including the Fluid Design System CSS before your own stylesheets to avoid any conflicts.
Usage
Import
CDN import
<script type="module" src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-webcomponents@<VERSION>/dist/esm/fluid.js" />
Package manager import
In your javascript entry file:
// In your javascript / typescript entry file
import '@engie-group/fluid-design-system-webcomponents';
or in a script tag:
<script type="module" src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-webcomponents/dist/esm/fluid.js" />
Component usage
In HTML files
<!-- Icon component -->
<nj-icon name="bolt" variant="brand" size="2xl"></nj-icon>
In JavaScript files
// Create and append a bullet programmatically
const icon = document.createElement('nj-icon');
icon.setAttribute('name', 'bolt');
icon.setAttribute('variant', 'brand');
icon.setAttribute('size', '2xl');
document.body.appendChild(icon);
Support
TypeScript & ESM Support
This library is ES module compatible and includes TypeScript declarations. You can import types directly:
import { NjBullet } from '@engie-group/fluid-design-system-webcomponents/bullet';
Browser Support
- Chrome/Chromium (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)
CSS Custom Properties
Some components can be customized using CSS custom properties see respective documentation for further details
Documentation
For detailed documentation and examples, visit our Storybook documentation.
Support
For support and issues:
- Check our documentation
- Open an issue in our GitHub repository
- Join the Fluid Design System team on Teams
Š ENGIE Group. All rights reserved.
FAQs
A platform-agnostic Web Components implementation of the ENGIE Fluid Design System components
We found that @engie-group/fluid-design-system-webcomponents demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 14 Nov 2025
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