shadcn.io is not affiliated with official shadcn/ui
Connection Pool Dashboard Block for Radix UI
Three database pools drawn as grids of slots, in use, idle and free, with the wait queue as tokens at the gate, a slider that asks what a different maximum would do at the peak, and each pool's timeouts in a list.
Installation
Overview
See whether a connection pool is the bottleneck, with this pooling panel for React with Radix UI. A hairline frame with a plus mark on each corner holds three Poolwright pools, each drawn as a grid with one slot for every connection it allows: filled when in use, outlined when idle, empty when free, with the requests waiting for a connection shown as tokens at the gate. Choosing a pool lists its acquire timeout, idle timeout, max lifetime and queue depth. A Slider in the toolbar asks what the chosen pool would do with a different maximum: its grid is redrawn at that size and a sentence says how many requests would wait at the peak, such as "At 60, no request waits at the peak". It's built from Slider and Guides, with the pools as native radio buttons and CSS entrances only. For database consoles, capacity reviews and incident write-ups.
FAQ
How do I fill it with my own pools?
Edit POOLS. Each has a max, three timeouts and two loads, now and peak, each with active, idle and waiting counts. The grids, the queue figures and the sentence are worked out from those counts, so nothing is typed twice.
How is the what-if worked out?
The peak's demand is its in-use connections plus the requests that were waiting. At a new maximum, that demand fills the pool up to the maximum and whatever is left over waits. Idle connections only exist in the room that remains. It doesn't model how a longer queue changes how long each connection is held, so treat it as the first question to ask, not a forecast.
What stays local, and how do I wire it for real?
Everything: the counts are typed and the slider changes only what is drawn. To use real data, read the active, idle and waiting counts from your pooler's stats and the peak from your metrics store, then change the maximum in the pooler's own configuration.
Can I use it without a pointer?
Yes. The pools are a group of radio buttons you move through with the arrow keys, the slider takes arrow keys too, and each pool says its counts in words ("38 in use, 0 idle, 5 waiting") while the drawn slots are hidden from screen readers. A polite status line repeats the sentence for the chosen pool.