Next, add a script tag to your project.

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

Depending on what type of Blazor project you are building, it will go into one of two places:

• For a Blazor Server project, add the script tag to your _Host.cshtml file.
• For a Blazor WASM project, add the script tag to your index or main layout.

Note: If the script reference is added to a .razor or .cshtml file, you will need to escape the @ with a second @ like so https://unpkg.com/@@fluentui/web-components.

Once these steps are completed, you can then begin using the components throughout your Blazor application by adding the following using statement to your views:

@using Microsoft.Fast.Components.FluentUI

Here's an example of what page with a card and button would look like:

@page "/"
@using Microsoft.Fast.Components.FluentUI

<FluentCard>
  <h2>Hello World!</h2>
  <FluentButton Appearance="@Appearance.Accent">
    Click Me
  </FluentButton>
</FluentCard>

Take a look in the examples folder of this repository to see how to use the various components.

Joining the Community

Looking to get answers to questions or engage with us in realtime? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

If you don't find a component you're looking for, it's best to create the issue in our FAST repo here and limit issues on this repo to bugs in the Blazor component wrappers or Blazor-specific features.

We look forward to building an amazing open source community with you!

Contact

• Join the community and chat with us in real-time on Discord.
• Submit requests and issues on GitHub.
• Contribute by helping out on some of our recommended first issues on GitHub.