Radzen Blazor Components v5 - RTL Support, New Themes and More

We are excited to announce a suite of new features and improvements to our free Radzen Blazor Components library! This update brings enhanced support for internationalization, new components, new dark themes, and significant improvements to typography and iconography. Let’s dive into the details!

Right-to-Left (RTL) support

One of the most significant updates in this major version is the introduction of the highly anticipated Right-to-Left (RTL) support. All Radzen Blazor Components now fully support RTL direction, making it easier to create applications in languages that are written from right to left, such as Arabic, Hebrew, and Persian.

To enable it, just add dir=”rtl” attribute to the html tag in your layout.

Here is a preview of the DataGrid component in Hebrew RTL mode using the in-browser auto translation from English. A preview of Radzen Blazor DataGrid component in Hebrew RTL mode using auto in-browser translation from English.

You can run the online demos in RTL mode - simply toggle the Enable RTL directionality option in the demos config.

New Components

RadzenAppearanceToggle

The new RadzenAppearanceToggle component allows end users to quickly switch between light and dark modes, enhancing user experience by providing an easy way to adapt the interface to their preference or environment.

RadzenAppearanceToggle component

Try it now in the online demos.

RadzenTheme

Use RadzenTheme component to load themes into your app. With the RadzenTheme component, applying and switching themes is more straightforward than ever.

To set a theme in .NET8 open the App.razor file of your application. Add this code within the head element:

<RadzenTheme Theme="material3" @rendermode="InteractiveServer" />

See how to use in other .NET versions in the Get Started article.

New Dark Themes

Our theme library expands with several new free themes, including the open-sourced Material Dark theme. All new themes are shipped with a WCAG compliant counterparts.

Here’s a rundown of the new additions:

  • Material Dark Theme: This popular theme is now open-sourced and available for free! Enjoy the sleek, modern look of Material Dark in your applications. Radzen Blazor Material Dark theme
  • Standard Dark Theme: A dark theme counterpart to the clean and professional Standard theme. Radzen Blazor Standard Dark theme
  • Humanistic Dark Theme: A dark variant of the Humanistic theme. Radzen Blazor Humanistic Dark theme
  • Software Dark Theme: A dark variant of the Software theme. Radzen Blazor Software Dark theme

New Variable Fonts

All our themes now utilize variable fonts, providing greater typographic flexibility. Variable fonts eliminate the traditional distinctions between different weights and styles that have been present as separate font files.

Variable fonts in Radzen Blazor Components

  • Source Sans Pro to Source Sans 3: We have replaced all Source Sans Pro fonts with the more versatile Source Sans 3 variable fonts.
  • Roboto to Roboto Flex: All Roboto fonts have been updated to the Roboto Flex variable font, offering a broader range of languages, styles and improved rendering.

New Material Symbols Icon Set

To complement the new typography, we have also updated our default icon set. We have replaced the Material Icons font with the new Material Symbols variable font containing more than 2,500 glyphs. This change brings a more cohesive and flexible icon set to your apps for a modern and consistent visual language.

Material Symbols in Radzen Blazor Components

And More

As a major version, v5 brings updates across the board — from dependencies and markup fixes to properties and naming conventions. Below is a preview of the updated Advanced Filtering buttons in Radzen DataGrid — one of many improvements introduced in v5 of Radzen Blazor Components. See all in the Changelog. Radzen Blazor DataGrid Filtering

Radzen.Blazor 5.0 in Radzen Blazor Studio

When migrating to Radzen.Blazor 5.0 you are likely to experience appearance issues. Those happen because the browser loads a cached (thus old) version of the theme CSS files. If you are using a free theme just clear your browser cache to force loading the latest CSS file. If you are using a premium theme you have to reapply the theme in Radzen Blazor Studio in order to update it: simply change to any other theme and then back to the one you were using.

Leverage Radzen on LinkedIn

Yes, we are on LinkedIn and you should follow us!

Now, you have the opportunity to showcase your expertise by adding Radzen Blazor Studio and Radzen Blazor Components as skills to your LinkedIn profile. Present your skills to employers, collaborators, and clients.

All you have to do is go to our Products page on LinkedIn and click the + Add as skill button.

by Vasil Yordanov

Radzen Blazor for Visual Studio Plugin

Hi all! We have some exciting news to share.
Read more