ns-ui
A small hairline node/edge network where data pulses branch across random routes, easing along each edge with a fading tail — idle traffic, dense active traffic, or an error state where packets queue up at a congested hub node.
Use when showing that traffic is flowing across a topology, with routes that genuinely branch and a congestion state where packets visibly queue at a hub, as an ambient system-health read rather than a precise metric; pick timeline-agent-lanes instead when the moving things are agents holding turns rather than packets on edges, or meter-latency-capillary when the question is whether one specific wait is slower than usual.
Install
npx shadcn add https://design.helpmarq.comns-ui / network-packet-trace
state: idle
Pulses branch across the network at random; in the error state they route toward the hub node and stack up instead of dispersing. Hover or focus a node for its live throughput.
| Prop | Type | Default | Description |
|---|---|---|---|
| state? | PacketTraceState | — | Traffic pattern. Default "idle". |
| className? | string | — | — |