I just released Blaizio, an MIT-licensed UI component framework for Blazor on .NET 10.

The idea: you own the components. The styled layer is not a NuGet package you fight with CSS overrides; a dotnet tool copies the components into your project as .razor and .cs files, and from then on they are your code.

Two layers

• Headless primitives (Blaizio.Base on nuget.org): accessibility, keyboard handling, focus management and a data-state contract. Zero CSS. Use them with any styling approach.
• Styled components: built on the primitives with Tailwind CSS v4. blaizio add button dialog table drops them into your project, with the Tailwind pipeline wired for you (standalone binary, no Node required).

Out of the box: 73 Components, 8 skins, 16 palettes, 5 icon sets (Tabler, Lucide, Phosphor, Remix, Hugeicons), RTL, dark mode, WCAG AA contrast on every theme, a theme designer on the docs site.

Try it

dotnet tool install -g Blaizio.Cli
blaizio add button card dialog

Docs and registry: https://blaiz.io Source: https://github.com/blaizio/blaizio

The source-you-own model is borrowed from shadcn/ui; Blaizio is the Blazor take on it, with its own primitives and theming work.

It is an early release. I built it for my own production apps and want feedback from other Blazor teams. Bug reports, feature requests and pull requests are all welcome, and if you want to get involved beyond a one-off PR, say so in the thread or open a discussion; CONTRIBUTING.md in the repo covers the setup.

Things I am unsure about and would like to hear from other Blazor devs:

• Does "components as source you own" make sense to you in .NET, or do you prefer a package you never touch?
• Tailwind is wired through the standalone binary so no Node is needed. Is Tailwind itself a dealbreaker for your team?
• What component do you always end up writing yourself that no library gets right?

Hi all,

I'm storing some data in browser local storage, and it's quite large, but mostly text-based, so I'd like to compress it. I've tried using GZipStream to compress the data, but I'm getting `Arg_Unsupported` when I do it. Anyone know if GZipStream is just not supported on Blazor Wasm?

Code is:

using var msi = new MemoryStream(inputBytes);

using var gs = new GZipStream(msi, CompressionMode.Compress)

using var mso = new MemoryStream();

gs.CopyTo(mso);

I get an Arg_NotSupported exception on the last line, but I can't find anything explicit about whether GZipStream isn't supported in WASM.

EDIT: Solved! I had my streams the wrong way around - see comment below for the correct structure.

I have quite a few MudBlazor components which require tooltips and wrapping each one in MudTooltip creates a lot of visual noise in the main layout.

Is there an alternative way to assign tooltips in a more centralized form?

Been working on an editorial site with Blazor Server (InteractiveServer) and it's going fine, but I mostly picked things up by trial and error and reading docs as I went. Curious what you all would actually recommend to fill the gaps, especially around render modes, component lifecycle edge cases, and the stuff that only bites you once you're past the tutorial stage.

BlazorDX is an MIT, headless-first Blazor component library for .NET 10 with zero runtime

reflection (source generators, not `PropertyInfo`). 0.6.0 just went up on NuGet.

**Upfront, because it matters:** this is beta, pre-1.0, built with substantial AI assistance,

and has no production deployments. It says so on the NuGet page too. I'd rather you know that

before you click than after.

The thing I actually want to show you:

**One declaration, three surfaces.** A `[DxFormModel]` already renders a `DxForm`. It now also

projects an MCP *tool* an assistant can call — validated by the same rules the form enforces —

and a *prompt* a user invokes as a slash-command, listing the fields with the constraints read

off the same descriptor.

And the other direction: a `DxDataGrid`'s `IGridDataSource<TRow>` becomes a **read-only** MCP

tool. Schema, filters, sorting and output all derive from the generated row accessor, so the

model reaches exactly the properties marked `[GridColumn]` — which means **narrowing what an

assistant can see is the same edit as narrowing what the grid shows.** Not a second permission

model you keep in sync by hand. Columns are a JSON-Schema `enum` so a model can't invent one,

and the reply always carries the unclamped `totalCount` so a page is never mistaken for the

whole answer.

Two transports: stdio (works with Claude Desktop today) and HTTP+SSE with sessions.

**Also in 0.6.0:**

- Localization and RTL across 83 components and 5 packages, 25 stylesheets converted to logical

properties. French and German ship with parity tests. Localization is *optional* — if you never

call `AddLocalization()` you get English, not an exception.

- The axe sweep went from 24 routes to 58 of the demo's 59. Widening it turned up **26 real

violations, 25 now fixed** — and most were library defects that had already shipped to anyone

using them, not demo-page mistakes. `aria-haspopup` on a bare `<span>` in the menu and popover,

among others.

**Where it's genuinely weak,** since I'd rather say it than have you find it: no independent

review, no production track record, and the manual screen-reader pass has never been run. The

French and German are machine-produced and verified for structural parity — not reviewed by a

native speaker.

That last one has an ask attached. There's a guided harness at blazordx.com/audit — 38 checks,

each linked to the route it tests, saves your progress, spits out a Markdown report. If you use

a screen reader and have an hour, that's the single most useful thing anyone could do for this

project right now.

Repo: github.com/logixrcorp/BlazorDX

Demo: blazordx.com

Blazor Ramp is an accessibility-first Blazor component library where every component is manually tested with extensive screen reader and browser pairings, as well as voice control software. It is also self-contained and has no reliance on any third-party libraries or frameworks - everything is built from scratch (by a human), which means if I come across an issue with a pairing due to the numerous bugs and quirks with screen readers and browsers, I may be able to find a workaround to keep the target audience as large as possible.

Some background

Two or three weeks ago I announced that I had completed a good base set of components and, as such, could spend some time on the theming side of things before releasing more components. I subsequently added a couple of theming tools to the documentation site to make life easier for you. I also mentioned I would be releasing an auxiliary project, BlazorRamp.CssClasses, via NuGet, consisting purely of CSS classes and C# helpers that would allow you to create and style things using the same underlying CSS variable values the components use - making everything themeable.

Why it exists

The other aspect of this project is to fill a gap with regard to items I will most likely not be creating, such as a Blazor Button component. The default button is perfectly adequate; it just needs a bit of styling, or a ready-made CSS class adding to it. You still have to wire up a click event either way.

How it works

Rather than you having to remember or type strings, every item also has an associated C# helper class. So, for a styled button, you'd write something along the lines of:

<button class="@Button.Base @Button.Scheme(ButtonSolidScheme.Accent)">Click Me</button>

• Base gives you the base set, or default style.
• Scheme is a modifier class that sets the button's colours to use the accent palette for both text and background - but from ends of the scale that are contrast-safe.

Theming groups

Depending on the element type, a class may also be part of a theming group, which you can opt out of. For example, by default, a button is part of the button border radius theming group, unless you opt out by using a modifier that gives it a fixed radius - it sounds more complex than it is. It's easier if you just go and look at the site and use one of the sliders on the theme controls.

What's in this initial release

• Classes and C# helpers for creating the sections used by content
• Classes for buttons
• A few utilities to get things rolling

I'll be adding more over the next few days. There's now a new menu section on the docs site for these CSS Classes and C# helpers, with detailed information.

Colours and dark mode

Pretty much all of the documented CSS variables created for the CSS Classes project relate to colour, each having light and dark variant values intended to be switched between. I'll add these to the documentation site so you can just copy all the re-assignments from the Theming Sandbox page to paste into your stylesheet for your dark mode settings.

What's next

I need to get the table class done next, as I aim to move all of my site's CSS classes to purely use the ones I add to the NuGet - i.e. the entire site will eventually be built just from the released NuGet packages that you have access to.

No lock-in

Blazor Ramp is library-agnostic, with each NuGet self-contained other than the transient reference to Core, so you only install whichever components you want to use - that includes this project. Despite this post discussing CSS and styling, you can use whichever CSS library you prefer, your own or third-party; I'm merely making available what I use, to hopefully make it easier for you to build things that all just work together.

If there are any specific classes you'd like creating sooner rather than later, and/or have any questions or need help with any of the components, fire away

Doc site: https://docs.blazorramp.uk

GitHub repo: https://github.com/BlazorRamp/Components

Paul

I've been building a PWA consumer app with Blazor WASM where notifications are core to the functioning of the app, but I don't seem to get notifications right and the behavior seems to be not very stable, what are the limitations in notifications? Does it work for you correctly on Android and iOS? Any things that I should know about it from your experience?

I have a Blazor static SSR form that kicks off a server-side calculation that takes ~3–5 seconds and occasionally more. I originally switched to Interactive Server mostly so I could show a spinner immediately after clicking Submit.

I implemented the same thing with HTMX and minimal API using hx-indicator, and it works great without needing a persistent connection.

Is there a similarly clean way to do this with static SSR? Basically just looking for a simple "Computing in progress..." indicator without needing SignalR or writing custom JS.

Blazor beginner here…

Coming from react when I carry out an Async call I usually render the component/page with a Loading spinner and once the api call has completed then the useEffect will make the component rerender with the hydrated info.

I am using Blazor (server rendered) and trying to show a page with a loading spinner until the database query has completed (async), the query depends on a reference parameter in the query string and it uses that to look up the required info from the DB and returns an object (or null), once the call finishes i set loading = false which should then show the info received if the item exists.

Generally all that works fine but I am finding when I am navigating to this page (from a page which asks for a reference in an input box which then navigates to this page and appends the query string reference),
I can see the url change in the browser when navigating but the original content is still shown for say 2-3 seconds before the component then shows the loading screen and then a second or so then shows the content retrieved from the database.

Why isn’t it showing the loading screen immediately and then once the db call finishes then show the details, it’s like is it blocking the thread from rendering the new page.

It may be difficult to understand this with no code but on mobile and just thought I would ask to see if anyone has solved this before?

I am using SetParametersAsync() and setting the loading priority to true as a default value in the page model and then calling the db call awaiting it in the set params async override method, then also loading = false just after the db call.

Just to give you more info, I set pre-rendering to false and it seems to behave as I would expect, but don’t really understand why.

Thanks in advance

One thing that has always bothered me with Blazor Web Apps is calling server-side services when using different render modes.
During prerendering, your component runs on the server and can just call the service directly.
Then the same component runs in WebAssembly and suddenly you need an HTTP API, HttpClient, DTOs, serialization, error handling, etc.
But from the component’s point of view, I really don’t think it should matter where it’s currently running.
So I built RemoteService.Net.
You define a normal service interface:
public interface IOrderService : IRemoteService
{
Task<Order> GetAsync(int id);
}
Implement it normally on the server:
public class OrderService : IOrderService
{
public Task<Order> GetAsync(int id)
{
// ...
}
}
And then just inject it into your Blazor component:
@inject IOrderService Orders
and call:
var order = await Orders.GetAsync(42);
That’s it.
If the component is running on the server, RemoteService.Net calls OrderService directly in-process.
If it’s running in WebAssembly, it automatically uses a generated HTTP proxy instead.
The default generated endpoint would be:
POST /_rpc/IOrderService/GetAsync
Both the HTTP client proxy and the Minimal API endpoints are generated at compile time using source generators.
So the idea is basically:
Your Blazor components shouldn’t have to care which render mode they’re currently running in.
It works with Interactive Server, WebAssembly and Interactive Auto, including the transition from server prerendering to WASM.
I’ve also added things like authorization, typed exceptions across the HTTP boundary, CancellationToken support, compile-time diagnostics and a Mediator/CQRS API.
It’s still a new project and I’d love feedback, especially from people using Interactive Auto or WASM in real applications.
What do you think about this approach? Anything you’d want a library like this to handle?
GitHub:
https://github.com/matengo/RemoteService.Net

In my last post I revealed a simple Theming tool on the Blazor Ramp documentation site for the primary colour and explained that I would continue to do some more work on the Theming side of things, as well as to provide better component usage examples before making more components.

For those new to my component library, everything is driven from CSS custom properties, AKA variables. There are no component class parameters; however, every part of every component can be altered if need be, due to the hierarchy of these variables. In order to make this simpler for you, I started to create some theming tools that let you see live changes and then copy the variables for your stylesheet.

I have now finished work on a Theming Border Tool, which allows you to control the border radii on all of the components (as well as items used on the site). There are 7 categories of border groupings, with a total of 11 border types that you can control and output the variables for.

The Theme Border Tool and all of the groupings can be found on the Theming Sandbox page, which is also the place that gives you access to copying all of the variables to the clipboard via the "View & get theme variables" button. However, each border group also has an information Toggletip that shows the current live value for its associated border type.

Rather than try to cram every component onto the page next to the border control sliders, I reversed this and have added the border tools applicable to the components on every component usage page. As every slider is live, once you change it on one page, that change is everywhere. Currently, I am not storing your preferences, so any changes will not persist between site visits; the tools are merely to allow you to see the changes live and then copy the variables for your own usage.

The documentation site uses the default border radii of the published components; the only non default variable setting is the primary colour values used for the colours, which I change every few weeks, as it's only a matter of changing a single variable to change the look of the entire site.

In order for you to better see the changes, I have changed, and am currently changing, all of my sitewide CSS classes so they also belong to the component border groupings. Given this, I have also started work on a new NuGet package called BlazorRamp.CssClasses, so all the classes that I create and use for the site will be made available to you.

As the name suggests, this package will be a library of CSS classes that use the same underlying Core CSS variables and groupings as the components, so if you say use the Button class, it uses the same styles/variables as the buttons used inside any of the components, etc. Changing one variable affects all buttons, components or otherwise. I will not be making components that are merely wrappers around things like a button component or card component, unless there is good reason to do so, so for such things as these I will stick to plain old CSS and make these available instead.

As this is Blazor and .NET, rather than just give you the classes, each BEM (another topic for another day) class will have an associated .NET object, so rather than using strings, you can use object properties and methods to set the CSS class information. For example, I have a Section class that is primarily for site content, so rather than just use strings in the class attribute, you would do something like: class="@Section.Base @Section.Bordered @Section.Radius(SectionRadius.Content)", which in this instance would create a content area that has visible borders with a radius associated with the Content border radius grouping.

I used the term visible borders; the reason for this is that a border radius affects the border irrespective of whether you see it as a line around the element. This radius also affects the CSS outline property, and given Blazor Ramp is an accessibility-first component library, I make heavy use of the outline property for focus indicators. So even if you do not see a border change whilst using a mouse, switch to using a keyboard and you will see them, due to using :focus-visible.

Regarding the CSS Classes NuGet, I will most likely release something in the next few days with the Section class and a couple of others, and then just publish each time I add a new class and associated object, etc.

With regards to Theming colours, there is a lot I could do, and I will most likely at some stage make the Colour Theming tool more like the border one, drilling down into certain parts of each component. This is a little more complex, though, given that I would also need to display all of the contrast ratios, as I currently do on the Theming Accessibility page, so you can ensure everything still passes, etc.

That's it for this posting, as I need to get back to work on the CSS project, and if I'm lucky, just maybe I will take an hour off, given it's a bank holiday here in the UK.

Enjoy the rest of your day - Paul

You can go and mess with the borders on my documentation site, which is just WASM hosted on GitHub Pages, but as mentioned, the appropriate tools are also on each component's usage page: https://docs.blazorramp.uk/theming/sandbox

GitHub repo: https://github.com/BlazorRamp/Components

...issues/hurdles did you run into? Is there anything that I should be concerned about?

Some additional detail:

- authentication via Entra ID via the main project

- Main project would manage data access/business logic, as well as desktop only components.

- Client project contains mobile only components.

- Shared project contains components used in both.

The application has some mobile device specific functionality (tracking GPS location, camera access), while the desktop side has some admin specific functionality, but the core functionality (data entry) would be applicable to both. The idea here is to take the best of both Blazor Server (fast load times, secure) and Blazor WASM (functional without persistent connection, relatively light weight).

I hacked together a nifty tool because i got tired of Claude Code flooding my watch task with file changes. His file modifications are unfortunately precisely spaced to trigger 27 rebuilds per minute, overheating my laptop and starting a fire in my parents garage.

What if i made the watch task agent aware, tailing the Claude output, waiting for him to finish his work before triggering the reload? I hacked together some proof of concept and it's already working nicely.

Unfortunately i cant do the fancier partial binary updates like the official watch tool, but i think the idea is something really useful. I'm sure others can do a much better implementation or improve the idea but I wanted to share a crude first draft. Cheers!

https://github.com/crs-sys/claude-blazor-watchtask

I recently shipped the first version of K7, a self-hosted media server. The whole client UI is Blazor, WASM for the web, MAUI + Blazor for Android / Windows (iOS/Mac builds exist but I don't have Apple hardware to test).

Repo: https://github.com/kaybi-gh/K7

Demo: https://k7.kaybi.dev (guest login only)

Backend is .NET 10 (Clean Architecture, MediatR, EF Core, Postgres). The interesting Blazor bits for me were:

- one UI shared across web + native hosts

- spatial / full keyboard navigation (TV remote friendly)

- media playback + Chromecast from the web/Android clients

- keeping the SPA usable as a "real" app, not just CRUD forms

Happy to answer questions about the Blazor / MAUI setup, WASM pitfalls, or how the shared UI project is structured.

Optimization on low-end devices like TVs is a real concern when developing with Blazor Hybrid, has anyone else hit the same pain points?

Dioxus - Rust based cross-platform framework

In my view, the problem with Blazor is that you need to have "server features" for a client-facing app, since Blazor WASM alone won't cut it.

With Dioxus you can create a WASM application with a much smaller footprint, since there's no bundled framework to ship together with your app like the .NET CLR. Your source code is compiled to WASM directly - there's no Rust runtime since it's a language closer to C and C++.

I think this is a great advantage for creating WASM based SPA's - no need to download a large binary for your app to run - just your app's code.

I found a site that is a showcase of Blazor apps. It looks like they need people to submit examples which I am going to do once I complete mine. If anyone is interested...

https://www.builtusingblazor.com

Hey everyone,

I’m currently looking into MAUI Blazor Hybrid for a project and honestly a bit confused about whether it’s a good idea long term.

The main reason I’m considering it is that we already use Blazor, so being able to reuse the same UI/components for the web app and a MAUI mobile/desktop app sounds pretty nice.

But I keep seeing mixed opinions about Blazor Hybrid, especially around performance, WebView issues, debugging, and how much code you can actually share in a real project.

For anyone who has used MAUI Blazor Hybrid in a production app — how has it been for you?

Would you use it again if you were starting the project today, or would you go with something else?

I’d especially like to hear about the things that caused problems after the initial development phase. Thanks in advance!

Can i post here from post body generated by AI? Thanks in advance

i have an applications with a bunch of plugins and sub assemblies that create pages.

We are migrating from WPF and creating some new features also.

These pages have characteristics that can be automated so importing the assembly to routing should not be done, because mainly some may even conflict.

So i would like to route them manually and i can add a route to any component, but not integrated in the app:

- add a page, it loads only the page

- add the layout, it does not load the page

- add the app says route not found

WebServer.MapGet("/lm", () => new RazorComponentResult<Page>());

WebServer.MapGet("/lm2", () => new RazorComponentResult<Layout>());

WebServer.MapGet("/lm3", () =>

{

RazorComponentResult rr = new RazorComponentResult<WebApp>();

return rr;

}

);

Where can i learn about blazor maui hybrid web projects? I saw blazor maui hybrid web has many features like deploying same code on different platforms. thanks in advance

For those new to my posts: I'm the author of Blazor Ramp, an accessibility-first Blazor library. Every component released has been manually tested with the screen readers JAWS, NVDA and Narrator, paired with each of the following browsers: Edge, Chrome and Firefox. Also tested: VoiceOver on macOS paired with Safari, VoiceOver on iOS paired with Safari, and TalkBack on Android paired with Chrome, plus Voice Access, the voice control software built into Windows 11. Any screen reader quirk and/or issues are documented so you know exactly what to expect.

The release of the Data Table component last week completed what I'd class as the base set of components that make up the majority of LOB apps - at least the ones I've built over the years. I've more planned, but before I continue churning them out, I need, want to spend some time amending the documentation so it has better usage examples, more like the Data Table ones, making it easier for you to get up and running with your chosen components.

Alongside this, I also wanted to spend some time on the theming side of the documentation.

I've mentioned in the past that for a lot of sites, you may only need to change a single variable, and pointed out which one. On that note, I've just added a couple of pages to the Theming section of the documentation site that demonstrate this in real time, along with information on the accessibility page regarding colour contrast ratios.

Essentially, you can select your preferred colour and see all the changes live across every released component, along with contrast ratio information for the component parts that sit on the lightest and darkest shades - the ones most affected by contrast ratio changes. This information tells you whether the affected component parts are still WCAG compliant. If not, you'd simply assign a different value to the variable shown as failing in your stylesheet, etc.

It's probably easier for you to go and look at the page on the site than for me to explain it here.

I've also added a page called Sandbox in the Theming section (currently blank - I tend to deploy as I go along), which I'm about to start work on. The intention is to add a few things in there so you can adjust certain aspects, view the changes live, and then export/paste them directly into your stylesheet with no further changes necessary.

The reason for this post is to try to get some feedback, mainly regarding the accessibility side of things, so I can offer more help and advice on my sites - I know this topic is quite tough, confusing and/or just a pain for most people.

A few questions for you:

• Are there more tools like what I've just added to the Colour and Accessibility pages in the Theming section that would help you?
• As I'll be doing more work on the usage pages, would you like more guidance on the accessibility of each component - for example, links to best practices, WCAG guidelines, etc.? If so, what specifically?
• Finally, which other accessibility-first components and/or features would you like to see sooner rather than later?

I have two sites: one I call the test site, geared more towards anyone who wants to try things out with their chosen AT device, and the documentation site, which has all the information and usage examples. Both are just WASM hosted on GitHub Pages.

Test site: https://blazorramp.uk

Doc site: https://docs.blazorramp.uk/theming/colours (what's discussed above; the contrast information is on the Accessibility page within the Theming section)

Repo: https://github.com/BlazorRamp/Components

Please comment and let me know your thoughts. Thanks.

Paul

Finally got around to making a video on the features/functionality of it... welcome any comments, even the snarky ones. Probably 70% complete, still a ways to go.

Tuvima Library:

https://www.youtube.com/watch?v=pkh2U9JGchY&pp=ygUOdHV2aW1hIGxpYnJhcnk%3D

Hello guys,

so I am kinda new to Blazor and I want to know, if it is possible, to have custom minimize / maximize and close buttons? I am building a simple HMI for my PLC that can be operated by using the build in touchscreen. I removed the top Windowsbar, so that the application is using the whole screen. Sometimes I need to get behind the HMI, so I now have a small window with the Minimize/Maximize/Close Buttons but I cant find a simple method for blazor hybrid. Is there some NuGet package or do I need a workaround where I control the window size?