Partager via

Quickstart: Build web-based UX using components from the CDN

  • Article

A pre-bundled script with everything you need to start using the components is available on our Content Delivery Network (CDN). You can use it by adding script tag to your HTML markup with a type="module" attribute:

    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>

Prerequisites

  • Modern, standards-based browser (See browser compatibility table)
  • Web server - Azure web app, StackBlitz, CodePen, etc.
    • Typescript pre-processor - while not necessary, most of our code examples will be in Typescript -- it's great to work with and we recommend it.

Import from the CDN

Add the a script tag to the head of your HTML file with a type"="module" attribute. This will include a pre-bundled script in your page with all the component APIs you need to use Fluent UI Web Components.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  </head>
  <!-- ... -->
</html>

Add components

With the script in the head of your document, you can add any Fluent UI Web Component to your markup like you would any HTML tag:


<fluent-button>Hello world</fluent-button>

Next steps

If you want to install the Fluent UI Web Component packages in your web project, check the next article to learn how to set up your machine for development:

Install Fluent Web Component Packages