diff --git a/.example.env b/.example.env
new file mode 100644
index 000000000..7507c2083
--- /dev/null
+++ b/.example.env
@@ -0,0 +1 @@
+VITE_EXAMPLE=example
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index fe02b93af..cf4d487bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@
 **/dist-zip
 
 # env
-**/.env.local
+**/.env.*
 **/.env
 
 # etc
diff --git a/README.md b/README.md
index ca2b5c7e1..9caba805e 100755
--- a/README.md
+++ b/README.md
@@ -98,6 +98,21 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 
 ### <i>Remember in firefox you add plugin in temporary mode, that's mean it's disappear after close browser, you must do it again, on next launch.</i>
 
+## Env Variables
+
+1. Copy `.example.env` and past it as `.env` in the same path
+2. Add a new record inside `.env`
+3. Add this key with type for value to `vite-end.d.ts` (root) to `ImportMetaEnv`
+4. Then you can use it with `import.meta.env.{YOUR_KEY}` like with standard [Vite Env](https://vitejs.dev/guide/env-and-mode)
+
+#### If you want to set it for each package independently:
+
+1. Create `.env` inside that package
+2. Open related `vite.config.mts` and add `envDir: '.'` at the end of this config
+3. Rest steps like above
+
+#### Remember you can't use global and local at the same time for the same package(It will be overwritten)
+
 ## Structure <a name="structure"></a>
 
 ### ChromeExtension <a name="chrome-extension"></a>
diff --git a/chrome-extension/vite.config.mts b/chrome-extension/vite.config.mts
index aeaa19a5e..7ce55364e 100644
--- a/chrome-extension/vite.config.mts
+++ b/chrome-extension/vite.config.mts
@@ -43,4 +43,5 @@ export default defineConfig({
       external: ['chrome'],
     },
   },
+  envDir: '../',
 });
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
index 39ba59a9f..200f8cc85 100644
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@@ -16,6 +16,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
+    "module": "esnext",
     "noImplicitReturns": true,
     "jsx": "react-jsx",
     "lib": [
diff --git a/packages/vite-config/lib/withPageConfig.mjs b/packages/vite-config/lib/withPageConfig.mjs
index f43d4615a..bf91e3d23 100644
--- a/packages/vite-config/lib/withPageConfig.mjs
+++ b/packages/vite-config/lib/withPageConfig.mjs
@@ -37,6 +37,7 @@ export function withPageConfig(config) {
         define: {
           'process.env.NODE_ENV': isDev ? `"development"` : `"production"`,
         },
+        envDir: '../..'
       },
       config,
     ),
diff --git a/pages/content-runtime/tsconfig.json b/pages/content-runtime/tsconfig.json
index a1fd4786f..502711b31 100644
--- a/pages/content-runtime/tsconfig.json
+++ b/pages/content-runtime/tsconfig.json
@@ -5,7 +5,7 @@
     "paths": {
       "@lib/*": ["lib/*"]
     },
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["lib"]
 }
diff --git a/pages/content-ui/src/index.tsx b/pages/content-ui/src/index.tsx
index 2f3277e4d..74ad4ccbc 100644
--- a/pages/content-ui/src/index.tsx
+++ b/pages/content-ui/src/index.tsx
@@ -1,6 +1,5 @@
 import { createRoot } from 'react-dom/client';
 import App from '@src/app';
-// @ts-expect-error That's because output file is create during build
 import tailwindcssOutput from '../dist/tailwind-output.css?inline';
 
 const root = document.createElement('div');
diff --git a/pages/content-ui/tsconfig.json b/pages/content-ui/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/content-ui/tsconfig.json
+++ b/pages/content-ui/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/content/tsconfig.json b/pages/content/tsconfig.json
index a1fd4786f..502711b31 100644
--- a/pages/content/tsconfig.json
+++ b/pages/content/tsconfig.json
@@ -5,7 +5,7 @@
     "paths": {
       "@lib/*": ["lib/*"]
     },
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["lib"]
 }
diff --git a/pages/devtools-panel/tsconfig.json b/pages/devtools-panel/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/devtools-panel/tsconfig.json
+++ b/pages/devtools-panel/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/devtools/tsconfig.json b/pages/devtools/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/devtools/tsconfig.json
+++ b/pages/devtools/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/new-tab/tsconfig.json b/pages/new-tab/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/new-tab/tsconfig.json
+++ b/pages/new-tab/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/options/tsconfig.json b/pages/options/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/options/tsconfig.json
+++ b/pages/options/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/popup/tsconfig.json b/pages/popup/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/popup/tsconfig.json
+++ b/pages/popup/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/pages/side-panel/tsconfig.json b/pages/side-panel/tsconfig.json
index c93db5fd5..b3701c97b 100644
--- a/pages/side-panel/tsconfig.json
+++ b/pages/side-panel/tsconfig.json
@@ -6,7 +6,7 @@
       "@src/*": ["src/*"]
     },
     "jsx": "react-jsx",
-    "types": ["chrome"]
+    "types": ["chrome", "../../vite-env.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 000000000..1a43b1bd0
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_EXAMPLE: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}