Radzen Blazor Components

Documentation About Radzen

RadzenText

Use the `<RadzenText>` component to format text in your application.

Text Style link

Use the TextStyle property to apply a predefined text style.

Radzen Heading 1

Radzen Heading 2

Radzen Heading 3

Radzen Heading 4

Radzen Heading 5

Radzen Heading 6

Radzen Subtitle 1

Radzen Subtitle 2

Radzen Body 1 Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Radzen Body 2 Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Radzen Button
Radzen Caption
Radzen Overline

Text Style and Tag Name link

You can use TextStyle together with TagName to apply different styling while keeping the code semantically correct.

This is a paragraph styled as H3

Display headings link

Use display headings to emphasise a text or page title. Display headings are usually larger than traditional headings.

Radzen Display 1

Radzen Display 2

Radzen Display 3

Radzen Display 4

Radzen Display 5

Radzen Display 6

Text Align link

You can use TextAlign to vertically align your text.

TextAlign.Center
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Left
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Right
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Start
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.End
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Justify
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Text Functional Colors link

These are the theme's text color CSS variables. Each theme has its own text color values assigned. Change the theme to preview them. You can use CSS variables in styles e.g. style="color: var(--rz-text-secondary-color);"

--rz-text-color --rz-text-secondary-color --rz-text-tertiary-color --rz-text-disabled-color

--rz-text-contrast-color

Text Transform link

Use CSS classes to capitalize text. E.g. class="rz-text-uppercase".

This is capitalized

This is uppercase

This is lowercase

Text Wrap link

Use rz-text-wrap, rz-text-nowrap, and rz-text-truncate CSS classes to specify how the text content should wrap. E.g. class="rz-text-truncate".

This text wraps.

This text does not wrap.

This text is truncated.

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.