Blazor WebAssembly App | ASP.NET Core Blazor OSS Components

Getting Started With Blazor WebAssembly App

This article provides step-by-step instructions for building a Blazor WebAssembly App with the Syncfusion® Blazor Toolkit component using Visual Studio, Visual Studio Code, and the .NET CLI.

Prerequisites

.NET SDK: Version 8.0 or later
IDE: Visual Studio 2022 17.8+ or Visual Studio Code
Operating System: Windows, macOS, or Linux

Create a New Blazor WebAssembly App

Create a new Blazor WebAssembly App project using the dotnet new blazorwasm command or through Visual Studio. For detailed instructions, refer to the Microsoft Blazor documentation.

Visual Studio Code / .NET CLI

terminal

dotnet new blazorwasm -o BlazorWebAssemblyApp
cd BlazorWebAssemblyApp

Install Syncfusion Blazor Toolkit Package

Install the Syncfusion.Blazor.Toolkit NuGet package in your WebAssembly project using one of the following methods:

NuGet Package Manager (Visual Studio)

Install the Syncfusion.Blazor.Toolkit package from the NuGet Gallery.

Package Manager Console

terminal

Install-Package Syncfusion.Blazor.Toolkit

.NET CLI / VS Code Terminal

terminal

dotnet add package Syncfusion.Blazor.Toolkit

Add Import Namespaces

After installing the package, add the required namespaces to your ~/_Imports.razor file:

_Imports.razor

@using Syncfusion.Blazor.Toolkit

Register Syncfusion Blazor Toolkit Service

Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor.Toolkit;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Register Syncfusion Blazor Toolkit services
builder.Services.AddSyncfusionBlazorToolkit();

var host = builder.Build();
await host.RunAsync();

Add Stylesheet Reference

Add the Syncfusion Blazor Toolkit theme stylesheet reference to the Head section in your index.html file

Common Stylesheet (All Components)

Use the combined common stylesheet fluent.min.css which contains base styles and utilities shared across all components. This is the recommended stylesheet for most applications.

index.html (Common)

<head>
    <link href="_content/Syncfusion.Blazor.Toolkit/styles/fluent.min.css" rel='stylesheet' />
</head>

Individual Component Stylesheets (Optional)

For better performance or to reduce bundle size, you can load only the specific component stylesheets you need. Available individual component stylesheets include:

button.min.css - Button component styles
calendar.min.css - Calendar component styles
chart.min.css - Chart component styles
checkbox.min.css - Checkbox component styles
dialog.min.css - Dialog component styles
dropdown.min.css - Dropdown component styles
input.min.css - Input base styles
spinner.min.css - Spinner component styles
textbox.min.css - TextBox component styles
tooltip.min.css - Tooltip component styles

And many more in the _content/Syncfusion.Blazor.Toolkit/styles/ directory.

index.html (Individual)

<head>
    <link href="_content/Syncfusion.Blazor.Toolkit/styles/button.min.css" rel='stylesheet' />
    <link href="_content/Syncfusion.Blazor.Toolkit/styles/calendar.min.css" rel='stylesheet' />
</head>

The Syncfusion Blazor Toolkit uses a scoped stylesheet approach. The theme CSS is automatically served from the NuGet package via the static web asset handler. The fluent.min.css is the combined/common stylesheet that provides styling for all components.

Add Syncfusion Blazor Component

This section demonstrates how to add a Syncfusion Blazor Toolkit component to your Blazor WebAssembly application using the Button component as an example.

Add the render mode declaration at the top of your .razor page:

Home.razor

@page "/"
@rendermode InteractiveWebAssembly

Add the following code to your page:

Home.razor

@using Syncfusion.Blazor.Toolkit.Buttons

<div class="d-flex gap-5 flex-wrap">
    <SfButton>Default</SfButton>
    <SfButton CssClass="e-primary">Primary</SfButton>
    <SfButton CssClass="e-success">Success</SfButton>
    <SfButton CssClass="e-info">Info</SfButton>
    <SfButton CssClass="e-warning">Warning</SfButton>
    <SfButton CssClass="e-danger">Danger</SfButton>
</div>

Run the Application

Visual Studio: Press Ctrl+F5 to run without debugging, or F5 to run with debugging.
Visual Studio Code / .NET CLI: Run the dotnet run command in the integrated terminal.

The Blazor WebAssembly app will compile and launch in your default web browser. The Syncfusion Blazor Toolkit Button component will render after the WebAssembly runtime loads.