Environment variablesPro
An environment variables and secrets manager with masked values, per-environment scope toggles, .env paste import with duplicate and invalid key warnings, write-only sensitive values, an environment diff by fingerprint, and a redeploy banner.
Live block · sample data
- A settings screen where developers manage configuration and secrets across development, preview, and production.
- Onboarding a project by pasting an existing .env file and scoping it to environments in one step.
- Auditing drift between environments before a release, such as a key set in Preview but missing in Production.
- Use api-keys for creating, scoping, and revoking access tokens that your product issues to its users.
- Use feature-flags for runtime toggles with rollout percentages and targeting rules.
- Use a plain form for a handful of fixed settings that are not per environment.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Render <EnvVariables /> for the demo, or pass variables, project and sampleDotenv with onChange to persist rows and onRedeploy (which can return a promise) to run a real deploy.
example.tsx
import { EnvVariables } from "@/components/arc/blocks/env-variables/env-variables"; export function ProjectEnvironment({ project, variables }) { return ( <EnvVariables project={project.slug} variables={variables} sampleDotenv="" onChange={rows => saveVariables(project.id, rows)} onRedeploy={environments => triggerRedeploy(project.id, environments)} /> );}EnvVariables
An environment variables and secrets manager. Each row is one value and the environments it applies to, drawn as a matrix of Development, Preview, and Production toggles, so a key can hold a different value per environment. Values stay masked and are not in the DOM until revealed; sensitive values are write-only. Add one variable or paste a whole .env file, compare two environments by fingerprint, and redeploy from a banner that appears after changes.
PropTypeDefaultDescription
variablesEnvVariable[]VARIABLESRows in any order: { id, key, value, environments, sensitive, updated, updatedBy }. A key can appear on several rows as long as each environment is covered at most once. The block sorts rows by key.projectstring"northwind-storefront"Project name shown under the heading.sampleDotenvstringSAMPLE_DOTENVText the paste area starts with when Import .env opens. Pass an empty string for a blank paste area.titlestring"Environment variables"Heading text.onChange(variables: EnvVariable[]) => void–Called with every row after each add, import, edit, removal, scope toggle, or copy between environments.onRedeploy(environments: EnvName[]) => void | Promise<void>–Called when Redeploy is pressed with the environments that changed. Return a promise to keep the banner pending until it settles; a rejection shows the failure state and keeps the changes queued. Without it, the deploy is simulated.classNamestring–Class on the root section.- Tab
- Moves through the header actions, search, view switch, and each row's reveal, copy, environment toggles, and edit button.
- EnterorSpace
- Reveals or hides a value, turns an environment on or off for a row, opens the inline editor, or presses a button.
- Escape
- Closes the inline editor or the add panel and returns focus to the button that opened it.
- Arrow keys
- Move between options in the view switch, the add mode switch, and the compare environment selects.
- Enter in a form
- Saves the edited value, saves a new variable, or imports the parsed .env lines.
- Masked values render as bullets hidden from assistive technology plus a visually hidden "Hidden value" or "Sensitive value, write-only" label; the real value is only rendered after Reveal.
- Reveal and environment toggles are buttons with aria-pressed and names that include the key, such as "Production for DATABASE_URL".
- Each row's toggles sit in a labelled group; the wide matrix column heads are decorative and every toggle carries its own name.
- Inline errors (invalid key, key already set in an environment, empty value) are tied to their fields; scope conflicts appear as an alert under the row.
- A polite live region announces every change, import, removal, and redeploy result, and the .env parse summary updates live as you type.
- Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring. Keyboard position shows as a fill on toggles and icon buttons, matching hover.
- The redeploy banner, add panel, inline editor, and conflict notes open with height and opacity on the smooth spring and close with a quicker exit ease.
- Environment toggles fill with a snappy scale and draw their check with pathLength, both without overshoot.
- Revealing a value crossfades the mask and the value with a short rise in a fixed height slot, so the row never jumps.
- Added and removed rows grow and collapse their height so the list closes its gap; saved or imported rows glow once in the accent and fade.
- The Variables and Compare views crossfade with a small rise. Reduced motion removes all travel and lands every change at once.
- From a 760px container, rows become a matrix: key, value, one toggle column per environment with a count of values set, and an edit action.
- Below that, each row stacks the key and edit action, then the value, then three labelled environment pills in an even grid.
- Below 560px header actions, search, form actions, and the redeploy button go full width; the .env preview drops the masked value column.
- Toggles, icon buttons, and the swap control grow to 44px targets on touch screens. The block is a container query, so it adapts to the space it is placed in.
- The .env text is parsed in a memo keyed on the text, rows, and chosen environments; there is no per-frame work.
- Only revealed rows render their value and copy button, and only the open row renders an editor.
- Timers for notes, the saved glow, and the redeploy confirmation are cleared on change and unmount.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for a project settings page in a hosting, deployment, or backend platform. Wire onChange to your store and onRedeploy to your deploy API.
- Search matches key names only, never values. Compare shows a six character fingerprint of each value, so two environments can be checked without exposing either.
- Sensitive rows are write-only: the editor starts empty and saving replaces the value; the flag cannot be turned off without removing and re-adding the variable.
- The .env parser handles comments, blank lines, export prefixes, quotes, and inline comments. Later duplicates win the key and earlier ones are skipped; keys that start with a number or contain other characters are rejected.
The full library index for assistants is at /llms.txt.