Material Ui Grid Example

Posted onby admin

.NET Developers have a long history with component libraries.

Material Ui Grid Example

The Material Design layout grid can be customized for touch UIs that scroll horizontally. Columns, gutters, and margins are laid out from left to right, rather than top to bottom. The height of the screen determines the number of columns in a horizontal grid.

If you’re not familiar with the concept, these are collections of components you can drop into your application when you want a certain bit of UI functionality for your app.

If you’re thinking tables, accordians and toggle buttons, you’re on the right track.

But why do such things exist? Why would you want to use a third party component in favour of “rolling your own”?

I can think of a few reasons.

Downshift 🏎 Material-UI multi select with autocomplete This is an example of a multiple select with autocompletion. It uses Material-UI Chip component to display the selected items. It uses Material-UI Chip component to display the selected items. The Material-UI Grid component is used to display the courses in a grid layout which is responsive to the screen size. The output for a specific course is generated by the custom Course component.


I work with a couple of developers who “get” CSS. They seem to have an innate ability to create beautiful looking web applications; bending the browser to their will with a couple of well crafted lines.

I, on the other hand, can easily lose hours to a “simple bit of CSS”, fighting the syntax every step of the way, labouring to slay the CSS beast only to find it works perfectly on my Chrome desktop but resembles an early Geocities page when I view it on a mobile!

If component libraries can “do CSS” for me, I’m in…

Rapid prototyping

Even if you might want (or need) to write your own UI components, starting with a library can be a real time saver when it comes to spinning up a prototype or V1 of an application.

If you can drop a grid into your application, complete with paging, sorting, filtering etc. vs spending hours/days building one yourself, it’s got to be tempting to go with the first option (not least so you can focus on your business logic and flow).

Battle tested

All the big component libraries also have the benefit of being pretty well battle-tested.

Once a company like Telerik has released a few iterations of a grid component you’d imagine it will have gone through a hefty amount of testing (both internally and by customers) so it’s pretty low risk to use it in your own application (and you’d expect it to be cross browser compatible which is a significant time saver).

One last step...

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

So, if those are some of the benefits, what are the component library options for Blazor (as we move inexorably towards an official Blazor WASM release)?

The following list is almost certainly incomplete so feel free to hit me up on Twitter (@jonhilt) or leave a comment and point out everything I’ve missed!

Radzen Blazor Components

  • Site:
  • Pricing: Free for commercial use
  • Server: Yes
  • WASM: Yes

Radzen Blazor Components is a free set of 40+ native Blazor UI controls.

It includes all the basic form controls you’d hope (Date Pickers etc) along with data grids and containers such as accordians and tabs.

It doesn’t handle data visualisation e.g. charts.

SyncFusion Blazor UI Components

  • Site:
  • Pricing: Free community license or $995 /developer 1st year
  • Server: Yes
  • WASM: Yes

There are a number of component libraries which, on the face of it, seem “expensive” and SyncFusion is one of them.

Admittedly, value is in the eye of the bolder, and $995 a year might be peanuts compared to the productivity gains you’ll make as a reasonable sized company with more than a handful of developers.

However, it also pays to read the small print, and in this case they offer a community license based on you matching conditions laid out here.

Namely that you’re an individual or company with less than $1 million USD in annual gross revenue and 5 or fewer developers.

In terms of the components themselves, they have a comprehensive collection including small components such as Date Pickers all the way up to rich text editors, word processors and file managers.

Various options for data visualization are also included (charts etc).


  • Site:
  • Pricing: free
  • Server: Yes
  • WASM: Yes

MudBlazor is “an ambitious Material Design component framework”.

If you’re looking for Date Pickers, Progress bars, Ratings etc. MudBlazor has your back and nearly all of the components use just C# (no javascript, except where it’s strictly necessary).

The vision for MudBlazor is to keep it clean, simple and with a highly customisable modern design. No javascript, just Blazor and CSS.

It’s the newest kid on the block (arrived in 2020) and is already shaping up to be a really solid component library.


  • Site:
  • Pricing: free
  • Server: Yes
  • WASM: Yes

MatBlazor brings Material design to your Blazor projects.

The list of components is pretty extensive, including all the standard form inputs you’d expect, plus grids, cards and lots more besides.

Material ui grid layout

You’ll also find DatePickers, AutoComplete lists to save you the hassle of implementing such things yourself.

It also boasts some super handy navigation components (things like nav menus, and “drawers” which your users can choose to show or hide).

Overall this is a really solid component library, in active development and you can’t beat the price!

Telerik UI for Blazor

  • Site:
  • Pricing: $899/developer perpetual license
  • Server: Yes
  • WASM: Yes

Doesn’t boast quite so many components as SyncFusion, but has the basics covered with Date Pickers, Buttons, Grids etc.

Also includes various charts for data visualisation.

Some Blazor component libraries are actually wrappers around javascript components but Telerik’s approach is to build for native Blazor, aiming to use C# as much as possible and only adding JS Interop to the mix as a last resort (or if performance dictates).

Overall this should make for better integration with all aspect of Blazor (and a smaller JS file needing to be shipped to the browser to make everything work).

DevExpress Blazor Components

  • Site:
  • Pricing: Free “for a limited time”
  • Server: Yes (I think) - couldn’t see this listed explicitly anywhere…
  • WASM: Yes (I think) - as above

DevExpress’s library is currently free. However, the big caveat here is in the wording which includes the sentence “for a limited time”, so it’s hard to know where they’ll go with pricing in the future.

In terms of the library itself, it includes essentials like Data Grids, Charts, and various Editors (date pickers etc).

Blazored libraries and components

  • Site:
  • Pricing: Free
  • Server: Yes
  • WASM: Yes (I think)

This is a collection of GitHub repositories including various components such as Modals, Text Editors, Toast popups etc.

It offers some useful time savers such as Typeahead to offer up auto complete suggestions as you type into a text input.

Chris Sainty is behind this (I thoroughly recommend his excellent Blazor blog) and the code is all open source (available on GitHub).


  • Site:
  • Pricing: Free
  • Server: Yes
  • WASM: Yes

Built on frameworks such as Bootstrap, Bulma and Material, Blazorise offers a decent number of components ready for you to drop into your Blazor apps.

You can use any of the free provided CSS frameworks, leaving you free to stick with Bootstrap if that’s what you generally use, or look at the alternatives (Bulma or Material).

Again the basics are all there (Editors, Buttons, Grids etc) and they have a Chart component to boot.

One last step...

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

Next up

Will .NET 6 fix Blazor Prerendering?
Prerendering eradicates Blazor WASM’s initial load time and .NET 6 promises to address its one key limitation

Material Ui Grid Layout

Persisting your users preferences using Blazor and Local Storage
Now your app supports dark mode, let’s make sure your visitors only have to choose it once (or ideally, not at all)
Dark mode for your web applications (using Blazor and Tailwind CSS)

Material Ui Grid Example Codesandbox

Eyestrain is a real problem; help your users by adapting your site to their dark mode preferences