Environment Variables

Component

About

A card-style list for displaying environment variable names and values with masking, a show/hide toggle, and per-row copy-to-clipboard buttons.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Environment Variables to your project and fits it to your theme.

Code

How Environment Variables is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const variables = [
  {
    name: "DATABASE_URL",
    value: "postgres://user:pass@localhost:5432/db",
    required: true,
  },
  {
    name: "OPENAI_API_KEY",
    value: "sk-1234567890abcdef1234567890abcdef",
    required: true,
  },
  { name: "NODE_ENV", value: "production", required: false },
];

export default function EnvironmentVariablesDemo() {
  return (
    <div className="w-full max-w-md">
      <EnvironmentVariables>
        <EnvironmentVariablesHeader>
          <EnvironmentVariablesTitle />
          <EnvironmentVariablesToggle />
        </EnvironmentVariablesHeader>
        <EnvironmentVariablesContent>
          {variables.map((variable) => (
            <EnvironmentVariable
              key={variable.name}
              name={variable.name}
              value={variable.value}
            >
              <EnvironmentVariableGroup>
                <EnvironmentVariableName />
                {variable.required && <EnvironmentVariableRequired />}
              </EnvironmentVariableGroup>
              <EnvironmentVariableGroup>
                <EnvironmentVariableValue />
                <EnvironmentVariableCopyButton />
              </EnvironmentVariableGroup>
            </EnvironmentVariable>
          ))}
        </EnvironmentVariablesContent>
      </EnvironmentVariables>
    </div>
  );
}