shadcn.io is not affiliated with official shadcn/ui
Integration Status Dashboard Block for React Aria
Eight connectors as rows with a record count, the last sync and a 24-run strip of ok, partial and failed shapes, a status filter, and a Reconnect dialog of three steps for the failed ones.
Installation
Overview
See which connections are syncing and fix the ones that are not, with this sync board for React with React Aria. A hairline frame with a plus mark on each corner lists eight connectors, each with a neutral two-letter tile, its name in text, the records it holds, when it last synced, a strip of its last 24 runs and a status word. The strip draws every run as a shape rather than a color: a tall filled bar for ok, a short bar for partial and a hollow bar for failed, newest last, and the connector's status comes from its latest run (Healthy, Degraded or Failed). A Toggle Group in the header filters the board to All, Healthy, Degraded or Failed, and the rows keep their height while it does. A failed connector has a Reconnect button that opens a Dialog of three steps (sign in, approve the scopes, run a test sync) with a Shine Button to move through them; finishing adds an ok run to the strip, updates the counts and ends with "Reconnected in this demo; nothing connected". Below the medium breakpoint each row is two lines with the strip under the name. It's built from Dialog, Toggle Group, Shine Button, Empty and Guides. For integration and data-platform teams.
FAQ
How do I list my own connectors?
Edit CONNECTORS: each has a name, two letters for the tile, a record count, the ISO time of its last sync and a string of 24 characters for its runs, oldest first, where o is ok, p is partial and f is failed. The status, the counts in the header, the strip's description and "synced 16 min ago" are derived from those, with the time counted from a fixed AS_OF.
Why are the runs shapes and not colors?
So the strip reads without color and in both themes: height and fill carry the meaning, and the legend under the list names the three. Each strip is also described in text, for example "21 ok, 2 partial, 1 failed. The latest run was failed."
What does Reconnect do?
It walks through three typed steps and then adds an ok run to that connector's strip, so its status turns Healthy. Cancel, Escape and the close button leave the connector as it was, and the button keeps its place after a reconnect, reading Reconnected, so focus returns to it. Nothing is authorized or synced; the dialog says so.
What stays local, and how do I wire it for real?
The runs are typed and the reconnect is component state, so a reload brings the failure back. To make it real, read run history from your sync service, start the provider's real authorization in step one, and run the test sync on the server before you mark the connector healthy.