v1.0.1

microsvc UI kit

One look for every service on microsvcapi.com: Material design tokens layered on Bootstrap 5, a global top bar with a Services menu and a light / dark / system theme switch. Two tags, no framework, no cookies, no storage.

services.json SRI manifest

The bar in light and dark

Light surface

Bootstrap components with the Material layer from tokens.css.

Dark surface

Same markup; data-bs-theme="dark" on the container.

Mount it

Pinned, immutable release with Subresource Integrity. The host loads Bootstrap Icons (otherwise the kit loads a pinned copy from jsDelivr with SRI).

<link rel="stylesheet" href="https://ui.microsvcapi.com/v1.0.1/shell.css"
      integrity="sha384-6ozPhlaP5xgID1kzCxyFsmFEk/T8L976leHqlnunz74iafJlaeHp9Eb9mw5jr+ZN" crossorigin="anonymous">
<script src="https://ui.microsvcapi.com/v1.0.1/shell.js" defer
        integrity="sha384-fksooagvSzcFoYjonyz2PpbujPS0vjR3uo92tAMENQIR692wmLUKx0AsJ8zlvvuf" crossorigin="anonymous"
        data-msvc-service="agentfactory"></script>

<!-- optional placeholder; without it a header is inserted at the top of body -->
<div data-msvc-shell><nav>...your breadcrumb...</nav></div>

<!-- optional: Material look for your Bootstrap components (after bootstrap.css) -->
<link rel="stylesheet" href="https://ui.microsvcapi.com/v1.0.1/tokens.css"
      integrity="sha384-MEVbeGPVDlSbWJiGvAmnsnfdxkSsb4NjcxqT48WPc93ciDAX8Py44KhS4WtZ1OD1" crossorigin="anonymous">

Persisting the theme

The kit never stores anything. It sets data-bs-theme on <html> and fires msvc:theme; the host saves the choice its own way.

document.addEventListener("msvc:theme", (e) => {
  // e.detail = { mode: "light" | "dark" | "system", theme: "light" | "dark", source }
  savePreference(e.detail.mode);
});

Theme events

Change the theme in the bar or with the buttons above.

  • No events yet.

Published services

From /v1/services.json, the public projection of the intranet registry (id, name, type, description, label, icon, url only).