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.
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:
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.
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.
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.
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.
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:
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:
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.
Start from a template! Let’s use this sample from Telerik UI for Blazor so you can learn how things work.
<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>
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!
Jefferson S. Motta is a senior software developer, IT consultant and system analyst from Brazil, developing in the .NET platform since 2011. Creator of www.Advocati.NET, since 1997, a CRM for Brazilian Law Firms. He enjoys being with family and petting his cats in his free time. You can follow him on LinkedIn and GitHub.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required