AI Elements is moving to shadcn/ui. This project will be deprecated at the end of November 2026. Learn more

Environment Variables

Display environment variables with masking and copy functionality.

The EnvironmentVariables component displays environment variables with value masking, visibility toggle, and copy functionality.

Environment Variables

DATABASE_URLRequired
••••••••••••••••••••
API_KEYRequired
•••••••••••••••••••
NODE_ENV
••••••••••
PORT
••••

Installation

npx ai-elements@latest add environment-variables

Features

  • Value masking by default
  • Toggle visibility switch
  • Copy individual values
  • Export format support (export KEY="value")
  • Required badge indicator

Props

<EnvironmentVariables />

Prop

Type

<EnvironmentVariablesHeader />

Prop

Type

<EnvironmentVariablesTitle />

Prop

Type

<EnvironmentVariablesToggle />

Prop

Type

<EnvironmentVariablesContent />

Prop

Type

<EnvironmentVariable />

Prop

Type

<EnvironmentVariableGroup />

Prop

Type

<EnvironmentVariableName />

Prop

Type

<EnvironmentVariableValue />

Prop

Type

<EnvironmentVariableCopyButton />

Prop

Type

<EnvironmentVariableRequired />

Prop

Type