Everything above, from one tag

The wallpaper, the dock, the draggable and resizable windows, Spotlight, Settings, the per-platform chrome it cycles through: all of it is one component.

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} />;

Register one app object and it lights up the dock, the menu bar, Spotlight, and the keyboard shortcuts at once. You describe the apps; the library composes the system.

Faithful to each platform, not approximated

The same apps and window manager run under every theme, but each one is its platform, not a coat of paint.

• macOS has the traffic lights, the genie minimize, the floating dock with cursor magnification, and Tahoe’s Liquid Glass.
• Windows has the caption buttons, the flush taskbar, and the Start menu.
• Ubuntu has the Yaru dock, the Circle of Friends launcher, and the centered clock.

Motion timings, corner radii, and chrome dimensions are taken from the real platforms, cited in the code, not tuned by feel. Open any one full-screen:

macOS Traffic lights, a floating dock, a translucent menu bar. Open full-screen ↗ Windows Caption buttons, a flush taskbar, a Start launcher. Open full-screen ↗ Ubuntu Yaru dark, a left dock, a centered clock, Quick Settings. Open full-screen ↗

A real desktop, not a mockup

The apps actually work. Notes persist across reloads, the calculator computes, the terminal runs commands. Windows drag at 60fps, resize from any edge, snap to halves and quarters, and minimize with the genie. Spotlight finds apps, settings, and files. It behaves like an OS because it is one, held in React state.

Build your own

A portfolio that boots like a Mac. An internal console that feels like a real desktop. A product demo, an onboarding sandbox, a teaching tool. You write an app as a single object, or start from a prebuilt one in the App Store and edit the source in your codebase.

npx @react-ui-os/cli add notes

Browse the App Store or publish your own.

Get started

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

Drop in the one tag above and you have a desktop. The Quickstart takes it from there.