Radzen Blazor Components

Radzen Blazor Components v5 Changelog

Track and review changes to Radzen Blazor Components v5.

Dependencies link

  • Dropped Bootstrap - including the Bootsrap CSS is not mandatory any more.
  • Dropped the obsolete RadzenGrid component.
  • Dropped support for .NET Core 3.x and .NET 5.

Common link

  • New RTL Support - All components now support right to left direction for languages that are written from the right to the left (like Arabic).
  • New All components now render with box-sizing: border-box;.

New Components link

  • New RadzenAppearanceToggle - A toggle button to quickly switch between light and dark themes.
  • New RadzenTheme - Use it to load themes to your app.

Themes link

  • New Open sourced Material Dark theme - you can now use Material Dark theme for free!
  • New Added Standard Dark free theme.
  • New Added Humanistic Dark free theme.
  • New Added Software Dark free theme.

Colors link

  • New Added --rz-base color variable and shades.

Typography link

  • Update Replaced all Source Sans Pro fonts with Source Sans 3 variable fonts.
    • Added SourceSans3VF-Italic.ttf.woff2
    • Added SourceSans3VF-Upright.ttf.woff2
    • Deleted SourceSansPro-Black.woff
    • Deleted SourceSansPro-BlackIt.woff
    • Deleted SourceSansPro-Black.woff
    • Deleted SourceSansPro-BlackIt.woff
    • Deleted SourceSansPro-Bold.woff
    • Deleted SourceSansPro-BoldIt.woff
    • Deleted SourceSansPro-ExtraLight.woff
    • Deleted SourceSansPro-ExtraLightIt.woff
    • Deleted SourceSansPro-It.woff
    • Deleted SourceSansPro-Light.woff
    • Deleted SourceSansPro-LightIt.woff
    • Deleted SourceSansPro-Regular.woff
    • Deleted SourceSansPro-Semibold.woff
    • Deleted SourceSansPro-SemiboldIt.woff
  • Update Replaced all Roboto fonts with Roboto Flex variable font.
    • Added RobotoFlex.woff2
    • Deleted roboto-v15-latin-300.woff
    • Deleted roboto-v15-latin-700.woff
    • Deleted roboto-v15-latin-regular.woff
    • Deleted roboto-v30-latin-300.woff
    • Deleted roboto-v30-latin-500.woff
    • Deleted roboto-v30-latin-700.woff
    • Deleted roboto-v30-latin-regular.woff

Icons link

  • Breaking Replaced Material Icons font with Material Symbols variable font.
    • Added MaterialSymbolsOutlined.woff2
    • Deleted MaterialIcons-Regular.woff
  • Breaking Removed direction: ltr; rule from .rzi CSS class.

DataGrid link

  • Update Updated and unified Clear and Apply button appearance in filtering popups
  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-grid-header-filter-icon-margin is now --rz-grid-header-filter-icon-margin-inline
    • Updated --rz-grid-header-title-padding is now --rz-grid-header-title-padding-inline
    • Updated --rz-column-drag-handle-margin is now --rz-column-drag-handle-margin-inline
    • Updated --rz-grid-filter-icon-margin is now --rz-grid-filter-icon-margin-inline
    • Updated --rz-grid-group-header-item-padding is now --rz-grid-group-header-item-padding-block
    • Added --rz-grid-group-header-item-title-margin-inline
    • Added --rz-grid-group-header-item-padding-inline
    • Added --rz-grid-group-header-gap
    • Added --rz-grid-group-header-item-color
    • Deleted --rz-grid-group-header-item-margin
    • Deleted --rz-grid-group-header-items-margin

DataList link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-datalist-item-vertical-margin is now --rz-datalist-item-margin-block
    • Updated --rz-datalist-item-horizontal-margin is now --rz-datalist-item-margin-inline

DataFilter link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-datafilter-item-padding-y is now --rz-datafilter-item-padding-block
    • Updated --rz-datafilter-item-padding-left is now --rz-datafilter-item-padding-inline-start

Pager link

  • Breaking All CSS classes starting with .rz-paginator-* are renamed to .rz-pager-*
  • Breaking All CSS variables starting with --rz-paginator-* are renamed to --rz-pager-*
  • Breaking Replaced spacing related CSS variables and updated values respectively:
    • Added --rz-pager-gap
    • Deleted --rz-paginator-first-button-margin
    • Deleted --rz-paginator-last-button-margin
    • Deleted --rz-paginator-dropdown-margin
    • Deleted --rz-paginator-numeric-button-margin
  • Deleted --rz-paginator-back-button-hover-color
  • Deleted --rz-paginator-back-button-hover-background-color
  • Deleted --rz-paginator-next-button-hover-color
  • Deleted --rz-paginator-next-button-hover-background-color

Scheduler link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-scheduler-prev-next-button-padding is now --rz-scheduler-prev-next-button-padding-block and --rz-scheduler-prev-next-button-padding-inline
    • Updated --rz-scheduler-today-button-margin-left is now --rz-scheduler-today-button-margin-inline-start
    • Updated --rz-scheduler-event-padding is now --rz-scheduler-event-padding-block and --rz-scheduler-event-padding-inline
    • Updated --rz-scheduler-prev-button-border-radius is now split into:
      • --rz-scheduler-prev-button-border-start-start-radius
      • --rz-scheduler-prev-button-border-start-end-radius
      • --rz-scheduler-prev-button-border-end-start-radius
      • --rz-scheduler-prev-button-border-end-end-radius
    • Updated --rz-scheduler-next-button-border-radius is now split into:
      • --rz-scheduler-next-button-border-start-start-radius
      • --rz-scheduler-next-button-border-start-end-radius
      • --rz-scheduler-next-button-border-end-start-radius
      • --rz-scheduler-next-button-border-end-end-radius
  • New --rz-scheduler-highlight-background-color - Use it to highlight working hours in day view, or today in calendar view.

Tree link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-tree-node-padding is now --rz-tree-node-padding-block and --rz-tree-node-padding-inline
    • Updated --rz-tree-node-margin is now --rz-tree-node-margin-block and --rz-tree-node-margin-inline

Image link

  • New Added vertical-align: middle; to all images and SVGs inside a Radzen Blazor Component

Layout link

  • New CSS reset styles to <body> are applied only when <RadzenLayout> is used.

Dialog link

  • Breaking Dialog's title bar now uses flex model for its layout.
  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-dialog-title-padding is now --rz-dialog-title-padding-block and --rz-dialog-title-padding-inline

Sidebar link

  • Breaking Renamed direction related CSS variables and updated values respectively:
    • Updated --rz-sidebar-border-right is now --rz-sidebar-border-inline-end

Splitter link

  • Update Splitter icons now use font-family: var(--rz-icon-font-family) instead of hardcoded icon font.

Accordion link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-accordion-item-padding is now --rz-accordion-item-padding-block and --rz-accordion-item-padding-inline
    • Updated --rz-accordion-icon-margin is now --rz-accordion-icon-margin-inline
    • Updated --rz-accordion-toggle-icon-margin is now --rz-accordion-toggle-icon-margin-inline
    • Updated --rz-accordion-content-padding is now --rz-accordion-content-padding-block and --rz-accordion-content-padding-inline
    • Added --rz-accordion-toggle-icon-collapsed-rtl
    • Added --rz-accordion-toggle-icon-expanded-rtl

ContextMenu link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-context-menu-padding is now --rz-context-menu-padding-block and --rz-context-menu-padding-inline

Login link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-login-register-padding is now --rz-login-register-padding-block and --rz-login-register-padding-inline
    • Updated --rz-login-register-margin is now --rz-login-register-margin-block and --rz-login-register-margin-inline
    • Updated --rz-login-register-button-margin is now --rz-login-register-button-margin-block and --rz-login-register-button-margin-inline

Menu link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-menu-item-icon-margin is now --rz-menu-item-icon-margin-inline
    • Updated --rz-menu-item-padding is now --rz-menu-item-padding-block and --rz-menu-item-padding-inline
    • Updated --rz-menu-top-item-padding is now --rz-menu-top-item-padding-block and --rz-menu-top-item-padding-inline

PanelMenu link

  • Breaking Remapped CSS variables for margin, padding, color and background color to match the respective PanelMenu item level.
  • Breaking Renamed some of the above mentioned CSS variables and updated values respectively:
    • Updated --rz-panel-menu-color is now --rz-panel-menu-item-color
    • Updated --rz-panel-menu-background-color is now --rz-panel-menu-item-background-color
    • Updated --rz-panel-menu-hover-color is now --rz-panel-menu-item-hover-color
    • Updated --rz-panel-menu-hover-background-color is now --rz-panel-menu-item-hover-background-color
    • Updated --rz-panel-menu-padding is now --rz-panel-menu-padding-block and --rz-panel-menu-padding-inline
    • Updated --rz-panel-menu-item-padding is now --rz-panel-menu-item-padding-block and --rz-panel-menu-item-padding-inline
    • Updated --rz-panel-menu-item-2nd-level-padding is now --rz-panel-menu-item-2nd-level-padding-block and --rz-panel-menu-item-2nd-level-padding-inline
    • Updated --rz-panel-menu-item-margin is now --rz-panel-menu-item-margin-block and --rz-panel-menu-item-margin-inline
    • Updated --rz-panel-menu-item-2nd-level-margin is now --rz-panel-menu-item-2nd-level-margin-block and --rz-panel-menu-item-2nd-level-margin-inline
    • Updated --rz-panel-menu-icon-margin is now --rz-panel-menu-icon-margin-inline
    • Updated --rz-panel-menu-icon-2nd-level-margin is now --rz-panel-menu-icon-2nd-level-margin-inline
    • Added --rz-panel-menu-item-3rd-level-color
    • Added --rz-panel-menu-item-3rd-level-background-color

ProfileMenu link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-profile-menu-item-icon-margin is now --rz-profile-menu-item-icon-margin-inline
    • Updated --rz-profile-menu-padding is now --rz-profile-menu-padding-block and --rz-profile-menu-padding-inline

Steps link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-steps-number-padding is now --rz-steps-number-padding-block and --rz-steps-number-padding-inline
  • Breaking Prev and Next icon is now rendered via CSS. Instead of <i class="rzi">navigate_next</i> and <i class="rzi">navigate_before</i> the component now renders <span class="rzi"></span>

Tabs link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-tabs-icon-margin is now --rz-tabs-icon-margin-inline
    • Updated --rz-tabs-tab-padding is now --rz-tabs-tab-padding-block and --rz-tabs-tab-padding-inline
  • Breaking Updated Tab icon CSS classes <span class="rz-tabview-left-icon rzi" ... to <span class="rzi rz-tabview-icon" ....

Button link

  • Update Removed $button-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Button styles.

CheckBox link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-checkbox-margin is now --rz-checkbox-margin-block and --rz-checkbox-margin-inline
    • Updated --rz-checkbox-label-margin is now --rz-checkbox-label-margin-block and --rz-checkbox-label-margin-inline

ColorPicker link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-colorpicker-item-margin is now --rz-colorpicker-items-gap

DatePicker link

  • Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-datepicker-header-padding is now --rz-datepicker-header-padding-block and --rz-datepicker-header-padding-inline
    • Updated --rz-datepicker-calendar-padding is now --rz-datepicker-calendar-item-padding
    • Updated --rz-timepicker-padding is now --rz-timepicker-padding-block and --rz-timepicker-padding-inline
    • Added --rz-datepicker-calendar-padding-block
    • Added --rz-datepicker-calendar-padding-inline
    • Added --rz-datepicker-popup-width
    • Added --rz-datepicker-month-dropdown-width
    • Added --rz-datepicker-year-dropdown-width
    • Added --rz-datepicker-prev-next-icon-size
    • Deleted --rz-datepicker-prev-next-button-border-radius
    • Deleted --rz-datepicker-header-line-height

DropDown link

  • Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-dropdown-trigger-icon-margin is now --rz-dropdown-trigger-icon-margin-block and --rz-dropdown-trigger-icon-margin-inline
    • Updated --rz-dropdown-label-padding is now --rz-dropdown-label-padding-block and --rz-dropdown-label-padding-inline
    • Updated --rz-multiselect-checkbox-margin is now --rz-multiselect-checkbox-margin-block and --rz-multiselect-checkbox-margin-inline
    • Updated --rz-dropdown-chips-padding is now --rz-dropdown-chips-padding-block and --rz-dropdown-chips-padding-inline

DropDownDataGrid link

  • Update Improved lookup styles:
    • Added --rz-lookup-search-margin-bottom
    • Added --rz-lookup-search-gap

Fieldset link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-fieldset-legend-margin is now --rz-fieldset-legend-margin-block and --rz-fieldset-legend-margin-inline
    • Updated --rz-fieldset-legend-padding is now --rz-fieldset-legend-padding-block and --rz-fieldset-legend-padding-inline
    • Updated --rz-fieldset-toggle-margin is now --rz-fieldset-toggle-margin-block and --rz-fieldset-toggle-margin-inline

FormField link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-form-field-filled-padding is now --rz-form-field-filled-padding-block and --rz-form-field-filled-padding-inline
    • Updated --rz-form-field-start-end-padding is now --rz-form-field-start-end-padding-block and --rz-form-field-start-end-padding-inline
    • Updated --rz-form-field-margin is now --rz-form-field-margin-block and --rz-form-field-margin-inline
    • Updated --rz-form-field-filled-numeric-padding is now --rz-form-field-filled-numeric-padding-block and --rz-form-field-filled-numeric-padding-inline
    • Updated --rz-form-field-label-left is now --rz-form-field-label-inset-inline-start

HtmlEditor link

  • Update Changed Underline icon from format_underline to format_underlined

ListBox link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-listbox-checkbox-margin is now --rz-listbox-checkbox-margin-block and --rz-listbox-checkbox-margin-inline
    • Updated --rz-listbox-header-padding is now --rz-listbox-header-padding-block and --rz-listbox-header-padding-inline

Numeric link

  • Breaking All CSS classes starting with .rz-spinner-* are renamed to .rz-numeric-*
  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-numeric-input-padding is now --rz-numeric-input-padding-block and --rz-numeric-input-padding-inline

RadioButtonList link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-radio-label-margin is now --rz-radio-label-margin-block and --rz-radio-label-margin-inline
    • Updated --rz-radio-margin is now --rz-radio-margin-block and --rz-radio-margin-inline

SpeechToTextButton link

  • ---

SplitButton link

  • Update Remove redundant CSS variables:
    • Deleted --rz-splitbutton-menu-button-width
    • Deleted --rz-splitbutton-menu-button-padding
    • Deleted --rz-splitbutton-menu-button-font-size

Switch link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-switch-circle-margin is now --rz-switch-circle-offset

TextArea link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-text-area-padding is now --rz-text-area-padding-block and --rz-text-area-padding-inline

TextBox link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-input-padding is now --rz-input-padding-block and --rz-input-padding-inline

Badge link

  • Update Removed $badge-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Badge styles.

Chip link

  • Breaking Renamed spacing related CSS variables and updated values respectively:
    • Updated --rz-chip-padding is now --rz-chip-padding-block and --rz-chip-padding-inline

Notification link

  • Breaking New Notification markup. The component now uses flex model for its layout.
  • Breaking All CSS classes starting with .rz-growl-* are renamed to .rz-notification-*
  • Added New --rz-notification-gap CSS variable.

Alert link

  • Update Changed Alert icons:
    • check_circle_outline is now check_circle
    • error_outline is now error
    • info_outline is now info
    • lightbulb_outline is now lightbulb

ProgressBar link

  • Update Removed $progressbar-styles SCSS map and use $severity-styles-map and $progressbar-base-styles to generate CSS for ProgressBar styles.

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.

Learn More
New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙