Infrastructure Topology

An interactive, fluid Infrastructure Topology component simulating live data flows across microservices, central neural mesh core routers, connected SVG beam pipelines, and real-time telemetry metrics.

Variations

Infrastructure Topology Showcase

Live animated data flow canvas with pulsing central neural mesh router, peripheral service cards, and telemetry metrics.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Infrastructure Topology

npx shadcn@latest add @algorize-ui/infrastructure-topology

components/custom/infrastructure-topology.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Infrastructure Topology needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Central Neural Mesh Hub: Mode-adaptive pulsing concentric rings with core status & version indicator.
Animated SVG Data Beams: Real-time laser packet dash animations connecting peripheral service nodes to the central hub.
Interactive Route Highlights: Hovering over service cards highlights the active connection pipeline with ring glow feedback.
Responsive Dual Layout: Full 2D graph canvas on desktop/tablet, and clean non-overlapping 2-column grid on mobile screens.
Semantic Theme Adaptation: Uses Tailwind CSS semantic tokens (bg-background, bg-card, text-foreground, border-border) to seamlessly match any site theme.

Props Reference: InfrastructureTopology

Prop	Type	Default	Description
`headerTitle`	`string`	`"Infrastructure Topology"`	Main headline text in the header bar.
`headerSubtitle`	`string`	`"LIVE DATA FLOW · 6 SERVICES · 5 ROUTES"`	Monospaced subtitle text in the header bar.
`statusBadge`	`string`	`"ALL SYSTEMS"`	System status pill badge text.
`bandwidthBadge`	`string`	`"10 GBPS"`	Bandwidth speed status badge text.
`centerTitle`	`string`	`"NEURAL MESH"`	Title of the central core router node.
`centerSubtitle`	`string`	`"CORE ROUTER · V4.2"`	Subtitle of the central core router node.
`centerColor`	`"cyan" \| "emerald" \| "indigo" \| "rose" \| "purple"`	`"cyan"`	Theme color palette of the central core router.
`nodes`	`TopologyNode[]`	`DEFAULT_NODES`	Array of peripheral service node objects.
`metrics`	`MetricItem[]`	`DEFAULT_METRICS`	Array of telemetry metric pill objects.
`animated`	`boolean`	`true`	Toggles SVG connection beam laser animations.
`interactive`	`boolean`	`true`	Toggles hover route highlighting animations.