# Environment variables

> Project env vars with masking, scopes, .env paste, dirty state and save.

Block · Pro · https://lodeui.com/blocks/env-variables

## When to use

- Project settings in hosting or developer products.

## When not to use

- App preferences.

## Installation

```bash
npx shadcn@latest add @lode/env-variables
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { EnvVariables } from "@/components/blocks/env-variables";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <EnvVariables />
    </main>
  );
}
```

Built from: Action button, Environment editor

## API reference

### EnvVariables

Environment variables for a project with masked values, scopes, .env paste and an unsaved-changes bar. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields |
| ⌘V / Ctrl+V | Paste a .env file into a key field |

## Accessibility

- Every field is labelled; invalid keys are marked and explained.

## Motion

- Rows animate in and out; the save bar slides up when there are changes.

## Responsive behavior

- Rows stack below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Encrypt values at rest; the block only masks them in the UI.

## Related

- [Environment editor](https://lodeui.com/components/env-editor) — Masked env vars with per-environment scope, validation and .env paste.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.