Environment variables

Environment variables an agent needs or has set: masked values with reveal and copy, copy as .env, and a warning that says which required keys are missing and where to add them.

Markdown

On this page

Masked values with reveal and copy, and two missing required keys.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/environment-variables.json

Usage

tsx

import { EnvironmentVariables } from "@/components/ui/chatcn/environment-variables"

<EnvironmentVariables
  source=".env.local"
  variables={[
    { key: "DATABASE_URL", value: process.env.DATABASE_URL, required: true },
    { key: "STRIPE_WEBHOOK_SECRET", required: true, description: "From stripe listen" },
    { key: "NEXT_PUBLIC_SITE_URL", value: "http://localhost:3000" },
  ]}
/>

Values are masked with a fixed number of dots, so the mask never leaks a secret's length. Keys with a public prefix (NEXT_PUBLIC_, VITE_, PUBLIC_ and friends) show in the clear unless you set secret. peek shows the last four characters.

Examples

All set and empty

Everything set, public values and an empty list.

Props

Prop	Type	Notes
`variables`	`EnvironmentVariable[]`	`{ key, value?, required?, description?, secret? }`
`title`	`ReactNode`	Default Environment variables
`source`	`string`	Where values live. Used in the warning
`peek`	`boolean`	Show the last four characters of masked values
`revealed`, `defaultRevealed`, `onRevealedChange`	`boolean`	Reveal all
`warning`	`ReactNode`	Override the missing-keys warning. `null` hides it

Keyboard

Key	Action
`Tab`	Reveal all, copy as .env, then reveal and copy on each row
`Enter`, `Space`	Reveal, hide or copy

Accessibility

Reveal buttons name their key ("Reveal STRIPE_SECRET_KEY") and use aria-pressed. Masked values read as Hidden value.
The missing-keys warning is a role="alert" with a triangle and words, and each missing row says Missing.
Copy buttons announce Copied.

Motion

A clicked reveal swaps the value with a 150 ms blur crossfade. A keyboard reveal swaps instantly.