Introduction

Welcome to Marrow UI (@marrow/ui). Marrow shares two focused, production-ready React components through our shadcn-compatible registry (registry.json):

1. Marrow Diagram Embed: Embed self-contained, interactive HTML network diagrams compiled with Marrow directly into Next.js or React applications with automatic dark/light theme syncing, fullscreen expansion, and minimal kiosk chrome.
2. Cable & Link Badge: Visual cable mode (trunk, routed, tunnel, LAG) and line rate chips (1G–400G) with animated packet flow telemetry.

Just like shadcn/ui, you can install them with a single CLI command directly into your project's components/marrow/ directory.

InstallationCopy Anchor Link

Add either component to your Next.js or React application via the shadcn CLI:

Marrow Diagram EmbedCopy Anchor Link

npx shadcn@latest add https://marrowdiagram.vercel.app/r/topology-canvas.json

Or via GitHub shorthand:

npx shadcn@latest add raiz-toff/Marrow/topology-canvas

Cable & Link BadgeCopy Anchor Link

npx shadcn@latest add https://marrowdiagram.vercel.app/r/cable-badge.json

Or via GitHub shorthand:

npx shadcn@latest add raiz-toff/Marrow/cable-badge

Usage ExampleCopy Anchor Link

import { MarrowEmbed, CableBadge } from "@marrow/ui";

export function NetworkDashboard() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <div className="flex items-center gap-3">
        <CableBadge mode="trunk" speed="100G" status="up" animated />
        <CableBadge mode="routed" speed="25G" status="up" />
      </div>

      <MarrowEmbed
        src="/demo/tiered-embed.html"
        title="Campus Core Network"
        chrome="minimal"
        height="600px"
      />
    </div>
  );
}