Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt

Use this file to discover all available pages before exploring further.

Every app you see on the DevOS desktop is a plain React functional component wired into a central icon registry in Desktop.js. Adding your own app requires three steps: write the component, pick an icon, and add one entry to the I array. The window manager handles the rest — sizing, z-ordering, minimise, maximise, and close are all provided automatically.
1

Create your component

Add a new file under components/apps/. The component receives no props and is responsible for its own internal state. Export it as a named export so Desktop.js can import it alongside the built-in apps.
components/apps/MyApp.js
import React from 'react';

const MyApp = () => {
  return (
    <div className="h-full bg-white p-6 font-ui">
      <h1 className="text-xl font-bold text-os-teal mb-4">My App</h1>
      <p>Your content goes here.</p>
    </div>
  );
};

export { MyApp };
2

Choose an icon

DevOS uses lucide-react throughout the desktop. Pick any icon from the library — it is already listed as a dependency, so no extra installation is needed.
import { Rocket } from 'lucide-react';
Browse the full catalogue at lucide.dev/icons to find an icon that matches your app’s purpose. The desktop renders each icon at size={40} with strokeWidth={1.5}.
3

Register in Desktop.js

Open components/system/Desktop.js and add your imports at the top of the file alongside the existing app imports. Then add one object to the I array — this is the single source of truth for everything the desktop renders.
components/system/Desktop.js
import { MyApp } from '../apps/MyApp';
import { Rocket } from 'lucide-react';

// Inside the I array:
{
  id: 'my-app',
  label: 'my-app.exe',
  icon: Rocket,
  component: MyApp,
  defaultSize: { width: 600, height: 400 },
}
Each field maps to a specific desktop behaviour:
FieldTypePurpose
idstringUnique window identifier
labelstringText shown beneath the desktop icon
iconLucide componentIcon rendered on the desktop
componentReact componentContent rendered inside the window
defaultSize{ width, height }Initial window dimensions in pixels
4

Test your app

Start the development server and double-click your new icon to open it in a window:
npm run dev
Your icon will appear in the left-hand desktop column, ordered by its position in the I array. Single-click selects it (highlighted border); double-click opens the window. The window is immediately draggable, resizable, and supports the full title-bar controls.

​
App component requirements

DevOS apps are mounted inside a Window frame that provides the chrome (title bar, resize handles, and controls). Your component fills the content area beneath the title bar. Keep the following conventions in mind to ensure a consistent look and feel across all apps:
  • Fill the area — use h-full as the outermost class so the component occupies the full window height. Without it the window will appear to have an empty lower half.
  • Typography — three font utilities are available. Use font-ui for interface text, font-code for monospaced / code output, and font-serif for long-form prose.
  • Colour palette — use text-os-teal for accent text and bg-os-cream for cream-tinted backgrounds to stay visually consistent with the rest of the OS shell.
  • No required props — the window manager instantiates your component as <MyApp /> with no props. Manage all state internally or through React context.

​
Opening other windows from inside an app

Any component inside the WindowManagerProvider tree can imperatively open another registered window. Import the useWindowManager hook from WindowManager.js and call openWindow with the target app’s id and its window options: 
import { useWindowManager } from '../system/WindowManager';

const MyApp = () => {
  const { openWindow } = useWindowManager();

  const handleOpen = () => {
    openWindow('about', {
      title: 'about_me.exe',
      defaultSize: { width: 600, height: 450 },
    });
  };

  return (
    <div className="h-full bg-white p-6 font-ui">
      <button onClick={handleOpen} className="text-os-teal underline">
        Open About
      </button>
    </div>
  );
};
openWindow is idempotent with respect to minimised windows: if the target window is already open but minimised, it restores it rather than creating a duplicate.
The id value must be unique across the entire I array. If you reuse an existing id (for example 'about'), double-clicking your new icon will restore the existing About window instead of opening your component. Choose a short, lowercase, hyphen-separated string that describes your app.

Build docs developers (and LLMs) love

Get started for freeTalk to us