Env Vars
Environment variables with secrets masked until asked for. Reveal is per-row and never sticky — nothing survives a remount, so a shared screen cannot leak what someone expanded an hour ago.
src/components/ui/env-vars.tsxAbout
From the component's own source, where it was written.
Environment variables, with secrets masked until asked for.
Reveal is per-row and never sticky — there is no "show all", and nothing is remembered across a remount. Someone screen-sharing a deploy dashboard should not have every production secret on screen because they expanded one an hour ago.
The mask is a fixed width rather than the value's real length, since the length of a secret is itself a hint about what it is.
Install
npx astralyx-ui add env-vars
Usage
import { EnvVars } from '@/components/ui/env-vars'
<EnvVars vars={vars} />Composer
Change the props and the source below follows.
NODE_ENVproductionprodDATABASE_URL••••••••••••prodpreviewSTRIPE_SECRET_KEY••••••••••••prodNEXT_PUBLIC_API_URLhttps://api.astralyx.devprodpreviewdev
<EnvVars vars={vars} />Examples
Variables
<EnvVars vars={vars} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
EnvVars
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| vars | EnvVar[] | required | { key, value, secret?, scopes?, updated? }. |
Types
EnvVar
Environment variables, with secrets masked until asked for.
| Field | Type | Description |
|---|---|---|
| key | string | — |
| value | string | — |
| secret? | boolean | Masks the value and adds a reveal toggle. The mask is a fixed width, since the length of a secret is itself a hint about what it is. |
| scopes? | string[] | Environments the variable applies to, shown as badges. |
| updated? | string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| copy | always available | Copies the real value even while masked — the common reason to open one of these is to paste it somewhere. |