Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Active Connections Age Monitoring Block for Radix UI

11,842 open connections in six age buckets as log-scaled bars you can choose, the six longest-lived connections of the chosen bucket, a protocol mix and the failed handshakes.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find the connections that never close with this panel for React with Radix UI. It is Tendrilgate, a connection-tracking gateway, and the header is worked out from its counts: "412 are older than 1 hour; 388 of them are WebSocket". In a hairline frame with a plus mark on each corner, six age buckets from under a second to over an hour are bars on a log-leaning scale, each with its count; they are one radio group, so the arrow keys move between them. Choosing a bucket lists its six longest-lived connections below: the peer address in monospace (documentation ranges only), the protocol as an outline Badge (HTTP/3, HTTP/2 or WebSocket), how long it has been open in days, hours and minutes, and the bytes sent. A side cell draws the protocol mix as one three-part bar with its counts and shares, and states the failed handshakes with their share. Guides draw the frame and its bands; the entrance is CSS only. For gateways, proxies and any service where a few long connections hold the capacity.

FAQ

How do I load my own connections?

Edit BUCKETS: each has a label, the count of connections of each protocol (mix) and its six longest-lived connections with their age in seconds, the protocol and the bytes sent. A bucket's count is the sum of its mix, the total, the bar widths, the protocol shares (adding up to exactly 100) and the header sentence are all worked out from them, so nothing is typed twice.

Why are the bars log-leaning?

Counts span two orders of magnitude, so a plain scale would hide the 189 connections between ten minutes and an hour. A bar's width is ln(1 + count) / ln(1 + biggest), which keeps small buckets visible; the counts beside them are exact.

Is anything live?

No. The counts, peers and ages are typed examples and the panel says it is a snapshot; nothing is connected or counted. In your app read the buckets from your gateway's connection table.

How do I use it with a keyboard?

The buckets are a radio group: Tab enters it, the arrow keys move the choice and the list below follows, and a polite status line names the bucket and its longest connection. The list always has six rows, so choosing does not change the frame's height.

How does it look on a phone?

The bars take the full width with their labels and counts, the connections become a list under them (peer and protocol on one line, age and bytes under), and the side cell comes last.