Examples

• Mar 23, 2026
• 3 minutes to read

Our knowledge base contains a wide array of sample projects that demonstrate the various capabilities of DevExpress Blazor Components: DevExpress Knowledge Base: Blazor Examples.

This article lists a few examples from the list above. These selected projects demonstrate the most popular usage scenarios.

Common Tasks

• Switch Themes and Size Modes within Blazor Apps at Runtime
• Use CSS Variables to Customize DevExpress Fluent Themes
• Localize Components
• Create a Web API Service Backend for a Blazor WebAssembly Application
• Test DevExpress Blazor components with bUnit
• Use DevExtreme Circular Gauge in a Blazor Application
• Use DevExtreme Diagram in Blazor Applications
• Use DevExtreme FileManager in Blazor Applications
• Use DevExtreme Slider in Blazor Applications
• Implement a Kanban Board Component with the DevExpress Blazor Grid

Grid

Refer to the following topic for a list of Blazor Grid examples: Examples.

AI-powered Extensions

• Blazor AI Chat — Add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application
• Blazor AI Chat — Build a multi-LLM chat application
• Blazor AI Chat — Implement function/tool calling
• Blazor AI Chat — Request tool call confirmation from a user
• Blazor AI Chat — Communicate with Agents Using the Agent2Agent (A2A) Protocol
• Blazor Rich Text Editor and HTML Editor - Integrate AI-powered extensions
• Blazor Grid and Report Viewer — Incorporate an AI Assistant (Azure OpenAI) in your next DevExpress-powered Blazor app
• Blazor AI Chat — Grammar & Style Assistant powered by OpenAI services
• Integrate Blazor AI Chat with Model Context Protocol

Charts

• Create and Configure a Multi-Line Chart
• Create a Drill-Down Chart
• Create a Pie Chart
• Display the Chart based on the Grid focus

Data Editors

• Editors - How to create editors dynamically according to the EditForm’s model
• Editors (ComboBox, List Box, TagBox) - Custom data binding
• DevExpress Blazor Data Editors – Using Google reCAPTCHA
• ComboBox - Bind to an enumeration
• Use the TagBox Component as a Filter for a Grid Column with Multiple Values
• MaskedInput for Blazor - How to create an input element for a card number, expiry date, and CVV

Dialogs and Windows

• Popup for Blazor - How to implement a confirmation dialog
• Blazor Popup - Add Content Dynamically

Layout

• Form Layout - Change visibility of the DxFormLayout’s items and groups conditionally
• Form Layout - Collapsible groups
• Form Layout - Tabbed Wizard
• Grid Layout for Blazor - How to create an adaptive dashboard layout
• How to implement a responsive CardView component in Blazor

Navigation

• Accordion - Manage navigation within your Blazor application
• TreeView - How to implement custom filter
• TreeView for Blazor - How to implement the Breadcrumb control based on a selected node
• TreeView for Blazor - How to load child nodes on demand (lazy loading)
• Blazor Tabs - How to create an interactive multi-tab web interface

Scheduler

• How to load appointments for visible interval only (lazy loading)
• How to implement CRUD operations with a Web API Service
• Customize Appointment Forms
• Blazor Grid and Scheduler - Drag & Drop Items Between Components

TreeList

• Getting Started with the Blazor TreeList
• How to bind the component to DevExtreme data source with Entity Framework Core
• How to implement batch data editing using Entity Framework Core