Radzen Blazor Components

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.

open_in_new Try Now play_circle_outline See in Action

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.

open_in_new Try Now play_circle_outline See in Action