diff --git a/with-vanilla-extract/.gitignore b/with-vanilla-extract/.gitignore
new file mode 100644
index 00000000..de20bbe5
--- /dev/null
+++ b/with-vanilla-extract/.gitignore
@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.plasmo
diff --git a/with-vanilla-extract/.prettierrc.mjs b/with-vanilla-extract/.prettierrc.mjs
new file mode 100644
index 00000000..77f84c21
--- /dev/null
+++ b/with-vanilla-extract/.prettierrc.mjs
@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}
diff --git a/with-vanilla-extract/README.md b/with-vanilla-extract/README.md
new file mode 100644
index 00000000..ca9c259f
--- /dev/null
+++ b/with-vanilla-extract/README.md
@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
diff --git a/with-vanilla-extract/assets/icon.png b/with-vanilla-extract/assets/icon.png
new file mode 100644
index 00000000..cfd931be
Binary files /dev/null and b/with-vanilla-extract/assets/icon.png differ
diff --git a/with-vanilla-extract/package.json b/with-vanilla-extract/package.json
new file mode 100644
index 00000000..817f733c
--- /dev/null
+++ b/with-vanilla-extract/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "with-vanilla-extract",
+  "displayName": "With vanilla-extract",
+  "version": "0.0.1",
+  "description": "A Plasmo extension demonstrating vanilla-extract for type-safe CSS-in-TypeScript.",
+  "author": "Plasmo Corp. <foss@plasmo.com>",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.4",
+    "plasmo": "workspace:*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@types/chrome": "0.0.258",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "prettier": "3.2.4",
+    "typescript": "5.3.3"
+  },
+  "manifest": {
+    "host_permissions": ["https://*/*"]
+  }
+}
diff --git a/with-vanilla-extract/src/popup.tsx b/with-vanilla-extract/src/popup.tsx
new file mode 100644
index 00000000..2bf5da05
--- /dev/null
+++ b/with-vanilla-extract/src/popup.tsx
@@ -0,0 +1,21 @@
+import { useState } from "react"
+
+import * as styles from "./styles.css"
+
+function IndexPopup() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>vanilla-extract Example</h1>
+      <div className={styles.counter}>{count}</div>
+      <button
+        className={styles.button}
+        onClick={() => setCount((prev) => prev + 1)}>
+        Click me!
+      </button>
+    </div>
+  )
+}
+
+export default IndexPopup
diff --git a/with-vanilla-extract/src/styles.css.ts b/with-vanilla-extract/src/styles.css.ts
new file mode 100644
index 00000000..bd850db8
--- /dev/null
+++ b/with-vanilla-extract/src/styles.css.ts
@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css"
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "20px",
+  minHeight: "200px",
+  minWidth: "300px",
+  backgroundColor: "#f5f5f5",
+  borderRadius: "8px",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+})
+
+export const title = style({
+  fontSize: "24px",
+  fontWeight: "bold",
+  color: "#333",
+  marginBottom: "16px"
+})
+
+export const counter = style({
+  fontSize: "32px",
+  fontWeight: "bold",
+  color: "#0070f3",
+  margin: "16px 0"
+})
+
+export const button = style({
+  padding: "12px 24px",
+  fontSize: "16px",
+  fontWeight: "500",
+  color: "white",
+  backgroundColor: "#0070f3",
+  border: "none",
+  borderRadius: "6px",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  ":hover": {
+    backgroundColor: "#0051cc",
+    transform: "translateY(-1px)",
+    boxShadow: "0 4px 12px rgba(0, 112, 243, 0.3)"
+  },
+  ":active": {
+    transform: "translateY(0)",
+    boxShadow: "0 2px 8px rgba(0, 112, 243, 0.2)"
+  }
+})
diff --git a/with-vanilla-extract/tsconfig.json b/with-vanilla-extract/tsconfig.json
new file mode 100644
index 00000000..d3ad826f
--- /dev/null
+++ b/with-vanilla-extract/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./*"]
+    },
+    "baseUrl": "."
+  }
+}