How to customize the default Blazor UI

[melikaDaa]

Hi,
If we create a new Blazor Web App, it comes with some default UI (layout, styling, etc.).

What is the recommended way to customize or replace this default UI with our own design? For example, if I want to:

Change the default layout,

Replace the navigation menu,

Apply a completely new CSS framework (e.g., Tailwind instead of Bootstrap).

Should I modify the generated files directly, or is there a more standard approach?

Thanks!

[mahdiyar021]

Start with a blank layout.
If you're using Visual Studio, install the Tailwind CSS extension—it simplifies setup by automatically generating the tailwind.config.js file and integrating Tailwind into your project.

[melikaDaa]

Thanks! And how about Blazor Web App? What is the best way to change or customize the default Blazor UI? Is it possible to changed it in this way?

[mahdiyar021]

Yeah, totally—there’s no real difference. You can use this Blazor Tailwind template to get started quickly. For styling, there are great libraries that integrate Tailwind CSS with Blazor, like LumexUI, which offers a versatile set of components, or you could go with MudBlazor if you prefer a more traditional Material Design approach.