Add DevExpress Components to an Existing 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 help 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 Code Blazor Web App template as the starting project. If you already have a Blazor project, skip to the next section.

1. Open Visual Studio Code and switch to the Explorer view.
2. Click the Create .NET Project button.
3. Select the Blazor Web App template.
4. Select a project location and click the Select Folder button.
5. Specify the solution name and press Enter.
6. Select the solution file format.
7. Click Create project and wait for the project to open in Visual Studio Code.

Add the DevExpress Blazor Package

1. Open the VS Code’s integrated terminal.
2. Use the cd command in the terminal to navigate to your project’s directory.
3. Execute the following command to add the DevExpress.Blazor package.

Register DevExpress Blazor Resources

1. Register internal DevExpress Blazor services in the Program.cs file.

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