Subpath imports & standalone primitives
For smaller bundles, import only what you need:
// Full desktop (largest bundle)
import { WindowsXP } from '@caoergou/windows-xp';
// Individual applications
import { Minesweeper } from '@caoergou/windows-xp/apps';
// UI building blocks
import { Window, Desktop, Taskbar, XPIcon } from '@caoergou/windows-xp/components';
// Hooks and providers
import { useWindowManager, useFileSystem, useAppRegistry, useCulture } from '@caoergou/windows-xp/hooks';
// Theme tokens
import { COLORS, xpButtonStyles, xpScrollbarStyles } from '@caoergou/windows-xp/theme';
// App registry helpers
import { APP_REGISTRY, resolveFileOpen, getAppDisplayName } from '@caoergou/windows-xp/registry';System components (
Window,Taskbar,Desktop, …) are wired to the desktop's contexts and must render inside the providers exported from the root entry (orAppProviders). The primitives below need nothing.
Standalone UI primitives (no providers)
@caoergou/windows-xp/components ships zero-dependency primitives you can drop anywhere — no <WindowsXP>, no providers — to build XP-styled UI (like xp.css, but as controlled React components, matching the xp.css spec value-for-value):
XPButton, XPTextInput, XPCheckbox, XPRadio, XPSelect, XPProgressBar, XPTooltip, XPGroupBox, XPStatusBar (+ XPStatusBarField), XPTabs, XPMenuBar (family), XPIcon, XPDialog.
import { XPDialog, XPButton } from '@caoergou/windows-xp/components';
import '@caoergou/windows-xp/style.css';
// A classic XP message box — no providers required.
function SaveDialog({ onSave, onDiscard, onCancel }) {
return (
<XPDialog
title="Notepad"
icon="alert_warning"
modal
onClose={onCancel}
footer={
<>
<XPButton onClick={onSave}>Yes</XPButton>
<XPButton onClick={onDiscard}>No</XPButton>
<XPButton onClick={onCancel}>Cancel</XPButton>
</>
}
>
The text in the Untitled file has changed. Do you want to save the changes?
</XPDialog>
);
}import {
XPGroupBox,
XPCheckbox,
XPTabs,
XPProgressBar,
XPStatusBar,
XPStatusBarField,
} from '@caoergou/windows-xp/components';See every primitive rendered in isolation at the component gallery route: append ?gallery to the demo URL.