Blazor Web App | ASP.NET Core Blazor OSS Components

Getting Started With Blazor Web App

This article provides step-by-step instructions for building a Blazor Web 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 Web App

Create a new Blazor Web App project with the Auto interactivity mode using the dotnet new blazor command or through Visual Studio. For detailed instructions, refer to the Microsoft Blazor documentation.

Visual Studio Code / .NET CLI

terminal

dotnet new blazor -o BlazorWebApp
cd BlazorWebApp

Install Syncfusion Blazor Toolkit Package

Install the Syncfusion.Blazor.Toolkit NuGet package in your 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

When using WebAssembly or Auto render modes, install the NuGet package in the client project since the components run interactively on the client side.

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 Syncfusion.Blazor.Toolkit;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// Register Syncfusion Blazor Toolkit services
builder.Services.AddSyncfusionBlazorToolkit();

var app = builder.Build();

When using WebAssembly or Auto render modes, register the AddSyncfusionBlazorToolkit() service in both the server and client Program.cs files to ensure the toolkit functions correctly during server-side prerendering and client-side interactivity.

Add Stylesheet Reference

Add the Syncfusion Blazor Toolkit theme stylesheet reference to the Head section in your App.razor 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.

App.razor (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.

App.razor (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 application using the Button component as an example.

If Interactivity location is set to Per page/component, add the render mode declaration at the top of your .razor page:

Home.razor

@page "/"
@rendermode InteractiveAuto

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 application will launch in your default web browser, displaying the Syncfusion Blazor Toolkit Button component.