Start from manganese

Manganese is Domicile's reference shell: a complete, ready-to-use desktop (more about manganese).

Manganese is also a set of React packages. Build your shell from it: change its options, add your own bar items, or take its parts into a shell of your own.

Change its options

runManganese is manganese as a shell. Every option is optional:

// shell.tsximport { DEFAULT_BAR, runManganese } from "@domicile-desktop/manganese";import { DEFAULT_KEYBINDINGS, exec } from "@domicile-desktop/manganese-window-management/keyboard/commands";export const Shell = runManganese({  bar: DEFAULT_BAR,  floating: [{ app: "pinentry" }],  keybindings: {    keybindings: { ...DEFAULT_KEYBINDINGS, "Meta+Return": exec("foot") },  },});

domicile ./shell.tsx

• bar: the top bar's left, center and right columns (TOP-BAR.md).
• keybindings: the key table (KEYS.md).
• floating: windows that open floating (WINDOW-MANAGEMENT.md).
• applications: the launcher's hidden apps and bookmarks (LAUNCHER.md).
• inboxes: Gmail and Google Messages in the notification drawer (TOP-BAR.md).

The same Shell export in ~/.config/domicile/domicile.tsx makes it your desktop (The config file).

Add a bar item

A bar item is a React component. It reads the desktop with @domicile-desktop/react's hooks and styles itself with a plain CSS import:

import { DEFAULT_BAR, runManganese } from "@domicile-desktop/manganese";import { useWindows } from "@domicile-desktop/react/windows";import "./window-count.css";const WindowCount = () => (  <span className="window-count">{useWindows().length} windows</span>);export const Shell = runManganese({  bar: { ...DEFAULT_BAR, center: [...DEFAULT_BAR.center, <WindowCount key="count" />] },});

To use a CSS tool such as Tailwind, add a vite.config (Build config).

More: CUSTOM-BAR-ITEMS.md, HOST-READOUTS.md.

Take its parts

Each part of manganese is its own package: the bar and each bar item, window management, the launcher, notifications, the clipboard, the lock screen, the wallpaper. Mount the ones you want in your own shell. The list: shell-manganese, and how they fit: SOURCE.md.