Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Vector Index Status Monitoring Block for React Aria

A vector index's capacity as one bar split by namespace with a growth tick and a full-in-days sentence, an index state with its last event, and a table of namespaces to choose from.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how full a vector index is and which namespace fills it, with this index status panel for React with React Aria. It is Indexharbor, a vector index monitor (made up), watching a Pinecone index on 2 pods. One bar shows its 2.0M vector capacity split by namespace (default, docs, tests and free), with a tick where seven days of growth will land. A sentence says when it fills, worked out from seven typed daily counts: "Full in 19 days at +8.1k a day". An index state word, Ready, and its last event sit above the bar. A native table lists the namespaces with vectors, share and queries a minute; choosing a row reads it. On a phone the table folds to namespace and share. Guides draw the frame and its bands; the entrance is CSS only. The figures are examples, not from any provider.

FAQ

How do I use my own index?

Edit NAMESPACES (vectors and queries a minute), CAPACITY, PODS and DAILY, the vectors stored at the end of each of the last seven days. Growth a day is the first-to-last difference over six days, and days to full is the free space divided by it. Shares of what is stored always add up to exactly 100.

What does the tick on the bar mean?

It is where the index will be in seven days if it keeps growing at the same rate. It is drawn on the same capacity scale as the bar, so you can see how much of the free space it uses.

How do I pick a namespace?

The rows are a native radio group: click a name or Tab into the table and use the arrow keys. The chosen namespace is read under the table and spoken by a polite status line.

What is real here and what stays local?

Nothing calls a vector service: the state word, the event, the counts and the rates are typed. Choosing a namespace only changes the panel. In your app feed the same shapes from your index statistics.

Can I read it without colour?

Yes. The namespaces are three weights of the foreground colour, free space is the plain track, the tick is a solid mark, and the table repeats every number with the same swatches.

How does it look on a phone?

The table keeps the namespace and its share; vectors and queries a minute are hidden, and the bar keeps its full width.

All 100 monitoring blocks