# @prozilla-os/core

> A React component library written in TypeScript for building web-based operating systems, made by Prozilla.

Latest version **2.1.2** (published 2026-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @prozilla-os/core
pnpm add @prozilla-os/core
yarn add @prozilla-os/core
bun add @prozilla-os/core
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2026-05-25 |
| First published | 2024-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 5.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 356 |
| Author | Prozilla |
| Maintainers | prozilla |

## Links

- npm: https://www.npmjs.com/package/@prozilla-os/core
- Repository: https://github.com/prozilla-os/ProzillaOS
- Homepage: https://os.prozilla.dev
- Issues: https://github.com/prozilla-os/ProzillaOS/issues
- Funding: https://ko-fi.com/prozilla
- npm.io page: https://npm.io/package/@prozilla-os/core

## Dependencies (15)

- [react](https://npm.io/package/react.md) ^18.3.1
- [valtio](https://npm.io/package/valtio.md) ^2.3.2
- [lz-string](https://npm.io/package/lz-string.md) ^1.5.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.3.1
- [react-ga4](https://npm.io/package/react-ga4.md) ^2.1.0
- [react-svg](https://npm.io/package/react-svg.md) ^17.2.4
- [react-draggable](https://npm.io/package/react-draggable.md) ^4.5.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.30.3
- [@prozilla-os/skins](https://npm.io/package/@prozilla-os/skins.md) 1.1.9
- [@prozilla-os/shared](https://npm.io/package/@prozilla-os/shared.md) 1.4.0
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^4.1.2
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^3.3.1
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^7.2.0
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^7.2.0
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^7.2.0

## Recent versions

- 2.1.2 (latest) — 2026-05-25
- 2.0.2 — 2026-04-17
- 2.0.1 — 2026-04-13
- 1.3.14 — 2026-01-25
- 1.3.13 — 2026-01-25
- 1.3.12 — 2025-09-22
- 1.3.11 — 2024-10-30
- 1.3.10 — 2024-10-30
- 1.3.9 — 2024-10-30
- 1.3.8 — 2024-10-29
- 1.3.7 — 2024-10-27
- 1.3.6 — 2024-10-27
- 1.3.5 — 2024-10-27
- 1.3.4 — 2024-10-27
- 1.3.3 — 2024-10-25
- … 21 more at https://npm.io/package/@prozilla-os/core/versions

## README

<div align="center">
  <br />
  <p>
    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
  </p>
  <p>
    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/prozilla-os/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/prozilla-os/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/prozilla-os/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
  </p>
</div>

## About

`@prozilla-os/core` is a React Vite component library written in TypeScript for building web-based operating systems, made by Prozilla.

## Installation

```sh
npm install @prozilla-os/core
yarn add @prozilla-os/core
pnpm add @prozilla-os/core
```

## Usage

### Basic setup

```tsx
import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "@prozilla-os/core";

function App() {
  return (
    <ProzillaOS systemName="Example" tagLine="Powered by ProzillaOS">
      <Taskbar/>
      <WindowsView/>
      <ModalsView/>
      <Desktop/>
    </ProzillaOS>
  );
}
```

<br />

### Configuration

```ts
interface ProzillaOSProps {
  systemName?: string;
  tagLine?: string;
  skin?: Skin;
  config?: {
    apps?: Partial<AppsConfigOptions>;
    desktop?: Partial<DesktopConfigOptions>;
    misc?: Partial<MiscConfigOptions>;
    modals?: Partial<ModalsConfigOptions>;
    taskbar?: Partial<TaskbarConfigOptions>;
    tracking?: Partial<TrackingConfigOptions>;
    windows?: Partial<WindowsConfigOptions>;
    virtualDrive?: Partial<VirtualDriveConfigOptions>;
  };
  children?: ReactNode;
}
```

```ts
interface SkinOptions {
  systemIcon: string;
  appIcons?: { [key: string]: string };
  appNames?: { [key: string]: string };
  wallpapers: string[];
  defaultWallpaper: string;
  fileIcons: {
    generic: string;
    info?: string;
    text?: string;
    code?: string;
    external?: string;
    video?: string;
    audio?: string;
  };
  folderIcons: {
    generic: string;
    images?: string;
    text?: string;
    link?: string;
    video?: string;
    audio?: string;
  };
  loadStyleSheet?: () => void;
  defaultTheme?: Theme;
}
```

```ts
interface AppsConfigOptions {
  apps: App[];
}

interface DesktopConfigOptions {
  /** @default 1 */
  defaultIconSize: 0 | 1 | 2;
  /** 0: vertical, 1: horizontal @default 0 */
  defaultIconDirection: 0 | 1;
}

interface MiscConfigOptions {
  /** @default 250 */
  doubleClickDelay: number;
}

interface ModalsConfigOptions {
  /** Default size of a dialog box @default new Vector2(400, 200) */
  defaultDialogSize: Vector2;
  /** Default size of a file selector @default new Vector2(700, 400) */
  defaultFileSelectorSize: Vector2;
}

interface TaskbarConfigOptions {
  /** Height of the taskbar in CSS pixels @default 3 * 16 */
  height: number;
}

interface TrackingConfigOptions {
  /** Enable tracking @default true */
  enabled: boolean;
  /** Google Analytics measurement ID */
  GAMeasurementId: string;
}

interface WindowsConfigOptions {
  /** @default 32 */
  screenMargin: number;
  /** @default "-" */
  titleSeparator: string;
  /** If the user's screen is smaller than these values, windows will always be maximized @default new Vector2(350, 350) */
  minScreenSize: Vector2;
}

interface VirtualDriveConfigOptions {
  /** Enables persistent storage of the virtual drive. */
  saveData: false | {
    enableCompression: boolean;
    prefix?: string;
    migrations?: [string, string][];
  };
  /** Configure the data that is loaded initially. */
  defaultData: {
    includePicturesFolder?: boolean;
    includeAudioFolder?: boolean;
    includeVideoFolder?: boolean;
    includeDocumentsFolder?: boolean;
    includeDesktopFolder?: boolean;
    includeSourceTree?: boolean;
    includeAppsFolder?: boolean;
    includeScriptsFolder?: boolean;
    loadData?: (virtualRoot: VirtualRoot) => void;
  };
}
```

## Links

- [Demo][demo]
- [Docs][docs]
- [GitHub][github]
- [npm][npm]
- [Discord][discord]
- [Ko-fi][ko-fi]

[demo]: https://os.prozilla.dev/
[docs]: https://os.prozilla.dev/docs/reference/core
[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/core
[npm]: https://www.npmjs.com/package/@prozilla-os/core
[discord]: https://discord.gg/JwbyQP4tdz
[ko-fi]: https://ko-fi.com/prozilla

---
_Source: https://npm.io/package/@prozilla-os/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._