Skip to content

telerik/blazor-ui

Repository files navigation

Telerik UI for Blazor Components and Sample Apps

Telerik UI for Blazor enables you to develop new Blazor applications and modernize legacy web projects in half the time with a high-performing Blazor Data Grid and 100+ truly native, easy-to-customize UI components to cover any requirement.

Try Telerik Blazor UI

This repository contains examples related to Telerik UI for Blazor components that can be used in addition to the existing documentation or demos. They provide scenarios and answers to common how-to questions related to:

The included code examples are applicable for both Blazor WebAssembly and Blazor Server projects. For most of them, a component and some classes are provided to illustrate a specific use case can be achieved.

NOTE: This repository does not contain the actual source code of the components, or the demos application available at the official UI for Blazor demos. The demos application is available as an offline project from your Telerik UI for Blazor installation.


Table of Contents


Common Support Questions

Where can I find help?

  1. For community support, we recommend asking questions on Stack Overflow using the telerik-blazor tag.
  2. If you have an active trial or license, you can use the official support channel for questions, technical assistance, bug reports or problem resolutions.

When do you plan to release feature X

Check the Telerik UI for Blazor Roadmap to see a list of components, features and tooling we have planned.

Where do I make suggestions?

If your feature isn’t listed in the product roadmap, check our dedicated feedback portal. You can upvote existing requested items or If you don’t see your feature on our portal, you can request the feature there.

Blazor UI Components

Blazor Data Management

Blazor DataGrid Component Gird Features Data Grid Documentation Data Grid Demos
Blazor ListView Component List View Features ListView Documentation ListView Demos
Blazor TreeList Component TreeList Features TreeList Documentation TreeList Demos
Blazor PivotGrid Component PivotGrid Features PivotGrid Documentation PivotGrid Demos
Blazor Filter Component Filter Features Filter Documentation Filter Demos
Blazor Pager Component Pager Features Pager Documentation Pager Demos

Blazor File Management

Blazor DropZone DropZone Features DropZone Documentation DropZone Demos
Blazor File Manager FileManager Features FileManager Documentation FileManager Demos
Blazor FileUpload Component File Upload Features FileUpload Documentation FileUpload Demos
Blazor FileSelect Component File Select Features FileSelect Documentation FileSelect Demos

Blazor Geo Visualization

Blazor Map Component Map Features Map Documentation Map Demos

Blazor Scheduling Components

Blazor Calendar Component Calendar Features Calendar Documentation Calendar Demos
Blazor Gantt Component Gantt Features Gantt Documentation Gantt Demos
Blazor Scheduler Component Scheduler Features Scheduler Documentation Scheduler Demos

Blazor Editor Components

Blazor AutoComplete Component AutoComplete Features AutoComplete Documentation AutoComplete Demos
Blazor Checkbox Component Checkbox Features Checkbox Documentation Checkbox Demos
Blazor ColorGradient Component Color Gradient Features Color Gradient Documentation Color Gradient Demos
Blazor ColorPalette Component Color Palette Features ColorPalette Documentation ColorPalette Demos
Blazor ColorPicker Component Color Picker Features ColorPicker Documentation ColorPicker Demos
Blazor FlatColorPicker Component Flat Color Picker Features FlatColorPicker Documentation FlatColorPicker Demos
Blazor ListBox Component ListBox Features ListBox Documentation ListBox Demos
Blazor ComboBox Component ComboBox Features ComboBox Documentation ComboBox Demos
Blazor DateInput Component Date Input Features DateInput Documentation DateInput Demos
Blazor DatePicker Component Date Picker Features DatePicker Documentation DatePicker Demos
Blazor DateRangePicker Component DateRangePicker Features DateRangePicker Documentation DateRangePicker Demos
Blazor DateTimePicker Component DateTimePicker Features DateTimePicker Documentation DateTimePicker Demos
Blazor TimePicker Component Time Picker Features TimePicker Documentation TimePicker Demos
Blazor DropDownList Component DropDownList Features DropDownList Documentation DropDownList Demos
Blazor MaskedTextBox Component MaskedTextBox Features MaskedTextBox Documentation MaskedTextBox Demos
Blazor MultiSelect Component Multi Select Features MultiSelect Documentation MultiSelect Demos
Blazor MultiColumnComboBox Component MultiColumn ComboBox Features MultiColumn ComboBox Documentation MultiColumn ComboBox Demos
Blazor NumericTextBox Component Numeric TextBox Features NumericTextBox Documentation NumericTextBox Demos
Blazor RadioGroup Component Radio Group Features RadioGroup Documentation RadioGroup Demos
Blazor Editor Component Editor Features Editor Documentation Editor Demos
Blazor TextArea Component Text Area Features TextArea Documentation TextArea Demos
Blazor TextBox Component TextBox Features TextBox Documentation TextBox Demos
Blazor Signature Component Signature Features Signature Documentation Signature Demos
Blazor Slider Component Slider Features Slider Documentation Slider Demos
Blazor RangeSlider Component RangeSlider Features RangeSlider Documentation RangeSlider Demos
Blazor Switch Component Switch Features Switch Documentation Switch Demos
Blazor ValidationMessage Component ValidationMessage Features ValidationMessage Documentation ValidationMessage Demos
Blazor ValidationSummary Component ValidationSummary Features ValidationSummary Documentation ValidationSummary Demos
Blazor ValidationTooltip Component ValidationTooltip Features ValidationTooltip Documentation ValidationTooltip Demos

Blazor Data Visualization Components

Blazor Chart Component Chart Features Chart Documentation Chart Demos
Blazor Area Chart Component Area Chart Features AreaChart Documentation AreaChart Demos
Blazor Bar Chart Component Bar Chart Features BarChart Documentation BarChart Demos
Blazor Bubble Chart Component Bubble Chart Features BubbleChart Documentation BubbleChart Demos
Blazor Column Chart Component Column Chart Features ColumnChart Documentation ColumnChart Demos
Blazor Line Chart Component Line Chart Features LineChart Documentation LineChart Demos
Blazor Donut Chart Component Donut Chart Features DonutChart Documentation DonutChart Demos
Blazor Pie Chart Component Pie Chart Features PieChart Documentation PieChart Demos
Blazor Stock Chart Component Stock Chart Features StockChart Documentation StockChart Demos
Blazor Candlestick Chart Component Candlestick Chart Features Candlestick Documentation Candlestick Demos
Blazor OHLC Chart Component OHLC Chart Features OHLC Documentation OHLC Demos
Blazor Heatmap Chart Component Heatmap Chart Features HeatmapChart Documentation HeatmapChart Demos
Blazor Radar Area Chart Component RadarArea Chart Features RadarAreaChart Documentation RadarAreaChart Demos
Blazor Radar Column Chart Component RadarColumn Chart Features RadarColumn Documentation RadarColumn Demos
Blazor Range Bar Chart Component RangeBar Chart Features RangeBar Documentation RadarColumn Demos
Blazor Range Column Chart Component RangeColumn Chart Features RangeColumn Documentation RangeColumn Demos
Blazor Range Area Chart Component RangeArea Chart Features RangeArea Documentation RangeArea Demos
Blazor Radar Line Chart Component RadarLine Chart Features RadarLine Documentation RadarLine Demos
Blazor Scatter Chart Component Scatter Chart Features ScatterChart Documentation ScatterChart Demos
Blazor Scatter Line Chart Component ScatterLine Chart Features ScatterLineChart Documentation ScatterLineChart Demos
Blazor Waterfall Chart Component Waterfall Chart Features Waterfall Documentation Waterfall Demos

Blazor Barcode Components

Blazor Barcode Component Barcode Features Barcode Documentation Barcode Demos
Blazor QR Code Component QR Code Features QRCode Documentation QRCode Demos

Blazor Gauges Components

Blazor ArcGauge Component ArcGauge Features ArcGauge Documentation ArcGauge Demos
Blazor CircularGauge Component CircularGauge Features CircularGauge Documentation CircularGauge Demos
Blazor LinearGauge Component LinearGauge Features LinearGauge Documentation LinearGauge Demos
Blazor RadialGauge Component RadialGauge Features RadialGauge Documentation RadialGauge Demos

Interactivity & UX

Blazor AIPrompt Component AIPrompt Features AIPrompt Documentation AIPrompt Demos
Blazor ProgressBar Component ProgressBar Features ProgressBar Documentation ProgressBar Demos
Blazor ChunkProgressBar Component ChunkProgressBar Features ChunkProgressBar Documentation ChunkProgressBar Demos
Blazor Loader Component Loader Features Loader Documentation Loader Demos
Blazor LoaderContainer Component LoaderContainer Features LoaderContainer Documentation LoaderContainer Demos
Blazor Notification Component Notification Features Notification Documentation Notification Demos
Blazor Popover Component Popover Features Popover Documentation Popover Demos
Blazor Popup Component Popup Features Popup Documentation Popup Demos
Blazor Tooltip Component Tooltip Features Tooltip Documentation Tooltip Demos
Blazor Skeleton Component Skeleton Features Skeleton Documentation Skeleton Demos

Blazor Layout Components

Blazor AppBar Component AppBar Features AppBar Documentation AppBar Demos
Blazor Avatar Component Avatar Features Avatar Documentation Avatar Demos
Blazor Carousel Component Carousel Features Carousel Documentation Carousel Demos
Blazor Card Component Card Features Card Documentation Card Demos
Blazor Animation Container Animation Features Animation Documentation Animation Demos
Blazor Dialog Component Dialog Features Dialog Documentation Dialog Demos
Blazor Form Component Form Features Form Documentation Form Demos
Blazor GridLayout Component GridLayout Features GridLayout Documentation GridLayout Demos
Blazor StackLayout Component StackLayout Features StackLayout Documentation StackLayout Demos
Blazor MediaQuery Component MediaQuery Features MediaQuery Documentation MediaQuery Demos
Blazor Splitter Component Splitter Features Splitter Documentation Splitter Demos
Blazor TileLayout Component TileLayout Features TileLayout Documentation TileLayout Demos
Blazor Window Component Window Features Window Documentation Window Demos

Blazor Icon Components

Blazor FontIcon Component FontIcon Features FontIcon Documentation FontIcon Demos
Blazor SvgIcon Component SvgIcon Features SvgIcon Documentation SvgIcon Demos

Blazor Label Components

Blazor FloatingLabel Component FloatingLabel Features FloatingLabel Documentation FloatingLabel Demos

Blazor Navigation Components

Blazor Breadcrumb Component Breadcrumb Features Breadcrumb Documentation Breadcrumb Demos
Blazor Button Component Button Features Button Documentation Button Demos
Blazor ButtonGroup Component ButtonGroup Features ButtonGroup Documentation ButtonGroup Demos
Blazor Chip Component Chip Features Chip Documentation Chip Demos
Blazor ChipList Component ChipList Features ChipList Documentation ChipList Demos
Blazor SplitButton Component SplitButton Features SplitButton Documentation SplitButton Demos
Blazor ToggleButton Component ToggleButton Features ToggleButton Documentation ToggleButton Demos
Blazor ContextMenu Component ContextMenu Features ContextMenu Documentation ContextMenu Demos
Blazor Menu Component Menu Features Menu Documentation Menu Demos
Blazor Drawer Component Drawer Features Drawer Documentation Drawer Demos
Blazor DropDownButton Component DropDownButton Features DropDownButton Documentation DropDownButton Demos
Blazor PanelBar Component PanelBar Features PanelBar Documentation PanelBar Demos
Blazor TabStrip Component TabStrip Features TabStrip Documentation TabStrip Demos
Blazor Toolbar Component Toolbar Features Toolbar Documentation Toolbar Demos
Blazor TreeView Component TreeView Features TreeView Documentation TreeView Demos
Blazor Stepper Component Stepper Features Stepper Documentation Stepper Demos
Blazor Wizard Component Wizard Features Wizard Documentation Wizard Demos

Blazor PDF Components

Blazor PDF Viewer Component PDF Viewer Features PDF Viewer Documentation PDF Viewer Demos

Document Processing Libraries

As part of your Telerik UI for Blazor trial or licensed copy you get access to several document processing libraries that allow you to convert, manage and export data to different file formats.

Blazor PDF Processing Library PDF Processing Features PDF Processing Documentation PDF Processing Demos
Blazor Spread Processing Library Spread Processing Features Spread Processing Documentation Spread Processing Demos
Blazor SpreadStream Processing Library SpreadStream Processing Features SpreadStream Processing Documentation SpreadStream Processing Demos
Blazor Words Processing Library Words Processing Features Words Processing Documentation Words Processing Demos
Blazor Zip Library Zip Library Features Zip Library Documentation Zip Library Demos

Design-to-Development Support

3 Design Themes

Telerik Ui for Blazor includes three built-in themes: Blazor Default Theme, Material and Bootstrap Themes, as well as multiple color swatches including "Ocean Blue" targeting accessibility compliance.

Design Kits for Figma

3 Telerik UI Design Kits for Figma Telerik UI Figma Design Kits Documentation

Customize the Telerik UI for Blazor Themes to Match Your Brand

Blazor ThemeBuilder Apply Your Brand Colors Telerik UI for Blazor ThemeBuilder App

Sample Applications

Blazor Dashboard Application

We created the Blazor Dashboard Application following the best practices of building UI with Telerik UI for Blazor components, which makes it a fantastic learning resource. You can see a complete task tracking application and how easy it is to set up complex components such as the Data Grid (Table), Charts, or Forms.

Blazor Dashboard sample

Blazor Stocks Application

The Blazor Financial Portfolio Application is a progressive web app (PWA) which shows how to create fast, beautiful and dynamic financial dashboards. It takes full advantage of Blazor's fast rendering and shows dynamic data updates in real time which allows monitoring data with no visible delay.

Financial portfolio sample

Blazor Coffee Warehouse Application

The Blazor Coffee Warehouse Application is a coffee warehouse management application that shows CRUD operations over various data grids and other components, visualizations with Charts and everything else you would need for a warehouse.

Blazor Coffee App

Package References

The projects usually reference a commercial version of UI for Blazor components. If you only have a trial license, replace the reference to the NuGet package and to the JS Interop file and/or Theme accordingly.

The references (both to Telerik UI for Blazor, and the .NET framework) are usually up-to-date for the time of creation. You may need to update to their latest versions and make any necessary changes. The Blazor framework is evolving rapidly and these examples may not get their references updated all the time. Nevertheless, the general approaches should remain valid, barring breaking changes in the framework.

Contribution

Issues and Pull Requests are welcome.

To submit a pull request, you should first fork the repo.

Licensing

Telerik UI for Blazor is a commercial UI library. To use the components, you need to either register for a free trial or purchase a license.

The 30-day free trial can be obtained from Telerik UI for Blazor product page and gives you access to all Telerik UI for Blazor components and their full functionality. For more infromation regarding the available license and budnle options you can review the product pricing page.

For both active trialist and license holders you get access to our legendary technical support provided directly by the UI for Blazor dev team!

Useful Links