## Env Editor (S—231)

Environment variables as editable rows: values masked until revealed, paste a .env to import, duplicates flagged.

- URL: https://sundaeui.dev/components/env-editor
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/env-editor.json`
- Tags: settings, env, config, environment-variables, developer, secrets

Each row is a key and a value; secret-looking values are masked with a reveal toggle. Keys are upper-cased and validated as you type.
Paste a whole .env file into the key field and it splits into rows. Duplicate keys and empty values are flagged before save.

### Usage

```tsx
import { EnvEditor } from '@/components/sundae/env-editor'

<EnvEditor />
```

### Props

- `defaultVars` (`{ key: string; value: string }[]`): Starting rows.
- `onSave` (`(vars) => void`): Save callback.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Deploy settings, CI secrets, app configuration.

### When not to use

- Large secret stores with versions: use a vault UI.

### Accessibility

- Inputs are labelled per row; reveal buttons say which key they reveal.
- Validation errors are announced and tied to their inputs.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Paste a .env: Import many rows at once
- Enter on last row: Add a row