https://github.com/telerik/blazor-ui
A collection of examples related to Telerik UI for Blazor Components: https://www.telerik.com/blazor-ui
https://github.com/telerik/blazor-ui
aspnetcore blazor blazor-applications blazor-components blazor-examples blazor-samples blazor-server blazor-ui blazor-webassembly datagrid grid razor razor-components sample-apps telerik ui wasm
Last synced: 10 months ago
JSON representation
A collection of examples related to Telerik UI for Blazor Components: https://www.telerik.com/blazor-ui
- Host: GitHub
- URL: https://github.com/telerik/blazor-ui
- Owner: telerik
- License: mit
- Created: 2019-01-23T12:39:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-08T10:41:39.000Z (10 months ago)
- Last Synced: 2025-04-14T08:16:40.938Z (10 months ago)
- Topics: aspnetcore, blazor, blazor-applications, blazor-components, blazor-examples, blazor-samples, blazor-server, blazor-ui, blazor-webassembly, datagrid, grid, razor, razor-components, sample-apps, telerik, ui, wasm
- Language: HTML
- Homepage: https://www.telerik.com/blazor-ui
- Size: 8.57 MB
- Stars: 352
- Watchers: 45
- Forks: 351
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://www.telerik.com/blazor-ui/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
This repository contains examples related to [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) that can be used in addition to the existing documentation or demos. They provide scenarios and answers to common how-to questions related to:
* [Blazor Data Grid](https://www.telerik.com/blazor-ui/grid?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Blazor Chart](https://www.telerik.com/blazor-ui/chart?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Blazor Editor](https://www.telerik.com/blazor-ui/editor?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Blazor Drawer](https://www.telerik.com/blazor-ui/drawer?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Blazor Scheduler](https://www.telerik.com/blazor-ui/scheduler?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) and more.
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](#common-support-questions)
* [Where can I find help?](#where-can-i-find-help)
* [When do you plan to release feature X?](#when-do-you-plan-to-release-feature-x)
* [Where do I make suggestions?](#where-do-i-make-suggestions)
* [Blazor UI Components](#blazor-ui-components)
* [Design to development](#design-to-development-support)
* [Sample Applications](#sample-applications)
* [Task Tracker Dashboard](#blazor-dashboard-application)
* [Financial Portfolio](#blazor-stocks-application)
* [Coffee Warehouse Dashboard](#blazor-coffee-warehouse-application)
* [Package References](#package-references)
* [Contribution](#contribution)
* [Licensing](#licensing)
* [Useful Links](#useful-links)
***
## Common Support Questions
### Where can I find help?
1. For community support, we recommend asking questions on Stack Overflow using the [telerik-blazor tag](http://stackoverflow.com/questions/tagged/telerik-blazor).
2. If you have an active trial or license, you can use the official [support channel](https://www.telerik.com/account/support-tickets?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) for questions, technical assistance, bug reports or problem resolutions.
### When do you plan to release feature X
Check the [Telerik UI for Blazor Roadmap](https://www.telerik.com/support/whats-new/blazor-ui/roadmap?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) 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](https://feedback.telerik.com/blazor?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github). 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 Spreadsheet Component
Spreadsheet Features
Spreadsheet Documentation
Spreadsheet 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 Rating Component
Rating Features
Rating Documentation
Rating 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 Sankey Chart Component
Sankey Chart Features
SankeyChart Documentation
SankeyChart 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 Badge Component
Badge Features
Badge Documentation
Badge 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](https://docs.telerik.com/blazor-ui/styling-and-themes/overview?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github), 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](https://demos.telerik.com/blazor-dashboard-app/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) 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.
* [Live demo](https://demos.telerik.com/blazor-dashboard-app/dashboard?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Source code](https://github.com/telerik/blazor-ui/tree/master/sample-applications/blazor-dashboard?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
### Blazor Stocks Application
The [Blazor Financial Portfolio Application](https://demos.telerik.com/blazor-financial-portfolio/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) 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.
* [Live demo](https://demos.telerik.com/blazor-financial-portfolio/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Source code](https://github.com/telerik/blazor-ui/tree/master/sample-applications/blazor-stocks)
### Blazor Coffee Warehouse Application
The [Blazor Coffee Warehouse Application](https://demos.telerik.com/blazor-coffee/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) 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.
* [Live demo](https://demos.telerik.com/blazor-coffee/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* [Source code](https://github.com/telerik/blazor-ui/tree/master/sample-applications/blazing-coffee)
## 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](https://docs.telerik.com/blazor-ui/getting-started/what-you-need?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github).
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](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) 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](https://www.telerik.com/blazor-ui?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github) 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](https://www.telerik.com/purchase/blazor-ui?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github).
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
* Browse all [UI for Blazor component demos live](https://demos.telerik.com/blazor-ui)
* Browse [the Telerik UI for Blazor documentation](https://docs.telerik.com/blazor-ui/introduction?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* Follow this link to [report bugs and add feature requests](https://feedback.telerik.com/blazor?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)
* Browse or contribute to [localization texts](https://github.com/telerik/blazor-ui-messages) used in the samples
* Create, run, share and test Blazor code snippets directly in the browser in our [Blazor REPL code runner](https://blazorrepl.telerik.com/?utm_medium=referral&utm_source=github&utm_campaign=blazor-awareness-components-examples-github)