DevExpress-Examples · elenapeskova · Jul 28, 2025 · Jul 28, 2025
@@ -7,10 +7,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
-    <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.common.css") rel="stylesheet" />
-    <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.material.purple.light.compact.css") rel="stylesheet" />
+    <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/25.1.3/css/dx.fluent.blue.light.css") rel="stylesheet" />
     @DxResourceManager.RegisterScripts()
+    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
+        properties.UseBootstrapStyles = true;
+        properties.AddFilePaths(["css/theme-fluent.css"]);
+    }))
     <link href=@AppendVersion("css/site.css") rel="stylesheet" />
     <link href=@AppendVersion("DxtGaugeInBlazor.styles.css") rel="stylesheet" />
     <HeadOutlet />

@@ -7,6 +7,6 @@
     <GenerateTargetFrameworkAttribute>false</GenerateTargetFrameworkAttribute> 
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="DevExpress.Blazor" Version="24.2.2-beta" />
+    <PackageReference Include="DevExpress.Blazor" Version="25.1.*-*" />
   </ItemGroup>
 </Project>
@@ -8,7 +8,6 @@
     .AddInteractiveServerComponents();
 
 builder.Services.AddDevExpressBlazor(options => {
-    options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
     options.SizeMode = DevExpress.Blazor.SizeMode.Medium;
 });
 builder.Services.AddSingleton<WeatherForecastService>();

@@ -0,0 +1,43 @@
+body {
+    margin: 0;
+}
+
+
+.w-100 {
+    width: 100%;
+}
+
+.text-danger {
+    color: var(--DS-color-surface-danger-default-rest);
+}
+
+.p-4 {
+    padding: 1.5rem;
+}
+
+.navigation-drawer {
+    --dxbl-drawer-separator-border-width: 0;
+}
+
+.menu-item {
+    --dxbl-menu-item-color: #fff;
+    --dxbl-menu-item-image-color: #fff;
+}
+
+[data-fluent-darkmode] .dxbl-theme-fluent .welcome-card {
+    color: var(--DS-primary-70);
+}
+
+.icon {
+    --icon-width: 1.25rem;
+    --icon-height: 1.25rem;
+    --icon-back-mask-image: url("/images/back-fluent.svg");
+    --icon-close-mask-image: url("/images/close-fluent.svg");
+    --icon-menu-mask-image: url("/images/menu-fluent.svg");
+    --icon-docs-mask-image: url("/images/doc-fluent.svg");
+    --icon-demos-mask-image: url("/images/demos-fluent.svg");
+    --icon-home-mask-image: url("/images/home-fluent.svg");
+    --icon-weather-mask-image: url("/images/weather-fluent.svg");
+    --icon-counter-mask-image: url("/images/counter-fluent.svg");
+}
+
@@ -1,9 +1,3 @@
-<!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/460853146/25.1.3%2B)
-[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1069428)
-[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
-[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
-<!-- default badges end -->
 # Blazor - Use DevExtreme Circular Gauge in a Blazor Application
 
 This example shows how to embed [DevExtreme widgets](https://js.devexpress.com/Demos/WidgetsGallery/) into your Blazor application.
@@ -18,7 +12,6 @@ DevExtreme widgets require DevExtreme scripts and stylesheets. The DevExpress [R
 
 ```Razor
 <head>
-    <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.common.css") rel="stylesheet" />
     <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.material.purple.light.compact.css") rel="stylesheet" />
     <!-- ... -->
 </head>
@@ -60,9 +53,9 @@ The DevExpress Blazor UI Component Library includes multiple DevExtreme-based co
 
 [Add JavaScript-Based Components to an Application](https://docs.devexpress.com/Blazor/403578/common-concepts/add-js-components-to-application)
 <!-- feedback -->
-## Does this example address your development requirements/objectives?
-
-[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=no)
-
+## Does this example address your development requirements/objectives?
+
+[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=no)
+
 (you will be redirected to DevExpress.com to submit your response)
 <!-- feedback end -->