Welcome to Blazor Components

21 Oct 202617 minutes to read

Blazor Components is an enterprise-grade, native UI components library for creating Blazor Web, Blazor WebAssembly and Blazor Server applications. Built specifically for Blazor, the components are lightweight, responsive, and touch-friendly to support modern web applications. The library is engineered for performance, keyboard-first accessibility, and global reach, with rich data visualization and productivity components.

Ready to streamline your Blazor development? Discover the full potential of Blazor components with AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. Explore AI Coding Assistant

Why teams choose us?

  • Enterprise coverage: A wide range of UI, data visualization, and editor components to cover dashboards, forms, documents, and line-of-business workflows.
  • Built for performance: Virtualization, lazy loading, lightweight payloads, and efficient rendering patterns for large datasets.
  • Production UX: Responsive layouts, high DPI rendering, touch support, and extensive keyboard interactions.
  • Global by default: Localization, internationalization, and right-to-left (RTL) support.
  • Accessible: WCAG-compliant semantics, ARIA attributes, and contrast-aware theming.
  • Tooling and docs: Extensive samples, API reference, and guidance to get productive quickly.

What’s included?

How it fits into Blazor?

  • Works across Blazor Server App, Blazor WebAssembly App, and Blazor Web App (.NET 8, .NET 9, and .NET 10) render modes.
  • Plays well with dependency injection, routing, and cascading values.
  • Uses JavaScript interop only where it adds value (DOM/canvas/complex layout), keeping your app primarily in C# and Razor.

How to best read this user guide?

  • The best way to get started is to read the Getting Started section of the documentation for the component intended for use. The Getting Started section covers the essential concepts to know before writing code. This is the only section recommended to read end-to-end before coding; other topics can be referenced as needed. Ensure the required SDKs and the supported .NET/Blazor versions are installed.

  • After becoming familiar with the basics of a component, integrate it into the application. A practical next step is to review the code snippets in the online sample browser, which contains hundreds of examples. It is likely there is a sample that matches the intended usage scenario.

Components List

GRIDS

DataGrid
Pivot Table
TreeGrid
Multicolumn ComboBox

FILE VIEWERS & EDITORS

Rich Text Editor
Block Editor
Markdown Editor
Image Editor

LAYOUT

Dialog
Predefined Dialog
ListView
Tooltip
Splitter
Dashboard Layout
Card
Avatar
Media Query
Timeline

Smart AI

Smart Paste Button
Smart TextArea
Smart Rich Text Editor

DATA VISUALIZATION

Chart
3D Chart
Chart Wizard
Sankey
Stock Chart
Circular Gauge
Linear Gauge
Diagram
HeatMap
Maps
Range Selector
Smith Chart
Sparkline Chart
Accumulation Chart
Barcode
TreeMap
Bullet Chart
Kanban
Sunburst Chart

BUTTONS

Button
Button Group
Dropdown Menu
Progress Button
Split Button
Chips
Icons
Floating Action Button
Speed Dial

CALENDARS

Scheduler
Gantt Chart
Calendar
DatePicker
DateRangePicker
DateTime Picker
TimePicker

INPUTS

TextBox
Input Mask
Numeric TextBox
RadioButton
CheckBox
Color Picker
File Upload
Range Slider
TextArea
Toggle Switch Button
Signature
Rating
OTP Input
Speech To Text

FORMS

In-place Editor
Query Builder
Data Form

Interactive chat

AI AssistView
Chat UI

DROPDOWNS

AutoComplete
ListBox
ComboBox
Dropdown List
Dropdown Tree
MultiSelect Dropdown
Mention

NAVIGATION

Accordion
Breadcrumb
Carousel
Context Menu
Menu Bar
Sidebar
Tabs
Toolbar
TreeView
File Manager
Ribbon
Pager
AppBar
Stepper

NOTIFICATION

Toast
Progress Bar
Spinner
Badge
Skeleton
Message

Getting Help

  • If information is not found in the self-help resources mentioned above, contact support by creating a ticket in the support site or ask a question on Stack Overflow using the syncfusion-blazor tag.

  • If a feature is not available, request it in the feedback portal.

  • Join the Syncfusion Blazor forum to discuss components, ask questions, and share suggestions with other developers and the Syncfusion team.

Learning Resources

The following resources help you get productive with the Blazor components quickly:

  • Getting Started documentation - Step-by-step instructions for creating a Blazor app and adding your first component.
  • Online sample browser - Explore hundreds of live demos with source code for Syncfusion Blazor components, covering common usage scenarios.
  • Video tutorials - The Syncfusion Blazor YouTube Playlist with component walkthrough and feature deep dives.
  • Blogs and articles - Tips, release highlights, and how-to articles from the Blazor team.
  • Knowledge Base - Answers to common questions and solutions to frequently encountered scenarios.

See also