# Environment variables

An environment variables and secrets manager with masked values, per-environment scope toggles, .env paste import with duplicate and invalid key warnings, write-only sensitive values, an environment diff by fingerprint, and a redeploy banner.

- ID: `env-variables`
- Import: `animui/env-variables`
- Category: block
- Runtime exports: `EnvVariables`
- Declaration: `types/pro/env-variables.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: api-keys, security-settings

```tsx
import { EnvVariables } from 'animui/env-variables';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info env-variables` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface EnvVariablesProps {
  variables?: string | number | boolean | ReactNode;
  project?: string | number | boolean | ReactNode;
  sampleDotenv?: string | number | boolean | ReactNode;
  title?: string;
  onChange?: () => void;
  onRedeploy?: () => void;
  className?: string;
}

export declare const EnvVariables: ComponentType<EnvVariablesProps>;

export default EnvVariables;
```