Updated the Blazor common UG documentation

Backiaraj · Backiaraj · commit 4380467751e8 · 2025-10-22T12:26:18.000+05:30
diff --git a/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md b/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md
@@ -1,30 +1,30 @@
 ---
 layout: post
-title: Build your first Blazor app with our blocks | Syncfusion
-description: Learn all about building your first Blazor app using our blocks from the Essential Blazor UI Kit in Syncfusion Essential Studio and more.
+title: Build your first Blazor app with UI Kit blocks | Syncfusion
+description: Build a Blazor Web App using blocks from the Essential UI Kit. Configure Tailwind or Bootstrap themes and add a Sign in block. Explore to more details.
 platform: Blazor
 control: UI Kit
 documentation: ug
 ---
 
-# Build your first Blazor App with our blocks
+# Build your first Blazor App with UI Kit blocks
 
-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.
+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 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](https://learn.microsoft.com/en-us/training/modules/build-your-first-blazor-web-app/3-exercise-configure-environment?pivots=vscode). This tutorial then walks through the step-by-step process of adding a simple sign-in block to the newly created app, named **MyBlazorApp**.
+A Blazor Web App is used for this example. To create a new app, follow the Microsoft setup guide [here](https://learn.microsoft.com/training/modules/build-your-first-blazor-web-app/3-exercise-configure-environment?pivots=vscode). 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](images/new-blazor-app.png)
 
-## Setting up Tailwind CSS or Bootstrap 5.3 theme in the 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 you choose **Tailwind CSS** theme, follow these steps to configure it.
+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.
 
@@ -40,7 +40,7 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it.
     <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.
+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.
 
     ```html
     <script src="https://cdn.tailwindcss.com"></script>
@@ -70,9 +70,9 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it.
       }
     </script>
     ```
-    > The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components uses **Indigo** for light mode and **Cyan** for dark mode. To maintain a uniform appearance, change the primary color accordingly.
+    > Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components use **Indigo** for light mode and **Cyan** for dark mode. To maintain a uniform appearance, adjust the primary color accordingly.
 
-3. In **Components -> App.razor** file, add the style oriented CDN link for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components in the `<head>` tag.
+3. In the **Components -> App.razor** file, add the theme stylesheet CDN link for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components in the `<head>` tag.
 
    - For **light mode**:
 
@@ -86,7 +86,7 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it.
      <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:
+4. **Optional**: To use the font icons prepared for **Tailwind CSS**, include the following CDN link:
 
     ```html
     <link href="https://cdn.syncfusion.com/blazor/ui-kit/font-icons/tailwind-icons.css" rel="stylesheet" />
@@ -100,7 +100,7 @@ Now that the **Tailwind CSS** theme is configured for either light or dark mode
 
 ### Bootstrap 5.3 configuration
 
-If you choose **Bootstrap 5.3** theme, follow these steps to configure it.
+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.
 
@@ -116,13 +116,13 @@ If you choose **Bootstrap 5.3** theme, follow these steps to configure it.
     <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.
+2. In the **Components -> App.razor** file, add the CDN link for the **Bootstrap 5.3** theme stylesheet in the `<head>` tag.
 
      ```html
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
      ```
 
-3. In **Components -> App.razor**  file, add the style oriented CDN link for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components in the `<head>` tag.
+3. In the **Components -> App.razor** file, add the theme stylesheet CDN link for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components in the `<head>` tag.
 
    - For **light mode**:
 
@@ -136,7 +136,7 @@ If you choose **Bootstrap 5.3** theme, follow these steps to configure it.
      <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:
+4. **Optional**: To use the font icons prepared for **Bootstrap 5.3**, include the following CDN link:
 
     ```html
     <link href="https://cdn.syncfusion.com/blazor/ui-kit/font-icons/bootstrap5.3-icons.css" rel="stylesheet" />
@@ -154,26 +154,25 @@ Now that **MyBlazorApp** is set up with the desired theme configuration, the nex
 
 ### Steps to explore and copy block code snippets from the online demo
 
-1. In the [online demo](https://blazor.syncfusion.com/essential-ui-kit), navigate to the **Authentication** category and select the **Sign In** block. This will direct you to the appropriate demo page.
+1. In the [online demo](https://blazor.syncfusion.com/essential-ui-kit), navigate to the **Authentication** category and select the **Sign in** block. This opens the corresponding demo page.
 
     ![Navigate to the sign-in block demo](images/navigate-to-the-sign-in-block-demo.png)
 
-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.
+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](images/choose-tailwind-or-bootstrap-theme.png)
 
-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.
+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](images/copy-HTML-code-snippet-to-clipboard.png)
 
 >  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.
 
-
-4. 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.
+4. 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. On [downloading](https://github.com/syncfusion/essential-ui-kit-for-blazor) and opening the GitHub source in Visual Studio Code, navigate to the following folder: **Components -> Pages -> BlocksSection**.
+1. After [downloading](https://github.com/syncfusion/essential-ui-kit-for-blazor) and opening the source in Visual Studio Code, navigate to **Components -> Pages -> BlocksSection**.
 
     ![Downloaded GitHub app in Visual Studio Code](images/downloaded-github-app-in-visual-studio-code.png)
 
@@ -189,38 +188,38 @@ Now that **MyBlazorApp** is set up with the desired theme configuration, the nex
 
 ## Steps to install and configure Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
 
-While copying and pasting the Razor (HTML) code, you'll notice that Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
+While copying and pasting the Razor code, note that Syncfusion<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> Blazor component packages, refer to this [link](https://www.nuget.org/packages?q=Syncfusion.Blazor)
 
 ![Adding required packages for Syncfusion components](images/adding-required-packages-for-syncfusion-components.png)
 
-Once the necessary packages are added, run the following command via the terminal to install those packages.
+After the packages are added, run the following command in the terminal to install them.
 
 ```bash
 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<sup style="font-size:70%">&reg;</sup> components in the application.
+After restoring the packages, import the required namespaces `Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Inputs` in **Components -> _Imports.razor** to enable Syncfusion<sup style="font-size:70%">&reg;</sup> components in the application.
 
 ![Importing Syncfusion Namespaces](images/import-syncfusion-namespaces.png)
 
-Finally, again check the [online demo](https://blazor.syncfusion.com/essential-ui-kit) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor) and copy the required Razor (HTML) code for the simple sign-in block into your app as outlined in the previous topic.
+Finally, revisit the [online demo](https://blazor.syncfusion.com/essential-ui-kit) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor) 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
 
-If you want to view and experience the images used in our design, you can download the **assets** folder from the following [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor/tree/master/UI_Blocks/wwwroot/assets), place it inside the **wwwroot** folder of **MyBlazorApp**, and modify the image URLs in the Razor (HTML) if necessary.
+To use the images from the design, download the **assets** folder from the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor/tree/master/UI_Blocks/wwwroot/assets), place it inside the **wwwroot** folder of **MyBlazorApp**, and update image URLs in the Razor (HTML) file 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.
+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.
 
 ```bash
 dotnet run
 ```
 
 ![Build and launch the app](images/build-and-launch-the-app.png)
 
-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.
+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](images/view-the-app-in-the-browser-using-the-localhost-URL.png)
