A side-by-side comparison of two sets of environment variables (e.g. staging vs production) that masks secret values by default and distinguishes a variable missing from one side from one that merely differs.
import { EnvDiff, type EnvEntry } from "@/components/ui/env-diff";
const staging: EnvEntry[] = [
{
key: "DATABASE_URL",
value: "postgres://app@db.staging:5432/app",
secret: true,
},
{ key: "LOG_LEVEL", value: "debug" },
{ key: "NODE_ENV", value: "production" },
{ key: "REDIS_URL", value: "redis://cache.staging:6379" },
{ key: "SESSION_SECRET", value: "k3y-material-staging", secret: true },
{ key: "FEATURE_NEW_CHECKOUT", value: "true" },
];
const production: EnvEntry[] = [
{
key: "DATABASE_URL",
value: "postgres://app@db.prod:5432/app",
secret: true,
},
{ key: "LOG_LEVEL", value: "info" },
{ key: "NODE_ENV", value: "production" },
{ key: "REDIS_URL", value: "redis://cache.prod:6379" },
{ key: "SESSION_SECRET", value: "k3y-material-prod\n", secret: true },
{ key: "SENTRY_DSN", value: "https://abc@sentry.io/42" },
];
export default function EnvDiffDemo() {
return (
<div className="w-full max-w-3xl">
<EnvDiff
left={staging}
right={production}
leftLabel="Staging"
rightLabel="Production"
/>
</div>
);
}