Radzen Blazor Components

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.

Supercharge your Blazor development with 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. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

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

Demos Configuration

Premium Themes

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

Free Themes

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