Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
By Trevor Norris - Jul 31, 2025
You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
@fluentui/web-components
Advanced tools
Fluent UI Web Components
Microsoft's Fluent UI Web Components is designed to help you build web apps using Web Components styled with the Fluent design language.
Installation
Install
Fluent UI should be installed as a dependency of your app.
Yarn
yarn add @fluentui/web-components@beta
NPM
npm i @fluentui/web-components@beta
pnpm
pnpm add @fluentui/web-components@beta
From CDN
A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding type="module" to the script element and then importing from the CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/@fluentui/web-components@beta"></script>
</head>
<!-- ... -->
</html>
The above CDN location points to the latest Beta release of @fluentui/web-components. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
Setup
Fluent UI Web Components are styled using tokens in the form of CSS variables. You can use the setTheme utility to provide a theme for your website or application.
import { setTheme } from '@fluentui/web-components';
import { webLightTheme } from '@fluentui/tokens';
setTheme(webLightTheme);
Usage
That's it. You can now use Fluent UI Web Components in your app.
Importing the defined component:
import '@fluentui/web-components/button.js';
Defining the element yourself using named imports:
import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
ButtonDefinition.define(FluentDesignSystem.registry);
Development
To start the component development environment, run yarn start.
Known issue with Storybook site hot-reloading during development
Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the CustomElementsRegistry once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry
This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
Testing
When testing locally, start the dev server and in a separate terminal window, run yarn test:dev within the web-components folder.
FAQs
A library of Fluent Web Components
The npm package @fluentui/web-components receives a total of 13,985 weekly downloads. As such, @fluentui/web-components popularity was classified as popular.
We found that @fluentui/web-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Package last updated on 05 Sep 2024
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
Product
Announcing Precomputed Reachability Analysis in Socket
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
By Martin Torp - Jul 30, 2025
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
By Mix Irving, Alexandros Kapravelos, Eli Insua - Jul 30, 2025