Environment variablesPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/env-variables

• Markdown: https://ui.xzero.co.uk/components/blocks/env-variables/markdown

• Access: Xzero Pro

• Registry id: env-variables

• Source file: registry/blocks/env-variables/env-variables.tsx

• Built from: Button, Checkbox, Copy button, Input, Search field, Segmented control, Select, Switch, Textarea

• Keywords: environment variables, env, dotenv, .env, secrets, config, configuration, vercel, netlify, deploy, redeploy, preview, production, development, sensitive, masked, diff, compare environments, developer settings

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.

When to use

• 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.

When not to use

• Use api-keys for creating, scoping, and revoking access tokens that your product issues to its users.
• Use a plain form for a handful of fixed settings that are not per environment.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/env-variables

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { EnvVariables } from "@/components/xzero/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)}
    />
  );
}

API reference

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.

Prop	Type	Default	Description
variables	EnvVariable[]	VARIABLES	Rows 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.
project	string	"northwind-storefront"	Project name shown under the heading.
sampleDotenv	string	SAMPLE_DOTENV	Text the paste area starts with when Import .env opens. Pass an empty string for a blank paste area.
title	string	"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.
className	string	–	Class on the root section.

Keyboard interactions

Keys	Action
Tab	Moves through the header actions, search, view switch, and each row's reveal, copy, environment toggles, and edit button.
Enter / Space	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.

Accessibility

• 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 Xzero's shared focus ring. Keyboard position shows as a fill on toggles and icon buttons, matching hover.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• API keys: API key management where Create key unfolds into its form and each secret is shown once.
• Security settings: An account security page with guided two-factor setup, password change and active sessions.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt