DEV Community

Saad Alsaree
Saad Alsaree

Posted on Edited on

Building a modern Blazor UI without leaving .NET: introducing RaxUI

#dotnet #opensource #blazor #react

Why I built it

I'm a full-stack developer. My backends are .NET, and for years my frontends were React and Next.js.

I tried Blazor more than once, because I wanted one platform from the database to the browser. Each time a project needed a modern, highly customized interface, I ended up reaching for React and its component ecosystem again.

So I started building the components I was missing, in Blazor, with the look and the developer experience I was used to. That work became RaxUI.

What RaxUI is

RaxUI is a set of 68 open-source components for Blazor and React that share one theme. A CLI copies each component's source into your app, so you own the code and can change any of it.

  • Your code, not a dependency. raxui add copies .razor files and their CSS into your project. Installed components run without the CLI, and there is no runtime package to upgrade.
  • Modern components out of the box. Buttons and forms, but also a data grid, charts, a kanban board, a calendar, a command palette, chat and AI conversation parts, and a rich text editor.
  • One theme, full control. Three appearances (default, flat, glass), light and dark mode, accent colours and density, all set with HTML attributes on any element.
  • Right-to-left built in. Every component supports RTL, including keyboard navigation, charts and overlays.
  • Built on Bootstrap 5.3. It works with the default Blazor template without extra setup.

The React components share the same theme, so a team with both stacks gets one design system.

See it in a real app

The best test of a UI library is a full application, so I built an admin dashboard with nothing but Blazor and RaxUI: blazor.raxui.com.

  • Three dashboards: e-commerce, CRM and analytics, with KPI cards, sparklines, area, bar and doughnut charts, and paged order tables.
  • Working pages: customers, tasks on a kanban board, a calendar, an AI assistant and settings.
  • Live theming: switch appearance, accent, light and dark mode, and Arabic right-to-left from the top bar, and every component follows.

It runs on Blazor Server, with no JavaScript framework. The only JavaScript is the small modules that ship with the components.

The e-commerce dashboard in dark mode, glass appearance, indigo accent.

One set of components: default, glass and flat appearances, indigo, emerald, amber and blue accents, light and dark mode, then Arabic right-to-left.

Try it in a minute

RaxUI works with Blazor Web Apps on .NET 8, 9 and 10. Install the CLI, create an app, and add the components you need:

dotnet tool install --global RaxUI --prerelease
dotnet new blazor --interactivity Server -n MyApp
cd MyApp
raxui init
raxui add button dialog chart
Enter fullscreen mode Exit fullscreen mode

raxui init asks for an appearance and an accent. Then use the components like any Razor component:

<Button OnClick="@(() => count++)">Clicked @count times</Button>

<Chart Type="area" Label="Revenue" Labels="months" Series="series" />
Enter fullscreen mode Exit fullscreen mode

Any element can set the theme for the components inside it:

<div data-rax-appearance="glass" data-bs-theme="dark" data-rax-accent="emerald" dir="rtl">
  ...
</div>
Enter fullscreen mode Exit fullscreen mode

How it is built

A few decisions shape how RaxUI behaves in a Blazor app:

  • Native browser features first. Dialogs and popovers use the platform's <dialog> element and popover attribute, with small JavaScript modules for focus, keyboard and positioning.
  • Every render mode. Components work with static SSR, Interactive Server, Interactive WebAssembly and Interactive Auto. They never set @rendermode; your page or App.razor decides.
  • No hidden dependencies. Third-party engines, such as Chart.js for charts, are copied into the component folder unchanged, with their licences. Your project gets no new NuGet packages.
  • Safe installs. The CLI never silently overwrites your edits. Interrupted installs roll back, and raxui update shows conflicts before it changes anything.
  • Tested in real apps. Components are installed into freshly generated Blazor apps on .NET 8, 9 and 10 and checked in a real browser.

Where it stands, and how to help

RaxUI is open source under the MIT licence and still in preview (0.1.0-preview.4). APIs and file layouts can still change between releases.

I'd be glad to have developers join in, through issues, ideas or pull requests, to help it mature and keep pace with the platform. Bug reports from real projects are especially valuable: the dashboard alone surfaced six fixes before this release.

If you build something with it, I'd love to see it.

Top comments (0)