Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Redis Metrics Dashboard Block for React Aria

A key-value store console with twelve five-minute columns of commands stacked by type, a toggle for which commands are drawn, a memory and hit rate strip, and a slow log filtered by a threshold slider.

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

See what a key-value store is spending its time on, with this Redis metrics panel for React with React Aria. A hairline frame with a plus mark on each corner opens with a strip of memory against its limit, clients, evictions and a hit rate worked out from hits and misses. Under it twelve five-minute columns are stacked by command (GET, SET, HGET, DEL and Other) in foreground weights, and a multiple Toggle Group in the header chooses which commands are drawn; at least one stays on, and the scale, the legend shares and the header sentence follow. The slow log below is filtered by a Slider ("Slower than 20 ms"), keeps its height while it filters, and pressing an entry reads its arguments and what to do instead ("KEYS scans every key: use SCAN"). It's built from Toggle Group, Slider, Empty and Guides. For cache and session store dashboards.

FAQ

How do I fill it with my own numbers?

Edit COMMANDS (the names, tones and weights) and SERIES, which holds commands a second for each command and column. In the demo the series is seeded from the weights; replace it with your sampled INFO commandstats deltas. ENTRIES is the slow log: command, key pattern, client, milliseconds, the arguments and a note.

Why can I not turn every command off?

An empty chart says nothing, so the group keeps at least one command pressed. The last pressed one ignores the press. Turning commands off rescales the columns to what is drawn.

What does the slider do to the slow log?

It sets a floor in milliseconds and the list shows the entries slower than it, with the count above ("7 of 10 entries over 20 ms"). The list sits over an unseen copy of the full list, so the panel never changes height; at a floor above the slowest entry an empty state takes its place.

What stays local, and how do I wire it for real?

Everything: the series, the slow log and the strip are typed and nothing is measured. To make it real, sample INFO and SLOWLOG GET from the store on a timer, bucket the command counters into five-minute columns and map the log entries to the same shape.

How does it look on a phone?

The columns keep all twelve bars, the strip is two by two, and the slow log drops the client and the duration bar so each entry is one line.