Marrow

Cable & Link Badge

Network cable and link mode visualizer (trunk, routed, tunnel, LAG) with media kind and optional traffic flow animation.

The Cable & Link Badge (<CableBadge />) is a compact visual indicator for physical and logical network links. It displays cable line styles (solid, dashed, double-rail trunk), operational status colors, port speeds, and optional packet animation pulses.

Preview

Trunk (802.1Q)100G
Routed L325G
Overlay Tunnel10G
Access Port1G

Installation

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

Features

  • Link Modes: Styled representations for trunk, access, routed, tunnel, and peering.
  • Traffic Pulse Animation: Optional animated packet ping to indicate active flow telemetry.
  • Speed Chip: Integrated mono chip for line rates (1G, 10G, 25G, 40G, 100G, 400G).

On this page

PreviewInstallationFeatures