Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Environment Variables Check Monitoring Block for Radix UI

Twelve required variables against Development, Staging and Production as Valid, Missing or Invalid, with a six-character fingerprint for secrets (never a value), an All or Problems only filter, a rule reader and a real Copy key.

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

Check that every environment has the config it needs, without ever showing a secret, with this environment variables check for React with Radix UI. It is Driftkey, a config validator. A hairline frame with a plus mark on each corner holds a table of twelve required variables (key in mono, Secret or Config, the rule it must meet) against Development, Staging and Production: each cell is Valid, Missing or Invalid as a mark and a word, and a secret also shows a six-character fingerprint of its value, so two environments holding the same secret read as the same while nothing can be read back. The header counts the problems per environment ("Production: 1 missing, 1 invalid."). A filter, All or Problems only, hides the rows that pass without moving the table. Choosing a variable reads its rule, how each environment stands, and whether Production shares a secret with another environment; Copy key puts the key name, only the name, on the real clipboard. For deploy checks, config audits and onboarding a new environment.

FAQ

How do I load my own variables?

Edit VARIABLE_LINES: key, secret or config, the rule in words, then one cell per environment: v valid, m missing or i invalid, with a fingerprint and a reason after colons (v:3fa9c1, i::not https). In your app validate each value against your schema on the server and send only the state and a short hash; never send the value.

Is a value ever shown?

No. A secret shows only a six-character fingerprint, a short hash that cannot be turned back into the value, and config values are not shown either, only their state. The drift sentence compares fingerprints, so a secret shared between Production and another environment is caught without exposing it.

What stays local, and what is real?

The variables and states are typed examples; nothing is read from a deployment. Copy key is real but copies only the variable's name, and the status line says so.

What does the filter do to the layout?

It hides the rows that pass. The table area keeps a fixed minimum height, so the detail band below stays where it is; the status line says how many of the twelve are showing.

How does it look on a phone?

Each variable becomes a row with its key and, under it, three marks for Development, Staging and Production (Dev, Stg and Prod, with the full names for screen readers). Pressing a row opens the same detail band below.

All 100 monitoring blocks