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

First Steps with Blazor Hybrid

Updated on Apr 7, 2026

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.

Prerequisites

To successfully complete the steps in this tutorial:

Install the latest version of .NET and Visual Studio.
Create a Telerik user account if you haven't one.
Activate a Telerik UI for Blazor trial if you don't have a commercial license.
Install the Telerik CLI and setup your Telerik development environment.

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

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 steps listed below.

1. Add 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.

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.

Add the theme stylesheet as a static asset in your wwwroot/index.html file.

HTML

<head>
    . . .
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
</head>

Add the telerik-blazor.js file to your wwwroot/index.html file.

HTML

<head>
    . . .
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
</head>

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.

_Imports.razor

RAZOR

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

RAZOR

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

            builder.Services.AddMauiBlazorWebView();

            // register the Telerik services
            builder.Services.AddTelerikBlazor();

#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
#endif

            builder.Services.AddSingleton<WeatherForecastService>();

            return builder.Build();
        }
    }
}

Explore the specifics of Telerik UI for Blazor in native MAUI

First Steps with Blazor Hybrid

Prerequisites

1. Add the Telerik UI for Blazor Package

2. Add the Telerik Client Assets

3. Include @using Statements

4. Add the TelerikRootComponent

5. Register the Telerik Services

6. Add the UI for Blazor Components

Running the Blazor Hybrid App

Next Steps

See Also