NatUI

React 19 · SwiftUI · WinUI 3

Real native UI.
Written in React.

Build desktop interfaces with React and TypeScript, then render the platform's real controls. No webview, no Electron, no second layout engine.

npx create-natui-app@latest
Start buildingExplore 37 components
NatUI is in alpha. Expect breaking changes.
App.tsxTSX
<VStack spacing={14} padding={20} alignment="leading">
  <HStack spacing={8} alignment="center">
    <Image systemName="atom" color="#e94f37" />
    <Text font="largeTitle" weight="bold">NatUI</Text>
  </HStack>
  <HStack spacing={10} alignment="center">
    <Button onPress={() => setCount((c) => c - 1)}>−</Button>
    <Text font="title2" monospaced>{String(count)}</Text>
    <Button onPress={() => setCount((c) => c + 1)}>+</Button>
  </HStack>
  <List>
    {todos.map((todo) => (
      <Toggle key={todo.id} value={todo.done}>{todo.label}</Toggle>
    ))}
  </List>
  <Slider value={volume} onChange={setVolume} />
  <ProgressView value={volume / 100} />
</VStack>
The matching NatUI demo rendered with SwiftUI on macOS
The matching NatUI demo rendered with WinUI 3 on Windows
37 componentsLayoutContentInputsApp shellMenusPresentationData

A deliberately small bridge

React owns state. The platform owns the interface.

NatUI sends a compact tree of typed operations to a native host. It does not recreate a browser or impose web layout rules.

01

Native by construction

React elements become SwiftUI and WinUI controls. Platform layout, focus, accessibility, and dark mode stay native.

02

One typed component model

Use the same TypeScript props for layout, controls, menus, navigation, data, and presentation on both platforms.

03

React state, native events

Hooks and reconciliation work as expected, and protocol-level sequence acknowledgements keep controlled inputs stable.

04

Two runtime shapes

Develop through the Node host bridge, or run an embedded JavaScript bundle in-process with JavaScriptCore on macOS and V8 on Windows.

One React tree, two honest platforms

Shared intent, native results.

The API stays consistent; SwiftUI and WinUI preserve their own typography, spacing, controls, and interaction language.

macOS

SwiftUI

The NatUI demo rendered with SwiftUI on macOS
Windows

WinUI 3

The NatUI demo rendered with WinUI 3 on Windows

How a commit travels

A thin protocol between React and the native tree.

  1. 01React treeHooks, keys, effects
  2. 02Custom reconcilerAtomic operation batch
  3. 03NDJSON bridgeOperations and events
  4. 04Native hostSwiftUI or WinUI

Project generator ready

Build your first native React window.

Read the quick start