# Welcome to UI for Blazor Documentation

Thank you for choosing <a href="https://www.telerik.com/blazor-ui" target="_blank">Telerik® UI for Blazor</a>!

The <a href="https://blazor.net/" target="_blank">Blazor framework by Microsoft</a> allows you to create rich web user interfaces with .NET and C#. The Telerik® UI for Blazor components facilitate the front-end development by providing ready-made UI components.

The UI for Blazor suite has the same HTML rendering and Theme stylesheets as the <a href="https://www.telerik.com/all-products" target="_blank">Kendo UI suites</a>, so previous experience with them can be helpful. The components in UI for Blazor are *native Blazor components* and not wrappers over jQuery widgets.

Visit the <a href="https://www.telerik.com/blazor-ui" target="_blank">Telerik UI for Blazor product overview page</a> to learn the benefits of using our components.

<CtaPanelIntroduction></CtaPanelIntroduction>

## Getting Started

If you are new to Telerik UI for Blazor, start from the [Telerik UI for Blazor Quick Start Tutorial](https://www.telerik.com/blazor-ui/documentation/getting-started/web-app).

Developers who are familiar with Blazor may prefer the [Workflow Details](https://www.telerik.com/blazor-ui/documentation/getting-started/workflow-details) article. It is a more advanced and flexible way to start using the Telerik components.

> This online Blazor documentation covers the latest version of Telerik UI for Blazor, which is `16.0.0`. You can also [download the offline PDF Blazor documentation](https://www.telerik.com/blazor-ui/documentation/introduction#learning-resources) for the required older product version.

If you are just getting started with Blazor and Web development, you may find the following resources useful in getting up to speed with the core concepts:

* [Telerik e-book: Blazor: A Beginner's Guide](https://www.telerik.com/campaigns/blazor/wp-beginners-guide-ebook) and its [Samples repo](https://github.com/EdCharbeneau/BlazorBookExamples)
* [MSDN: First Steps with Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0\&tabs=visual-studio)
* [MSDN: Razor Syntax Reference](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.0)

You can watch a YouTube playlist of getting started tutorials for Telerik UI for Blazor:

<iframe width="560" height="315" src="https://www.youtube.com/embed/HKsTL4byyTA?si=fKMLi2Vho7ikdD7_" title="Getting started with Telerik UI for Blazor" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## List of Components

<IntroTable>
  <IntroTableColumn>
    <IntroTableSection title="Data Management">
      <IntroTableAnchor title="Filter" href="/components/filter/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Grid" href="/components/grid/overview"></IntroTableAnchor>
      <IntroTableAnchor title="ListView" href="/components/listview/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Pager" href="/components/pager/overview"></IntroTableAnchor>
      <IntroTableAnchor title="PivotGrid" href="/components/pivotgrid/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Spreadsheet" href="/components/spreadsheet/overview"></IntroTableAnchor>
      <IntroTableAnchor title="TreeList" href="/components/treelist/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="File Management">
      <IntroTableAnchor title="DropZone" href="/components/dropzone/overview"></IntroTableAnchor>
      <IntroTableAnchor title="FileManager" href="/components/filemanager/overview"></IntroTableAnchor>
      <IntroTableAnchor title="FileSelect" href="/components/fileselect/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Upload" href="/components/upload/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Navigation">
      <IntroTableAnchor title="Breadcrumb" href="/components/breadcrumb/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Button" href="/components/button/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Button Group" href="/components/buttongroup/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Toggle Button" href="/components/togglebutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Floating Action Button" href="/components/floatingactionbutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Drawer" href="/components/drawer/overview"></IntroTableAnchor>
      <IntroTableAnchor title="DropDownButton" href="/components/dropdownbutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Floating Toolbar" href="/components/floatingtoolbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Menu" href="/components/menu/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Context Menu" href="/components/contextmenu/overview"></IntroTableAnchor>
      <IntroTableAnchor title="PanelBar" href="/components/panelbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="SegmentedControl" href="/components/segmentedcontrol/overview"></IntroTableAnchor>
      <IntroTableAnchor title="SmartPasteButton" href="/components/smartpastebutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Speech to Text Button" href="/components/speechtotextbutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="SplitButton" href="/components/splitbutton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Stepper" href="/components/stepper/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Tab Strip" href="/components/tabstrip/overview"></IntroTableAnchor>
      <IntroTableAnchor title="ToolBar" href="/components/toolbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="TreeView" href="/components/treeview/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Wizard" href="/components/wizard/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Diagrams and Maps">
      <IntroTableAnchor title="Diagram" href="/components/diagram/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Map" href="/components/map/overview"></IntroTableAnchor>
    </IntroTableSection>
  </IntroTableColumn>
  <IntroTableColumn>
    <IntroTableSection title="Editors">
      <IntroTableAnchor title="AutoComplete" href="/components/autocomplete/overview"></IntroTableAnchor>
      <IntroTableAnchor title="CheckBox" href="/components/checkbox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Color Gradient" href="/components/colorgradient/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Color Palette" href="/components/colorpalette/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Color Picker" href="/components/colorpicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Flat Color Picker" href="/components/flatcolorpicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="ComboBox" href="/components/combobox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Date Input" href="/components/dateinput/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Date Picker" href="/components/datepicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Time Picker" href="/components/timepicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="DateTime Picker" href="/components/datetimepicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Date Range Picker" href="/components/daterangepicker/overview"></IntroTableAnchor>
      <IntroTableAnchor title="DropDownList" href="/components/dropdownlist/overview"></IntroTableAnchor>
      <IntroTableAnchor title="DropDownTree" href="/components/dropdowntree/overview"></IntroTableAnchor>
      <IntroTableAnchor title="HTML Editor" href="/components/editor/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Image Editor" href="/components/imageeditor/overview"></IntroTableAnchor>
      <IntroTableAnchor title="ListBox" href="/components/listbox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Masked Textbox" href="/components/maskedtextbox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="MultiColumnComboBox" href="/components/multicolumncombobox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="MultiSelect" href="/components/multiselect/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Numeric Textbox" href="/components/numerictextbox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Radio Button Group" href="/components/radiogroup/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Range Slider" href="/components/rangeslider/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Signature" href="/components/signature/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Slider" href="/components/slider/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Switch" href="/components/switch/overview"></IntroTableAnchor>
      <IntroTableAnchor title="TextArea" href="/components/textarea/overview"></IntroTableAnchor>
      <IntroTableAnchor title="TextBox" href="/components/textbox/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Validation Tools" href="/components/validation/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Labels">
      <IntroTableAnchor title="Floating Label" href="/components/floatinglabel/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Badge" href="/components/badge/overview"></IntroTableAnchor>
    </IntroTableSection>
  </IntroTableColumn>
  <IntroTableColumn>
    <IntroTableSection title="Scheduling">
      <IntroTableAnchor title="Calendar" href="/components/calendar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Gantt" href="/components/gantt/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Scheduler" href="/components/scheduler/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Task Board" href="/components/taskboard/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Charts">
      <IntroTableAnchor title="Charts Overview" href="/components/chart/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Area Charts" href="/components/chart/types/area"></IntroTableAnchor>
      <IntroTableAnchor title="Bar Charts" href="/components/chart/types/bar"></IntroTableAnchor>
      <IntroTableAnchor title="Bubble Charts" href="/components/chart/types/bubble"></IntroTableAnchor>
      <IntroTableAnchor title="Candlestick Charts" href="/components/chart/types/candlestick"></IntroTableAnchor>
      <IntroTableAnchor title="Column Charts" href="/components/chart/types/column"></IntroTableAnchor>
      <IntroTableAnchor title="Donut Charts" href="/components/chart/types/donut"></IntroTableAnchor>
      <IntroTableAnchor title="Heatmap Charts" href="/components/chart/types/heatmap"></IntroTableAnchor>
      <IntroTableAnchor title="Line Charts" href="/components/chart/types/line"></IntroTableAnchor>
      <IntroTableAnchor title="OHLC Charts" href="/components/chart/types/ohlc"></IntroTableAnchor>
      <IntroTableAnchor title="Pie Charts" href="/components/chart/types/pie"></IntroTableAnchor>
      <IntroTableAnchor title="Radar Area Charts" href="/components/chart/types/radar-area"></IntroTableAnchor>
      <IntroTableAnchor title="Radar Column Charts" href="/components/chart/types/radar-column"></IntroTableAnchor>
      <IntroTableAnchor title="Radar Line Charts" href="/components/chart/types/radar-line"></IntroTableAnchor>
      <IntroTableAnchor title="Scatter Charts" href="/components/chart/types/scatter"></IntroTableAnchor>
      <IntroTableAnchor title="Scatter Line Charts" href="/components/chart/types/scatterline"></IntroTableAnchor>
      <IntroTableAnchor title="Stock Chart" href="/components/stockchart/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Gauges">
      <IntroTableAnchor title="Arc Gauge" href="/components/gauges/arc/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Circular Gauge" href="/components/gauges/circular/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Linear Gauge" href="/components/gauges/linear/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Radial Gauge" href="/components/gauges/radial/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Barcodes">
      <IntroTableAnchor title="Barcode" href="/components/barcodes/barcode/overview"></IntroTableAnchor>
      <IntroTableAnchor title="QR Code" href="/components/barcodes/qrcode/overview"></IntroTableAnchor>
    </IntroTableSection>
  </IntroTableColumn>
  <IntroTableColumn>
    <IntroTableSection title="Layout">
      <IntroTableAnchor title="Animation Container" href="/components/animationcontainer/overview"></IntroTableAnchor>
      <IntroTableAnchor title="AppBar" href="/components/appbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Card" href="/components/card/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Carousel" href="/components/carousel/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Dialog" href="/components/dialog/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Dock Manager" href="/components/dockmanager/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Expansion Panel" href="/components/expansionpanel/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Form" href="/components/form/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Grid Layout" href="/components/gridlayout/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Media Query" href="/components/mediaquery/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Tile Layout" href="/components/tilelayout/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Splitter" href="/components/splitter/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Stack Layout" href="/components/stacklayout/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Window" href="/components/window/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Conversational UI">
      <IntroTableAnchor title="AIPrompt" href="/components/aiprompt/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Chat" href="/components/chat/overview"></IntroTableAnchor>
      <IntroTableAnchor title="DatAInsightsComposer" href="/components/datainsightscomposer/overview"></IntroTableAnchor>
      <IntroTableAnchor title="InlineAIPrompt" href="/components/inlineaiprompt/overview"></IntroTableAnchor>
      <IntroTableAnchor title="LLM Kit" href="/components/llmkit/overview"></IntroTableAnchor>
      <IntroTableAnchor title="PromptBox" href="/components/promptbox/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Interactivity and UX">
      <IntroTableAnchor title="Chunk Progress Bar" href="/components/chunkprogressbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Loader" href="/components/loader/overview"></IntroTableAnchor>
      <IntroTableAnchor title="LoaderContainer" href="/components/loadercontainer/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Skeleton" href="/components/skeleton/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Notification" href="/components/notification/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Popover" href="/components/popover/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Popup" href="/components/popup/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Progress Bar" href="/components/progressbar/overview"></IntroTableAnchor>
      <IntroTableAnchor title="Tooltip" href="/components/tooltip/overview"></IntroTableAnchor>
    </IntroTableSection>
    <IntroTableSection title="Documents">
      <IntroTableAnchor title="Document Processing" href="/integrations/document-processing-libraries"></IntroTableAnchor>
      <IntroTableAnchor title="PdfProcessing" href="/integrations/document-processing-libraries"></IntroTableAnchor>
      <IntroTableAnchor title="SpreadProcessing" href="/integrations/document-processing-libraries"></IntroTableAnchor>
      <IntroTableAnchor title="SpreadStreamProcessing" href="/integrations/document-processing-libraries"></IntroTableAnchor>
      <IntroTableAnchor title="WordsProcessing" href="/integrations/document-processing-libraries"></IntroTableAnchor>
      <IntroTableAnchor title="ZipLibrary" href="/integrations/document-processing-libraries"></IntroTableAnchor>
    </IntroTableSection>
  </IntroTableColumn>
</IntroTable>

Use [our feedback portal](https://feedback.telerik.com/blazor) to tell us which components you want us to create and how you intend to use them with Blazor.

## Building Blocks and Page Templates

Page Templates offer ready-to-use Blazor layouts that effectively integrate the Telerik UI for Blazor components. These templates consist of Building Blocks, which are the individual elements that form the complete layouts. The templates and blocks streamline the development process by providing pre-designed, customizable elements. For more details, refer to the [Building Blocks and Page Templates documentation](https://www.telerik.com/design-system/docs/ui-templates/overview/).

## Trial and Commercial License

UI for Blazor comes as a single package for all license types—whether you have a trial or commercial license, you download the same file. By registering for a free 30-day trial, you can explore the full capabilities of the library and receive technical support.

To use UI for Blazor commercially, you need to <a href="https://www.telerik.com/purchase/blazor-ui" target="_blank">purchase a license</a>. Feel free to review the Telerik UI for Blazor <a href="https://www.telerik.com/purchase/license-agreement/blazor-ui" target="_blank">License Agreement</a> and get acquainted with the full terms of use.

## Support Options

For questions and issues related to Telerik UI for Blazor, use any of the available support channels:

* The [Telerik Blazor AI Tools](https://www.telerik.com/blazor-ui/documentation/ai/overview) provides Telerik UI for Blazor tips and produces code snippets that include Telerik UI for Blazor components and API.

* License holders and active trialists can take advantage of our outstanding customer support. To submit a support ticket, use the dedicated [UI for Blazor support](https://www.telerik.com/account/support-tickets/) system.

* The [UI for Blazor forums](https://www.telerik.com/forums/blazor) are part of the free support you can get from the community and from the UI for Blazor team on all kinds of general issues.

* The [UI for Blazor feedback portal](https://feedback.telerik.com/blazor) and [UI for Blazor roadmap](https://www.telerik.com/support/whats-new/blazor-ui/roadmap) provide information on the features in discussion and those planned for release.

* UI for Blazor uses [the feedback portal](https://feedback.telerik.com/blazor) as a bug tracker, and you can submit any related reports there. Also, check out the [closed bugs list](https://feedback.telerik.com/blazor?listMode=Recent\&typeId=3\&statusId=2).

* You may still need a tailor-made solution for your project. In such cases, go straight to [Progress Services](https://www.progress.com/services).

## Learning Resources

* <a href="https://demos.telerik.com/blazor-ui" target="_blank">Online Demos</a> - also available as a project that you can inspect and run locally. You can find them in the `demos` folder of your [installation](https://www.telerik.com/blazor-ui/documentation/installation/automated).

* <a href="https://docs.telerik.com/blazor-ui/knowledge-base" target="_blank">Knowledge Base</a> - contains answers to some common questions, problems and errors. Free-text search is also available.

* <a href="https://github.com/telerik/blazor-ui" target="_blank">Blazor Samples Repo</a> - example projects that showcase popular scenarios so you can jump-start your project by copying from them.

* <a href="https://www.telerik.com/support/blazor-ui" target="_blank">Blazor UI Support and Learning Resources</a> - a hub with links to all resources such as blogs, videos, repos, docs and so on.

* [Video Onboarding Course](https://www.telerik.com/blazor-ui/documentation/getting-started/video-onboarding) - through the Telerik Virtual Classroom, you can watch videos and learn how to build a Blazor app at your leisure.

* [Offline PDF documentation](https://www.telerik.com/account/downloads) for all product versions - select *Telerik UI for Blazor*, then choose a *version* from the dropdown and look for the ZIP files in the *Documentation* section.

## Next Steps

* [Quick Start with Telerik UI for Blazor](https://www.telerik.com/blazor-ui/documentation/getting-started/web-app)
* [Blazor Hybrid Specifics](https://www.telerik.com/blazor-ui/documentation/getting-started/hybrid-blazor)
* [Workflow Details for using the Telerik UI for Blazor components](https://www.telerik.com/blazor-ui/documentation/getting-started/workflow-details) (a concise version of the tutorials above)
* Use guided wizards to generate new Telerik Projects in [Visual Studio](https://www.telerik.com/blazor-ui/documentation/installation/vs-integration/new-project-wizard) and [Visual Studio Code](https://www.telerik.com/blazor-ui/documentation/installation/vs-code-integration/introduction).
* [Convert an existing project to a Telerik-enabled project](https://www.telerik.com/blazor-ui/documentation/installation/vs-integration/convert-project-wizard)
* [Style the Telerik Blazor Components](https://www.telerik.com/blazor-ui/documentation/styling-and-themes/overview)

<VideoMetadata 
 name="Getting Started with Telerik UI for Blazor: Overview | Chapter 1"
 description="In this introductory chapter, we’ll provide a complete overview of the course and what you can expect to learn. We’ll cover the essentials of Telerik UI for Blazor, including the prerequisites needed to get started and the resources available to you. Take a tour of the demo application and get acquainted with the course downloads to ensure you’re fully prepared for the journey ahead."
 thumbnail-url="https://img.youtube.com/vi/HKsTL4byyTA/maxresdefault.jpg"
 upload-date="2024-10-21T00:00:00Z"
 duration="PT13M49S"
 content-url="https://youtu.be/HKsTL4byyTA"
 embed-url="https://www.youtube.com/embed/HKsTL4byyTA">
</VideoMetadata>
