Sidebar operations console
An illustrative service console with live navigation, operational metrics, deployments, logs, and account tools.
⌘K
Overview
Requests / month
Blocks
Blocks you can drop into a real product.
Start from a complete interaction, then strip it back to the pieces your product actually needs. Every block below is running: real components, real state, nothing screenshotted. They're filed by the job they do rather than by which components they happen to use, because that's how you'll be looking for them.
Operations
Interactive shells and control surfaces for running services, reviewing work, and making changes with context intact. All workspace data is illustrative.
Split inbox workspace
An illustrative team inbox with folders, read state, starring, archiving, and an inline reply surface.
Parity gate is red on the Svelte adapterGHGrace Hopper · 09:14
The keyboard layer diverged after the focus-trap change landed on Tuesday. Svelte is returning focus to the trigger one tick later than the other four, so the assertion on the restored activeElement fails.
It's a real divergence rather than a flaky test. I can reproduce it by hand. I would rather we hold the release than record it as an intentional difference.
Top-nav service workspace
An illustrative service directory that filters rows, exposes activity and usage, and protects deployment confirmation.
Acme Platformproduction
| State | ||||
|---|---|---|---|---|
| edge-cache | staging | platform | 19ms | paused |
| docs | prod | platform | 64ms | live |
| web | prod | growth | 88ms | live |
| ledger-api | prod | payments | 142ms | live |
| search | staging | growth | 204ms | live |
| worker | prod | payments | 311ms | rolling |
Aada deployed ledger-api4m
Ggrace paused edge-cache1h
Aalan rotated a production token3h
Cci updated 2 visual baselinesyesterday
Requests3.6M of 5M
Build minutes410 of 1,000
Seats11 of 12
Service settings workspace
An illustrative settings shell with dirty-state feedback, revert and save actions, access roles, and empty history.
General
Deployment control panel
A rollout review surface that joins service readiness, blast radius, and pause policy before any action is allowed.
Review a production rollout
Compare service readiness, choose blast radius, and record the safety posture before any deployment begins.
Illustrative dataScenario only; the controls never deploy.
First cohort2 of 20 replicas
Readiness evidencesample workspace
| Readiness | ||||
|---|---|---|---|---|
| web | 1c09aa | growth | 88ms | ready |
| ledger-api | 8f21c4 | payments | 142ms | ready |
| search | c72d18 | growth | 204ms | blocked |
| worker | 4b7e02 | platform | 311ms | watch |
Why these aren't registry items
A component is the stable bit: one contract, checked across five adapters. A block is one particular arrangement of those components, and it carries state and data that really belong to whatever product is using it. Those choices won't survive contact with your app, so shipping them as registry items would only promise a stability they don't have.
Install the primitives, adapt the pattern
Blocks are patterns, not packages: copy the layout and state from here, then install the primitives each one leans on.
pnpm dlx grassroot add ui/select