Display environment variables with masking and copy functionality.

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

See scripts/environment-variables.tsx for this example.

npx ai-elements@latest add environment-variables

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

Prop	Type	Default	Description
showValues	boolean	-	Controlled visibility state.
defaultShowValues	boolean	false	Default visibility state.
onShowValuesChange	(show: boolean) => void	-	Callback when visibility changes.
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the header div.

Prop	Type	Default	Description
children	React.ReactNode	-	Custom title text.
...props	React.HTMLAttributes<HTMLHeadingElement>	-	Spread to the h3 element.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof Switch>	-	Spread to the Switch component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the content div.

Prop	Type	Default	Description
name	string	Required	Variable name.
value	string	Required	Variable value.
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the row div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the group div.

Prop	Type	Default	Description
children	React.ReactNode	-	Custom name content. Defaults to the name from context.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
children	React.ReactNode	-	Custom value content. Defaults to the masked/unmasked value from context.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
copyFormat	unknown	-	Format to copy.
onCopy	() => void	-	Callback after successful copy.
onError	(error: Error) => void	-	Callback if copying fails.
timeout	number	2000	Duration to show copied state (ms).
...props	React.ComponentProps<typeof Button>	-	Spread to the Button component.

Prop	Type	Default	Description
children	React.ReactNode	-	Custom badge text.
...props	React.ComponentProps<typeof Badge>	-	Spread to the Badge component.