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

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.

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

New Componentslink

RadzenAppearanceTogglelink

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.

Try it now in the online demos.

RadzenThemelink

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 Themeslink

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.
• Standard Dark Theme: A dark theme counterpart to the clean and professional Standard theme.
• Humanistic Dark Theme: A dark variant of the Humanistic theme.
• Software Dark Theme: A dark variant of the Software theme.

New Variable Fontslink

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.

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

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.

And Morelink

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 5.0 in Radzen Blazor Studiolink

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.