Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started > Visual Studio > Extend an Existing App
All docs
V25.2
    • Blazor Components
    Prerequisites
    Supported Browsers
    Get Started
    What is Blazor?
    Prepare the Environment
    Visual Studio
    Install UI Components & Templates
    Create a Blazor Web App
    Create a Blazor Hybrid Project
    Extend an Existing App
    Use GitHub Copilot
    Visual Studio Code
    JetBrains Rider
    Command Line
    What's Next
    What's New
    Upgrade to a New Version
    Cross-IDE Project Template Kit
    Connect AI Assistants to DevExpress Documentation
    Demos
    Examples
    Videos
    Common Concepts
    Components
    AI-powered Extensions
    Styling and Themes
    Security Considerations
    Troubleshooting
    Blazor & WinForms App UI Framework (Powered by EF Core)
    Maintenance Mode
    API Reference
    Download CHM

    Add DevExpress UI Components to an Existing Blazor App

    • 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.

      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.

      Blazor Web App Project Settings

    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.

      Visual Studio Add DevExpress Blazor NuGet Package

    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).

      using MyBlazorApp.Components;
using DevExpress.Blazor;

namespace MyBlazorApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents();
            builder.Services.AddDevExpressBlazor();
            var app = builder.Build();
            /* ... */
            app.Run();
        }
    }
}

    2. Register the DevExpress.Blazor namespace in the Components\_Imports.razor file:

      @using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MyBlazorApp
@using MyBlazorApp.Components
@using DevExpress.Blazor

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

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    @DxResourceManager.RegisterTheme(Themes.Fluent)
    @DxResourceManager.RegisterScripts()
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MyBlazorApp.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

      Note

      In a Blazor WebAssembly app, register the DevExpress Blazor theme in the HeadContent block of App.razor:

      <HeadContent>
    @DxResourceManager.RegisterTheme(Themes.Fluent)
</HeadContent>

    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. Most DevExpress Blazor components do not support static render mode. Enable interactivity with the following directive:

      @rendermode InteractiveServer

      Tip

      In a Blazor Web App that uses client-side interactivity, use the following directive instead:

      @rendermode InteractiveWebAssembly

      In a standalone Blazor WebAssembly App, omit the @rendermode directive because components are interactive by default.

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

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

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

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

    4. Press F5 to run your application.

      DevExpress Blazor Component

    Full code:

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