Environment Variables for React Aria

A card lists the variables a project needs, one row each: the name, a Required badge where the app won't start without it, and the value as a row of dots until the Switch in the header shows them all.

Use it where an agent hands over configuration: the keys a setup step created, the variables a deploy is missing, what a sandbox ran with. Each row's copy button copies the value even while it's hidden, or the name, or an export line for a shell. The mask is for the screen, not for security: the values are in the page, so don't send a secret the reader shouldn't have. For a whole .env file, use a Code Block.

Installation

Anatomy

EnvironmentVariables
├── EnvironmentVariablesHeader
│   ├── EnvironmentVariablesTitle
│   └── EnvironmentVariablesToggle
└── EnvironmentVariablesContent
    └── EnvironmentVariable (one per variable)
        ├── EnvironmentVariableGroup
        │   ├── EnvironmentVariableName
        │   └── EnvironmentVariableRequired
        └── EnvironmentVariableGroup
            ├── EnvironmentVariableValue
            └── EnvironmentVariableCopyButton

Usage

import {
  EnvironmentVariable, EnvironmentVariableCopyButton,
  EnvironmentVariableGroup, EnvironmentVariableName,
  EnvironmentVariableRequired, EnvironmentVariables,
  EnvironmentVariablesContent, EnvironmentVariablesHeader,
  EnvironmentVariablesTitle, EnvironmentVariablesToggle,
  EnvironmentVariableValue,
} from "@/components/ui/environment-variables";

<EnvironmentVariables>
  <EnvironmentVariablesHeader>
    <EnvironmentVariablesTitle />
    <EnvironmentVariablesToggle />
  </EnvironmentVariablesHeader>
  <EnvironmentVariablesContent>
    <EnvironmentVariable name="OPENAI_API_KEY" value="sk-proj-abc123xyz789">
      <EnvironmentVariableGroup className="shrink-0">
        <EnvironmentVariableName />
        <EnvironmentVariableRequired />
      </EnvironmentVariableGroup>
      <EnvironmentVariableGroup>
        <EnvironmentVariableValue />
        <EnvironmentVariableCopyButton />
      </EnvironmentVariableGroup>
    </EnvironmentVariable>
  </EnvironmentVariablesContent>
</EnvironmentVariables>

Demos

Copy format

Three rows, one per value of copyFormat: value copies the value, name the name, and export a line a shell runs, export REDIS_URL="redis://localhost:6379". The line under the card shows what went on the clipboard, set from onCopy. Use export where the reader pastes into a terminal and name where they paste into a host's settings form; a copy works while the value is masked, so nobody has to show a key to copy it.

Controlled

showValues and onShowValuesChange hold the toggle in the demo's state, which hides the live keys again five seconds after they're shown. Hold it yourself when something outside the card decides, a timer, a permission, a second card that should follow the first. Uncontrolled, defaultShowValues sets where it starts.

Default row

EnvironmentVariable with no children lays out its own row: the name, then the value. defaultShowValues starts these development values shown, since there's nothing in them to hide. Compose the row from EnvironmentVariableGroup as soon as it needs a badge or a copy button.

Migrating from AI SDK Elements

If you added Environment Variables from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/environment-variables.tsx. Run the command in the Installation section, then change the import from @/components/ai-elements/environment-variables to @/components/ui/environment-variables. Every part keeps its name and its props: showValues, defaultShowValues and onShowValuesChange on the root, name and value on a row, copyFormat, onCopy, onError and timeout on the copy button.

What changes is how they read. The title says "Environment variables" when you give it no words, a hidden value is "Hidden" to a screen reader instead of a run of bullets, and the copy button has a label that names the variable, "Copy the value of DATABASE_URL".

The copy button is a React Aria Button, so a handler of your own goes in onPress, not onClick, and the toggle passes its props to the Switch, which takes isDisabled.

FAQ

API Reference