Environment variables

Masks environment values by default, with deliberate reveal, value copy and quoted shell exports.

Preview

Environment variables
MODEL_NAMERequiredModel selected by this workspace
••••••••
EXAMPLE_TOKENRequiredExample value for reveal and copy
••••••••
Shell exports

In action

Reveal and copy selected values

Workspace model configuration
MODEL_NAMERequiredModel selected by this workspace
••••••••
EXAMPLE_TOKENRequiredExample value for reveal and copy
••••••••
Shell exports

When to use

Use it for

  • Review supplied settings with masked initial values and explicit reveal controls.
  • Use showValues and onShowValuesChange for controlled visibility; per-row reveals reset when the value changes.
  • Copy a value or all portable shell exports. Export generation rejects invalid assignment names and quotes shell metacharacters.

Avoid

  • Treating visual masking as secret storage; values still exist in application memory.
  • Using duplicate variable names or copying secret values without a user action.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { EnvironmentVariables } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/environment-variables.

Copy the source

npx @noorddev/vlak-cli add environment-variables

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/environment-variables.json

Installs the same source through the shadcn CLI.

React

import { EnvironmentVariables } from "@noorddev/vlak-react";

<EnvironmentVariables variables={[{ name: "MODEL_NAME", value: "workspace-model", required: true }, { name: "EXAMPLE_TOKEN", value: "example-only" }]} />

See the integration example to compose these components with your application's model and data.

Props

EnvironmentVariables

Masked values with deliberate reveal and exact-value/export copy actions.

PropTypeDefaultDescription
variablesrequiredEnvironmentVariable[]
titleReactNode"Environment variables"
showValuesboolean
defaultShowValuesbooleanfalse
onShowValuesChange(show: boolean) => void
onCopy(value: string) => void | Promise<void>

Also accepts Omit<HTMLAttributes<HTMLElement>, "onCopy" | "title">.

The ref reaches HTMLElement.

formatEnvironmentExports (function)

POSIX shell-safe assignments. Invalid names are rejected rather than emitted as executable shell text.

Keyboard

KeysDoes
TabTab reaches show-all, per-row reveal and copy controls.
Enter, SpaceEnter or Space activates a focused control; the show-all button exposes its pressed state.

Accessibility

  • The section and every reveal/copy control have descriptive names.
  • Hidden values are absent from rendered text and labelled as hidden; values are never placed in title or data attributes.
  • Clipboard success follows the resolved write, failures remain actionable, and pending writes cannot report success for changed data.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<section class="rs-environment-variables" aria-labelledby="environment-title"><header class="rs-environment-variables-header"><span class="rs-environment-variables-title" id="environment-title">Environment variables</span></header><dl class="rs-environment-variables-list"><div class="rs-environment-variables-row"><dt class="rs-environment-variables-name"><code>MODEL_NAME</code></dt><dd class="rs-environment-variables-value"><span role="img" aria-label="Value hidden">••••••••</span></dd></div></dl></section>

Classes

.rs-environment-variables.rs-environment-variables-header.rs-environment-variables-title.rs-environment-variables-list.rs-environment-variables-row.rs-environment-variables-name.rs-environment-variables-value.rs-environment-variables-controls.rs-environment-variables-note.rs-environment-variables-footer

Depends on

ButtonSnippet

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas