Build your first Blazor App with UI Kit blocks

14 Nov 202510 minutes to read

This tutorial guides you through building a Blazor Web App using blocks from the Syncfusion Essential UI Kit for Blazor. It demonstrates how to create a new project, choose Tailwind CSS or Bootstrap 5.3 themes, and add a Sign in block. The goal is to help developers quickly build responsive, modern web apps using pre-built 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 Microsoft setup guide here. This tutorial then walks through 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

Set up Tailwind CSS or Bootstrap 5.3 theme

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 the Tailwind CSS theme is selected, 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 the Components -> App.razor file, add the following scripts in the <head> tag. These scripts generate Tailwind CSS classes at runtime based on the styles used in the application and replace the primary color with a custom indigo palette. This CDN approach is suitable for demos; for production builds, integrate Tailwind via a build pipeline.

     <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>

    Syncfusion® Blazor components use Indigo for light mode and Cyan for dark mode. To maintain a uniform appearance, adjust the primary color accordingly.

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

    • For light mode:

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

    • For dark mode:

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

  4. Optional: To use the font icons prepared for Tailwind CSS, 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 the Bootstrap 5.3 theme is selected, 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 the Components -> App.razor file, add the CDN link for the Bootstrap 5.3 theme stylesheet in the <head> tag.

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

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

    • For light mode:

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

    • For dark mode:

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

  4. Optional: To use the font icons prepared for Bootstrap 5.3, 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 opens the corresponding demo page.

    Navigate to the sign-in block demo

  2. On the demo page, open 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 the default “Hello, world!” content.

    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. If C# code is provided, create a new file Components -> Pages -> Home.razor.cs and paste the code into it. Otherwise, ignore this step.

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

  1. After downloading and opening the source in Visual Studio Code, navigate to 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 code, note that Syncfusion® Blazor components are used. To incorporate them into MyBlazorApp, install the necessary packages and import the corresponding namespaces in Components -> _Imports.razor so the app can compile and 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

After the packages are added, run the following command in the terminal to install them.

dotnet restore

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

Importing Syncfusion Namespaces

Finally, revisit 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 above.

Steps to download and add assets to the app

To use the images from the design, download the assets folder from the GitHub repository, place it inside the wwwroot folder of MyBlazorApp, and update image URLs in the Razor (HTML) file if necessary.

Steps to run the app

With MyBlazorApp set up—including Razor markup, CSS (if applicable), C# (if applicable), and and assets (optional) — you can build and run the app. Run the following command in the terminal; a localhost URL will be provided by the Blazor development server.

dotnet run

Build and launch the app

To view the app in a browser, Ctrl+click (or Cmd+click on macOS) the localhost URL displayed in the terminal. This opens the app in the default browser and displays the simple Sign in block.

View the app in the browser using the localhost URL