New to Telerik UI for Blazor? Download free 30-day trial

First Steps with Blazor Hybrid

The WebView feature available since .NET 6.0 allows you to embed Blazor components in native MAUI, WPF, and WinForms apps.

This article provides details on how to setup the apps to use the Telerik UI for Blazor components.

Explore the Blazor Hybrid Sample Apps—Blazor Web Apps running in WinForms, WPF, and MAUI.


Before adding the Telerik UI for Blazor components, ensure that the corresponding technology stack is set up and the basic Blazor Hybrid WebView runs as expected in this stack.

  1. Install the latest version of .NET 6.0. It requires Visual Studio 2022 Preview for Windows or Mac.

  2. Install WebView.

  3. Make sure you have the necessary bits to work with WinForms, WPF, or .NET MAUI apps. For the MAUI installation, follow the instructions in the official documentation.

Adding the UI for Blazor Components

The process for adding Telerik UI for Blazor to a WinForms, WPF, or MAUI app is similar to including the components in a native Blazor app and involves the six steps listed below.

1. Get the Telerik UI for Blazor Package

To use the UI for Blazor components, install the Telerik.UI.for.Blazor package and include its reference in the .csproj file of the app. Read more on where to get the Telerik.UI.for.Blazor package...

2. Add the Telerik Client Assets

To have the Telerik Blazor components look and behave as expected, you need the Telerik CSS and JavaScript assets. Include the assets inside the <head> of the wwwroot/index.html file.

You can add the Telerik resources as static assets.

3. Include @using Statements

You can set the project to recognize all Telerik components without explicit @using statements in every .razor file. To achieve this, add the code below to your ~/_Imports.razor file. You can register one or both icon namespaces depending on the icon type you will be using.


@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons

4. Add the TelerikRootComponent

Use a single TelerikRootComponent component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:

  • Shared/MainLayout.razor for MAUI apps
  • Main.razor for WPF and WinForms apps

Make sure that the TelerikRootComponent matches the web view viewport and remove the default margin of the <body> HTML element.

Once custom layouts are supported, you will be able to configure a Telerik layout in the same way as with regular Blazor web apps (check Common Configuration).

5. Register the Telerik Services

The next step is to register the Telerik services. Add the Telerik services in accordance to the practice your native app requires.

For example, in a MAUI app, you register the services in MauiProgram.cs:

namespace MyBlazorMauiAppName
    public static class MauiProgram
        public static MauiApp CreateMauiApp()
            var builder = MauiApp.CreateBuilder();
                .ConfigureFonts(fonts =>
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");


            // register the Telerik services



            return builder.Build();

5. Add the UI for Blazor Components

Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our live demos.

Running the Blazor Hybrid App

You can now run the hybrid application in debug mode, but it's recommended to be aware of possible caveats during deployment and prevent them upfront.

Refer to the following articles for more information on each technology stack:

Next Steps

See Also

In this article