GitHub
auto_awesome

Enjoy Material 3

This is a preview of Radzen's new Material 3 premium theme, available only to Radzen Professional or Enterprise subscribers.

Browse components with a free theme by selecting one from the dropdown above.

Colors

List of colors and utility CSS classes.

Theme Colors

These are the root theme colors. Each theme has its own color values assigned. Change the theme to preview them.

--rz-white
--rz-base-50
--rz-base-100
--rz-base-200
--rz-base-300
--rz-base-400
--rz-base-500
--rz-base-600
--rz-base-700
--rz-base-800
--rz-base-900
--rz-black
--rz-primary
--rz-primary-lighter
--rz-primary-light
--rz-primary-dark
--rz-primary-darker
--rz-secondary
--rz-secondary-lighter
--rz-secondary-light
--rz-secondary-dark
--rz-secondary-darker
--rz-info
--rz-info-lighter
--rz-info-light
--rz-info-dark
--rz-info-darker
--rz-success
--rz-success-lighter
--rz-success-light
--rz-success-dark
--rz-success-darker
--rz-warning
--rz-warning-lighter
--rz-warning-light
--rz-warning-dark
--rz-warning-darker
--rz-danger
--rz-danger-lighter
--rz-danger-light
--rz-danger-dark
--rz-danger-darker
--rz-series-1
--rz-series-2
--rz-series-3
--rz-series-4
--rz-series-5
--rz-series-6
--rz-series-7
--rz-series-8

Utility CSS Classes

Use these classes to set background, text or border colors. E.g. class="rz-background-color-secondary"

Background-color
.rz-background-color-white
.rz-background-color-base-50
.rz-background-color-base-100
.rz-background-color-base-200
.rz-background-color-base-300
.rz-background-color-base-400
.rz-background-color-base-500
.rz-background-color-base-600
.rz-background-color-base-700
.rz-background-color-base-800
.rz-background-color-base-900
.rz-background-color-black
.rz-background-color-primary-lighter
.rz-background-color-primary-light
.rz-background-color-primary
.rz-background-color-primary-dark
.rz-background-color-primary-darker
.rz-background-color-secondary-lighter
.rz-background-color-secondary-light
.rz-background-color-secondary
.rz-background-color-secondary-dark
.rz-background-color-secondary-darker
.rz-background-color-info-lighter
.rz-background-color-info-light
.rz-background-color-info
.rz-background-color-info-dark
.rz-background-color-info-darker
.rz-background-color-success-lighter
.rz-background-color-success-light
.rz-background-color-success
.rz-background-color-success-dark
.rz-background-color-success-darker
.rz-background-color-warning-lighter
.rz-background-color-warning-light
.rz-background-color-warning
.rz-background-color-warning-dark
.rz-background-color-warning-darker
.rz-background-color-danger-lighter
.rz-background-color-danger-light
.rz-background-color-danger
.rz-background-color-danger-dark
.rz-background-color-danger-darker
.rz-background-color-series-1
.rz-background-color-series-2
.rz-background-color-series-3
.rz-background-color-series-4
.rz-background-color-series-5
.rz-background-color-series-6
.rz-background-color-series-7
.rz-background-color-series-8
Color on white
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Color on black
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Border-color
.rz-border-color-white
.rz-border-color-base-50
.rz-border-color-base-100
.rz-border-color-base-200
.rz-border-color-base-300
.rz-border-color-base-400
.rz-border-color-base-500
.rz-border-color-base-600
.rz-border-color-base-700
.rz-border-color-base-800
.rz-border-color-base-900
.rz-border-color-black
.rz-border-color-primary-lighter
.rz-border-color-primary-light
.rz-border-color-primary
.rz-border-color-primary-dark
.rz-border-color-primary-darker
.rz-border-color-secondary-lighter
.rz-border-color-secondary-light
.rz-border-color-secondary
.rz-border-color-secondary-dark
.rz-border-color-secondary-darker
.rz-border-color-info-lighter
.rz-border-color-info-light
.rz-border-color-info
.rz-border-color-info-dark
.rz-border-color-info-darker
.rz-border-color-success-lighter
.rz-border-color-success-light
.rz-border-color-success
.rz-border-color-success-dark
.rz-border-color-success-darker
.rz-border-color-warning-lighter
.rz-border-color-warning-light
.rz-border-color-warning
.rz-border-color-warning-dark
.rz-border-color-warning-darker
.rz-border-color-danger-lighter
.rz-border-color-danger-light
.rz-border-color-danger
.rz-border-color-danger-dark
.rz-border-color-danger-darker
.rz-border-color-series-1
.rz-border-color-series-2
.rz-border-color-series-3
.rz-border-color-series-4
.rz-border-color-series-5
.rz-border-color-series-6
.rz-border-color-series-7
.rz-border-color-series-8

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.


Source Code licensed under MIT

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙