HighlightsOne objectThemesMake it yoursAppsGet started

Highlights

Have a look around.

Everything below is rendered by the library. The desktop above is the same code, running live.

A window manager, for real. Drag at 60 fps, resize from any edge, snap to halves and quarters, minimize with the genie. Window state lives in React; your routes can watch it.

Spotlight, on Cmd-K. Apps, system windows, settings, and any source you register, searchable from one palette. The Windows theme presents it as Start, Ubuntu as the app grid.

Settings, on Cmd-,. A theme declares which tokens end users may tweak; the panel renders itself and preferences persist through the storage adapter. No code on your side.

One notify() call, four surfaces. A toast stack, per-app dock badges, a menu-bar dot, and the Notification Center, wired from a single imperative call in core.

The contract

You register apps. The library composes the system.

An app is one object. Register it and it appears in the dock, the menu bar, Spotlight, and the keyboard shortcuts at once, with nothing else to wire.

import { Desktop } from "@react-ui-os/desktop";
import { macosTheme } from "@react-ui-os/theme-macos";

const apps = [{ id: "notes", name: "Notes", content: () => <h1>Hello, desktop.</h1> }];

<Desktop apps={apps} theme={macosTheme} />;

Five minutes to a desktop →

Themes

Each one is its platform, not a coat of paint.

The same apps and window manager run under every theme. Motion timings, corner radii, and chrome dimensions come from the real platforms, cited in the code, not tuned by feel.

macOS. Traffic lights, the floating dock with the fisheye, a translucent menu bar, Tahoe's Liquid Glass. Open full-screen ↗

Windows. Caption buttons, the flush taskbar, the Start menu, Fluent motion. No fisheye, because Windows has none. Open full-screen ↗

Ubuntu. Yaru, a left dock flush to the edge, the centered clock, round symbolic window controls, Quick Settings. Open full-screen ↗

Make it yours

The clones are reference themes, not the ceiling.

A theme is one plain-data object: palette, shape, motion, blur, wallpaper, chrome. Put the dock on the left, drop the menu bar, round the windows, pick your accent. Start from a shipped theme and change what you disagree with, or click one together on a live desktop and copy the file out.

Open the theme editor Writing a theme →

App Store

Install an app, own the files.

Apps are not bundled into the library. The CLI copies an app's source into your codebase, so you can edit everything after install. Notes, Calculator, Clock, Calendar, Reminders, Sketch, and Terminal are in the registry today; host your own registry to publish more.

npx @react-ui-os/cli add notes

Browse the App Store Publish your own →

Also in the box

The rest of an OS.

A desktop is more than windows. These ship wired together and reachable from the same App registry.

• Workspaces. Three spaces by default, Ctrl+Alt+arrows to switch, windows keep their state across the move.
• Mission Control. F3 tiles every open window in a grid of cards; click one to focus it.
• App switcher. Cmd-Tab cycles running apps in most-recently-used order, the Mac convention.
• Window snapping. Drag to an edge for halves and quarters with a live preview, or use the keyboard chords.
• File explorer. A Finder-style surface with list and icon views, selection, and keyboard navigation.
• Context menus. Right-click the desktop, the dock, or a title bar; openContextMenu() from anywhere.
• Quick Settings. The GNOME system menu as a popover; registerQuickSetting() adds your tiles.
• Swappable storage. localStorage by default; pass an adapter for server-backed or cross-device sync.

Ready when you are.

One install, one tag, a working desktop.

npm install @react-ui-os/desktop @react-ui-os/theme-macos

Get started Read the docs →