Basic Themes and Customization in Telerik UI for Blazor

Telerik UI for Blazor makes it easy for you to tailor your app to your exact design specifications and in a variety of approaches. Learn more in this post.

Progress Telerik UI for Blazor is a comprehensive library of native UI components designed to create visually stunning Blazor applications. Using the power of the latest .NET 7/8 (yet in preview), you can access Blazor’s unique capabilities. Telerik UI for Blazor is native to Blazor, ensuring seamless integration and performance improvements over wrapped components. In addition, its components fully support Blazor Server and Blazor WebAssembly.

Its wide range of high-quality components—from Grid, Charts and Forms to Scheduler and Editor—makes development faster and more straightforward. As a result, the UI can help you build applications that precisely meet your requirements.

One of the standout features of Telerik UI for Blazor is its ability to cut down development time significantly. It is faster because its components come with the functionalities you need, such as sorting, filtering and pagination for Grids or various date and time views for Schedulers. Eliminating the need to manually implement these functionalities, you’re instead free to focus on other critical aspects of your application.

Additionally, Progress Telerik provides comprehensive documentation and support with a legendary support team that helps ensure you have all the information you need to utilize the UI effectively.

Telerik UI for Blazor is not just a library but a comprehensive solution 360° for modern application development, facilitating the creation of high-quality, scalable and visually stunning Blazor applications. And with its many options for customization, you will be able to style your app exactly how you want with ease.

Levels of Customization in Telerik UI for Blazor

Choose a Pre-Built Theme

A significant advantage of Telerik UI for Blazor is its support for modern design standards. It has several built-in professionally designed themes—predefined sets of colors, fonts and style details that determine an application’s overall look and feel.

Select one of these themes that suits your application and apply it right out of the box. Use the Wizard to get started, or reference the related CSS file in your project.

The available built-in themes are:

• Default: A neutral styling that suits most use cases.
• Bootstrap: A theme that matches the Bootstrap styling.
• Material: Implements the Material Design Guidelines.
• Fluent: Based on Microsoft Fluent UI.

Customize Your Theme

Looking for a bit more personal touch? You can also customize the themes to fit your brand.

In that case, Progress provides a ThemeBuilder tool to tailor your chosen theme’s colors, fonts and other stylistic elements. Adjust various parameters to your liking, and voilà, you can download a custom CSS file embedded with your unique modifications.

Customize Components

Dive deeper into customization by exploring the variety of parameters each component offers. Individual components of Telerik UI for Blazor can be customized in multiple ways. At a basic level, you can use the various parameters provided by each element to adjust its behavior. For instance, set the Size parameter of a Grid component to control the number of displayed items. But, again, the flexibility is all yours.

Customize CSS Classes

For stylistic customizations, you can also apply your own CSS classes to the components. Just set the Class parameter of an element to your desired CSS class.

Create Templates

For more nuanced customizations, Telerik UI for Blazor offers template parameters. These parameters allow you to completely control the rendered HTML of a component. For example, the Grid component provides a RowTemplate parameter to define custom row content.

Configuring Themes Using Static Assets

Let’s walk through customizing a theme. When starting a new project with Telerik Extension, you can select a predefined theme for your application as mentioned earlier:

Sample Customization

In the project, the template generated the code for _Host.cshtml.

<link  href="https://blazor.cdn.telerik.com/blazor/4.2.0/kendo-theme-fluent/swatches/fluent-main.css"  rel="stylesheet"  type="text/css"  />
<script  src="https://blazor.cdn.telerik.com/blazor/4.2.0/telerik-blazor.min.js"  defer></script>

On a single page, which you can see in a preview on the Telerik website, you can select these themes:

<!DOCTYPE  html>
<html>
<head>
. . .
<!-- Choose only one of the themes -->
 
<link   href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" rel="stylesheet"  />
<!--
  <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
  <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-material/all.css" rel="stylesheet" />
-->
 
<!-- For Trial licenses, use one of the following -->
<!--
  <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" rel="stylesheet" />
  <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
  <link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-material/all.css" rel="stylesheet" />
-->
</head>
 
. . .
</html>

Static assets are part of the NuGet package, and the framework will copy them automatically to the output folder during the build. They provide the following benefits:

• The necessary resources for the package are always available to you from the framework.
• The application can rely only on local resources and not on third parties (such as CDN providers).
• You do not have to change their paths after updating the package version (a common requirement when using CDNs).

You can reference the built-in Telerik assets like the JS Interop file and the theme stylesheets from a cloud CDN instead of a local resource on your server. The Telerik UI for Blazor CDN distributes the most standard swatches for each base theme. The additional Themes CDN distributes all available swatches for the built-in themes. Ensure that the version in the URLs matches the performance of the Telerik UI for the Blazor package. If you decide to use a CDN over static assets, you should implement a fallback in case the CDN is unavailable to your users.

Both options are easy to implement. You’re simply referencing either local or remote resources in your HTML file. Your choice will depend on your specific needs and preferences.

Don’t Start from Nothing

Start from a template! Let’s use this sample from Telerik UI for Blazor so you can learn how things work.

Using Progress ThemeBuilder

1. Select your project type. In this case, it’s Blazor.

2. In ThemeBuilder’s main screen, you can change colors and layouts.

3. Alter colors from your theme via the Palette.

4. Click Export on the top of the ThemeBuilder page to save the zip file. Unpack the zip and add the CSS file to your project like so:

<link  href="./css/template-blozor23.css"  rel="stylesheet"  type="text/css"  />
<script  src="https://blazor.cdn.telerik.com/blazor/4.2.0/telerik-blazor.min.js"  defer></script>

5. Here’s a quick before-and-after comparison

Conclusion

Unleash the full potential of Blazor with Telerik UI for Blazor. This comprehensive suite of native UI components enables you to build visually stunning applications effortlessly. Benefit from many high-quality elements, from Grids and Charts to intricate Scheduler and Editor components—all designed to streamline your workflow and reduce development time.

Various out-of-the-box features and themes let you focus on innovating, not just implementing. Embrace modern design standards and make your brand brighter using customizable themes.

Progress Telerik’s extensive documentation and award-winning support make your journey toward creating modern applications smooth and worry-free. Telerik UI for Blazor really is the complete solution for your application development needs.

With Telerik UI for Blazor, you are the designer. So let your imagination run wild and build an indeed your application. Start your creative journey with Telerik today—try it for free!

References

• Telerik UI for Blazor demo
• Telerik UI for Blazor homepage
• Progress ThemeBuilder