Add DevExpress UI Components to an Existing Blazor App

• Mar 03, 2026
• 3 minutes to read

The DevExpress Template Kit is the fastest way to create new Blazor apps with DevExpress UI. However, the Template Kit cannot integrate DevExpress components into an existing Blazor project. This topic explains how to install packages, register services and static resources, and add a DevExpress Blazor component to your existing app.

Create a Blank Blazor App

Note

This tutorial uses the default Visual Studio Blazor Web App template as the starting project. If you already have a Blazor project, skip to the next section.

1. Open Visual Studio and click File → New → Project….

2. In the Create a new project dialog, select Blazor Web App.

3. Click the Next button.

4. Specify the project name and location.

5. Configure the project. This tutorial creates a blank Blazor Server web application without sample pages.

6. Click the Create button.

Add the DevExpress Blazor Package

1. Register the local or online DevExpress NuGet feed in Visual Studio.

2. In the Solution Explorer , right-click your project and select Manage NuGet Packages… in the context menu.

3. Select the DevExpress NuGet feed as a package source.

4. Switch to the Browse tab and search for DevExpress.Blazor.

5. Install the latest DevExpress.Blazor package.

Register DevExpress Blazor Resources

1. Register internal DevExpress Blazor services in the application’s startup file (Program.cs).

2. Register the DevExpress.Blazor namespace in the Components_Imports.razor file:

3. Apply the application-wide DevExpress Blazor theme and add client scripts in the Components\App.razor file.

Add a DevExpress Blazor Component to the App

To get acquainted with the project structure, add a simple DevExpress Blazor component (Calendar) to the application’s home page and see it in action:

1. Open the Components\Pages\Home.razor file.

2. The DevExpress Calendar for Blazor does not support static render mode. Enable interactivity:

3. Add the DxCalendar component to the page. Bind the component to the SelectedDate variable to test interactivity.

4. Press F5 to run your application.

Full code:

• Home.razor

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<DxCalendar @bind-SelectedDate="@SelectedDate" />

<p><b>Selected date:</b> @SelectedDate.ToLongDateString()</p>

@code {
    DateTime SelectedDate { get; set; } = DateTime.Now;
}