Environment variablesPro

• Masked values with reveal
• Per-environment scope
• Paste a .env file
• Unsaved-changes state

• Project settings in hosting or developer products.

• App preferences.

Import it from @/components/blocks/env-variables after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { EnvVariables } from "@/components/blocks/env-variables";

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

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

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

• Rows stack below 768px.

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

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