React UI for Native Apps

React developers have polished free UI and solid tooling to be productive in making modern web apps. And the same UI can light up native cross-platform apps.

This post is a part of MAUI UI July. Based on an idea originally started for Xamarin by Steven Thewissen, MAUI UI July is a month-long community-driven event where anyone gets to share enthusiasm and passion for .NET MAUI. Run by Matt Goldman, this is a great opportunity for .NET MAUI developers to learn from each other. MAUI UI July happened all through July 2025.

Envision this scenario. A seasoned developer joins a startup without much experience in React development. Unfortunately, the rest of the team loves React. The developer has to fly solo to deliver a web app quickly for a customer who is already grumbling about wanting the same experience on mobile/desktop devices. The developer has to show quick success with a high-quality app to earn respect among peers—and potential bragging rights with use of cool new AI technologies toward better productivity. There are some roadblocks though.

Conundrum 1

The developer quickly learns that React is very flexible and unopinionated. It allows for building custom technology stacks to serve specific needs. Unfortunately, this can be a bit overwhelming for folks starting out with React. What core framework like Next/Vite/Astro would be a good starting point?

Expert React developers are all about CLI tools—wouldn’t it be nice to have some visual tools that gets to a good starting point quickly, instead of learning nuances of each framework? While the web app needs are simple, some performant UI is still needed. It makes no sense to create from scratch; instead of investing in UI libraries, it would be nice to start with something free. And all the cool kids are doing AI for productivity—how does one check that box?

Conundrum 2

The developer also learns that React for web and React Native for mobile/desktop are two very different animals—there will be appreciable learning curve and potentially rewriting the same app UI twice. Wouldn’t it be nice if the React UI for web browsers simply worked adaptively for native cross-platform apps? It would be good to tap into native platform APIs when needed, and flexibility for styling and accessibility support would be great.

Quite the conundrums. And startup culture needs quick validations for success. Let’s explore some options.

React UI for Web

React has grown to be a popular and dominant frontend framework—yet it is evolving fast, and a passionate developer ecosystem is fueling further growth. Recent React framework improvements and tooling updates inspire confidence, but React developer productivity is best augmented by a rich ecosystem.

Progress KendoReact is a leading React component library—an arsenal of 120+ enterprise-grade UI components and tools that simplify design and UI customization. While KendoReact has always served developers well, there was space to lower the barrier to entry and contribute to make React developers more successful.

KendoReact Free

Say hello to KendoReact Free—a collection of 50+ customizable, enterprise-grade KendoReact UI components for free. All KendoReact Free components are available for free on npm, with no signups or license needed. The new free tier of KendoReact, the most comprehensive React UI library for business app development, also includes four professionally designed themes, Figma UI Kits and an easy upgrade option, if more complex UI is needed.

The KendoReact Free components are available to use in production apps and include everything from a powerful React datagrid to essential dropdowns, layout and input UI components. For each free React UI component, developers enjoy extensive features, ease of customization, accessibility, localization, consistent APIs and comprehensive documentation.

For our startup developer, KendoReact Free is the perfect way to show quick wins—polished free UI components can light up the web app. The story gets better with tooling—say hello to VS Code Extension for Kendo UI. Instead of learning the nuances of several core frameworks like NextJS/Vite/Astro, our developer can use visual tooling to get to a good starting point—they do the same thing as CLI tools to bootstrap React projects, but with KendoReact wired up.

Starting Well

Our developer starts up the new project template wizard in Kendo UI VS Code Extension. They chose a starter React project with Next.js, KendoReact Free UI components and few other defaults:

Next up is the choice between JS/TS and a default theme for the web app starting from four popular design systems. Time to look professional with UI theming, without actually doing any work:

The end result of template scaffolding is a classic React web app project with Next.js configuration—and it happens to drop the highly popular KendoReact Grid as a sample UI in a page, with everything wired in:

Our developer is already off to the races with a great starting point—all that’s left is to run npm run dev to start the development server. Navigating to http://localhost:3000, our developer sees the React app running locally—complete with some KendoReact cards pointing to resources.

Need to impress the customer with a quick prototype of a functional data grid? Our developer has things ready with navigation to the Grid link up top—voila, a full KendoReact Grid with features like sorting, filtering, paging, grouping, exports and more, all built in.

Sprinkle AI

Are you even real if not doing AI these days? Our startup developer is also happy to discover that KendoReact makes room for more productivity—powered by AI. Say hello to Kendo UI AI Coding Assistant—purpose-built to work directly inside today’s leading AI-powered IDEs, working with any AI model, to output high-quality code.

GitHub Copilot is already one of the most popular and productive coding assistants for developers—an AI peer programmer that helps developers write better code. KendoReact augments GitHub Copilot with a custom extension called @kendoreact. This brings contextual intelligence powered by the latest documentation, APIs and sample code.

Our developer doesn’t mind reading docs, but also wants quick answers. This is like having a KendoReact expert sitting in the next chair. Developers can ask away anything to do with KendoReact. Responses include sample code and explanations.

Our startup developer has also heard of AI agents for ultimate productivity—developers can simply chat using natural language to have AI complete multistep complex coding tasks. AI agents can understand entire codebases and recognize/fix errors automatically, suggest and execute terminal commands, and analyze run-time errors until the assigned developer task is complete.

To have more confidence in AI agents carrying out tasks, specialized tooling helps. KendoReact exposes all of the same contextual intelligence through a Model Context Protocol (MCP) server and the #kendo-react-assistant tool.

Looks like our developer has done well in choosing KendoReact—free polished UI, accessibility built-in, custom theming options and AI-powered developer productivity. Time to amaze customers and rest of the startup with a solid React web app.

React UI for Mobile/Desktop

Having proven worth with React on the web, now comes the next challenge—the customers keep asking for the same app experience on mobile/desktop form factors. There are power users who want the experience on a desktop apps, and folks on the go want it on phones/tablets. Having just delivered the web experience in React, our developer would hate to reinvent the wheel—time to shop around for options.

The Options

React Native allows developers who know React to create native apps—however, our developer quickly realizes it is not quite the same thing. Turns out, React Native works best with a framework like Expo. Our developer would have to learn file-based routing, reengineer some views and learn native plugins to access platform features. Progressive Web App (PWA) is another option—but there are limitations with platform API access and performance isn’t truly native.

A friend with .NET experience recommends .NET MAUI to our startup developer—and it is quite refreshing. Turns out, .NET MAUI is built to enable developers to create cross-platform native apps for Android, iOS, macOS and Windows, with deep platform integrations, native UI and hybrid web experiences. Armed with modern smart WebViews, .NET MAUI is more than capable of welcoming web content to native land.

In fact, React developers should feel empowered to bring web UI components, routing, styling and more to native cross-platform .NET MAUI apps, while gaining complete native platform API access. The same React UI for web would just work in native apps, with solid performance.

The .NET MAUI Route

.NET MAUI provides modern WebViews that would happily render web content inside the shell of a native cross-platform app—but our developer realizes that the first ask is to get the React app ready for static deployment. Next.js enables exporting a web app as a static site or Single-Page Application (SPA)—all it takes is one small configuration to change the output mode inside next.config.js:

const nextConfig = {
    output: 'export',
    ...
    ...
}

After running the next build, Next.js will create an out folder with the HTML/CSS/JS assets for the React app—everything is flattened, minified and ready to be hosted:

Our startup developer is smart. News has gone around that Blazor and .NET MAUI really go well together, with a shared .NET runtime. The need here is to reuse a React app, not Blazor—but a small hack gets things off to a good start. Our developer creates a new .NET MAUI with a Blazor project from the default template—this is meant to embed Blazor UI/styles inside a native .NET MAUI app.

Here’s a look at unchanged default code in MauiProgram.cs:

using Microsoft.Extensions.Logging;

namespace MauiKRF;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();

#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif

        return builder.Build();
    }
}

The key here is to add the BlazorWebView. This is a smart UI component that chooses the right WebView to render web content, based on the target platform the app is running on. While meant for Blazor, BlazorWebView is happy to render any web content—including ones from the prebuilt React app. Our developer cleans up the MainPage.XAML code. The only XAML UI markup to ever see is the BlazorWebView pointing to an index.html file:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiKRF"
            x:Class="MauiKRF.MainPage">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" />

</ContentPage>

Now, the embedded Blazor UI in the .NET MAUI project starts rendering from a default index.html page. Our developer has marked it as belonging to Blazor.

Now, here is the little swap—our developer takes all the files from prebuilt static React app and copies them over to the .NET MAUI-Blazor projects wwwroot folder, like so:

As compared to Blazor’s index.html, the BlazorWebView now points to the index.html file that came from the React app—flattened and ready for deployment.

Desktop Glory

With the file swap, the React web app is now ready to rendered by the BlazorWebView—just inside the shell of the native cross-platform .NET MAUI app. Our developer fires up the app with desktop target—voila, same web React UI, now natively on desktop for macOS/Windows.

Just the way it did on web, the feature-rich KendoReact Grid works on desktop as well—a performant Grid UI that just happens to be free.

The KendoReact Grid brings brings one immediate advantage—adaptive rendering based on device form factor. On the web, when the browser window is resized, the KendoReact Grid adjusts itself. The same functionality powered by media queries works on the WebView as well, just inside a desktop app now.

Mobile Flexibility

Users on the go would want the app working on mobile devices. This is where .NET MAUI shines as a true cross-platform solution. Without any code changes, the same React-UI powered app can be deployed to tablet devices. iPadOS can be the next target platform.

Ultimate portability is through smartphones. Our developer checks the app running on iOS/Android devices.

The responsive KendoReact Grid works on mobile form factors as well—this time more touch-friendly.

Style/Code Reusability

One of the core advantages of .NET MAUI is code reusability across platforms—the evolution of same .NET code running seamlessly across mobile/desktop devices. With the Hybrid story, .NET MAUI welcomes Blazor and any other web framework like React/Angular/Vue/etc.—as long as .NET is the runtime or web assets are static, the UI can be rendered.

This also means shared styles—CSS for web apps can be reused for native apps and design system customizations through tools like Progress ThemeBuilder—carry forward as well.

While the UI in this case is React, the app runtime is .NET. Developers have full access to native platform APIs. React code can talk to .NET easily to access .NET MAUI APIs for device sensors—updated HybridWebView enables easy bidirectional communication. Developers are able to host any HTML/JS/CSS content in a modern WebView suited for target platforms, and have seamless communication between the code in the WebView (JavaScript/TypeScript) and the code that hosts the WebView (C#/.NET). Portability between developer platforms for the win!

Share the Love

Our startup developer has made some wise choices thus far. Tasked with building a polished React web app quickly, KendoReact Free is a great way to start—completely free, but polished UI lights up modern apps.

Tooling help adds to productivity—the Kendo UI VS Code Extension scaffolds projects with chosen frameworks, setting up developers for success. And in the age of AI, KendoReact shines with an AI Coding Assistant surfaced as GitHub Copilot Extension or MCP Server, bringing contextual intelligence to developer fingertips.

With a functional React web app, developers would hate to reinvent app UI—but there would be obvious needs to have the same app running on mobile/desktop form factors. While there are other choices, .NET MAUI eases code reuse with the exact same React UI and styles, running seamlessly across platforms. With .NET MAUI, developers also get complete access native platform APIs—React and .NET enable easy bidirectional communication with modern WebViews.

Modern developers share the love across platforms—cheers to productivity.

Ready to try KendoReact Free?

Try KendoReact Free