Build your first Blazor App with our blocks

22 Apr 202510 minutes to read

This tutorial guides you through building a Blazor Web App using Syncfusion’s UI Kit blocks. It demonstrates how to set up a new Blazor Server project, choose between Tailwind CSS or Bootstrap 5.3 themes, and add a sign-in block in your application. The goal is to help developers quickly build responsive, modern web apps using a variety of prebuilt blocks with minimal effort.

Create a new Blazor App

A Blazor Web App is used for this example. To create a new app, follow the official setup guide here. This tutorial then walks through the step-by-step process of adding a simple sign-in block to the newly created app, named MyBlazorApp.

This tutorial focuses on using Blazor Server rendering mode rather than Blazor WebAssembly.

New Blazor App

Setting up Tailwind CSS or Bootstrap 5.3 theme in the app

After creating the new Blazor app named MyBlazorApp, open it in Visual Studio Code (which will be used throughout this walkthrough). The next step is to choose a theme, either Tailwind CSS or Bootstrap 5.3, in either light or dark mode, and configure the app accordingly.

Tailwind CSS configuration

If you choose Tailwind CSS theme, follow these steps to configure it.

  1. In Components -> App.razor file, add the following code for light mode (class="light") and dark mode (class="dark") in the <html> tag.

    • For light mode:
     <html lang="en" class="light">
    • For dark mode:
     <html lang="en" class="dark">

  2. In Components -> App.razor file, add the following scripts in the <head> tag. The main purpose of these scripts is to dynamically generate the appropriate Tailwind CSS classes at runtime based on the styles used in the application, and to replace the primary (highlight) color in the CSS with a custom indigo color palette.

     <script src="https://cdn.tailwindcss.com"></script>
 <script>
   tailwind.config = {
     darkMode: "class",
     theme: {
       extend: {
         colors: {
           // NOTE: In this demo, different shades of "Indigo" are used as primary colors.
           primary: {
             "50": "#eef2ff",
             "100": "#e0e7ff",
             "200": "#c7d2fe",
             "300": "#a5b4fc",
             "400": "#818cf8",
             "500": "#6366f1",
             "600": "#4f46e5",
             "700": "#4338ca",
             "800": "#3730a3",
             "900": "#312e81",
             "950": "#1e1b4b"
           }
         }
       }
     }
   }
 </script>

    The Syncfusion Blazor components uses Indigo for light mode and Cyan for dark mode. To maintain a uniform appearance, change the primary color accordingly.

  3. In Components -> App.razor file, add the style oriented CDN link for Syncfusion Blazor components in the <head> tag.

    • For light mode:

      <link href="https://cdn.syncfusion.com/blazor/29.1.33/styles/tailwind.css" rel="stylesheet"/>

    • For dark mode:

      <link href="https://cdn.syncfusion.com/blazor/29.1.33/styles/tailwind.css" rel="stylesheet" />

  4. OPTIONAL: If you wish to use our font icons prepared for Tailwind CSS, you can include the following CDN link:

     <link href="https://cdn.syncfusion.com/blazor/ui-kit/font-icons/tailwind-icons.css" rel="stylesheet" />

You can refer to the consolidated screenshot below for more details.

Tailwind CSS configuration

Now that the Tailwind CSS theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes.

Bootstrap 5.3 configuration

If you choose Bootstrap 5.3 theme, follow these steps to configure it.

  1. In Components -> App.razor file, add the following code for light mode (data-bs-theme="light") and dark mode (data-bs-theme="dark") in the <html> tag.

    • For light mode:
     <html lang="en" data-bs-theme="light">
    • For dark mode:
     <html lang="en" data-bs-theme="dark">

  2. In Components -> App.razor file, add the style oriented CDN link for Bootstrap 5.3 theme in the <head> tag.

      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  3. In Components -> App.razor file, add the style oriented CDN link for Syncfusion Blazor components in the <head> tag.

    • For light mode:

      <link href="https://cdn.syncfusion.com/blazor/29.1.33/styles/bootstrap5.3.css" rel="stylesheet">

    • For dark mode:

      <link href="https://cdn.syncfusion.com/blazor/29.1.33/styles/bootstrap5.3-dark.css" rel="stylesheet" />

  4. OPTIONAL: If you wish to use our font icons prepared for Bootstrap 5.3, you can include the following CDN link:

     <link href="https://cdn.syncfusion.com/blazor/ui-kit/font-icons/bootstrap5.3-icons.css" rel="stylesheet" />

You can refer to the consolidated screenshot below for more details.

Bootstrap 5.3 configuration

Now that the Bootstrap 5.3 theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes.

Steps to explore and copy block code snippets

Now that MyBlazorApp is set up with the desired theme configuration, the next step is to copy and paste the pre-built simple sign-in block code into the app for quick development. Here are a couple of ways to achieve this.

Steps to explore and copy block code snippets from the online demo

  1. In the online demo, navigate to the Authentication category and select the Sign In block. This will direct you to the appropriate demo page.

    Navigate to the sign-in block demo

  2. On the demo page, go to the first demo, which showcases a simple sign-in block. Choose the desired theme, then switch from the Preview tab to the Code tab.

    Choose Tailwind CSS or Bootstrap theme

  3. In the Code tab, copy the Razor (HTML) code using the Copy to Clipboard option and paste it into the Components -> Pages -> Home.razor file, replacing its content with the provided “Hello, world!” example.

    Copy HTML code snippet to clipboard

Ensure that you do not remove the @page directive and <PageTitle> element while replacing the content. These are essential for routing and setting the page title.

  1. If CSS is provided, copy the CSS code, create a new file Components -> Pages -> Home.razor.css, and paste the code into it. Similarly, if a C# code is provided, create a new file Components -> Pages -> Home.razor.cs and paste the C# code into it. Otherwise, you can ignore this step.

Steps to explore and copy block code snippets from the GitHub source

  1. On downloading and opening the GitHub source in Visual Studio Code, navigate to the following folder: Components -> Pages -> BlocksSection.

    Downloaded GitHub app in Visual Studio Code

  2. Inside, you’ll find a list of folders, each corresponding to a specific block. Open the SignIn block folder, where you’ll see the demo arranged sequentially.

  3. Go to the first folder, Components/Pages/BlocksSection/SignIn/SignIn1, where you’ll find the Razor (HTML) file of the simple sign-in block. You can copy the code directly from this file.

    View the sign-in block demo files

Note:

  1. In the Razor file, the Tailwind CSS and Bootstrap 5.3 design code is placed in their respective if-else statements. You can copy and paste as per your requirement.
  2. Ignore the code within the “SB Code - Start” and “SB Code - End” comments, as it is intended solely for sample browser purposes.

Steps to install and configure Syncfusion Blazor components

While copying and pasting the Razor (HTML) code, you’ll notice that Syncfusion Blazor components are used. To incorporate them into MyBlazorApp, install the necessary packages and import the corresponding namespaces to the Components -> _Imports.razor file for the app to run.

In the simple sign-in block, components such as textbox, checkbox and button are used. After copying and pasting Razor (HTML) code into the Razor file, open the MyBlazorApp.csproj file and add the required nuget packages: Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Inputs. For more details about other Syncfusion Blazor component packages, refer to this link

Adding required packages for Syncfusion components

Once the necessary packages are added, run the following command via the terminal to install those packages.

dotnet restore

After restoring the packages, import the required namespaces Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Inputs in the _Imports.razor file to enable Syncfusion components in the application.

Importing Syncfusion Namespaces

Finally, again check the online demo or the GitHub repository and copy the required Razor (HTML) code for the simple sign-in block into your app as outlined in the previous topic.

Steps to download and add assets to the app

If you want to view and experience the images used in our design, you can download the assets folder from the following GitHub repository, place it inside the wwwroot folder of MyBlazorApp, and modify the image URLs in the Razor (HTML) if necessary.

Steps to run the app

Now that everything is set up in MyBlazorApp — including the Razor (HTML), CSS (if applicable), C# (if applicable), and assets (optional) — you are ready to build and launch the app. Type the following command in the terminal, and you will see a localhost URL provided by the Blazor development server.

dotnet run

Build and launch the app

To view the app in your browser, simply Ctrl + Click (or Cmd + Click on macOS) on the localhost URL displayed in the terminal. This will open the app in your default browser, allowing you to view and experience the simple sign-in block.

View the app in the browser using the localhost URL