13 files changed, 197 insertions, 13 deletions
diff --git a/src/packages/react/.gitignore b/src/packages/react/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/src/packages/react/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/src/packages/react/README.md b/src/packages/react/README.md
new file mode 100644
index 0000000..39a04eb
--- /dev/null
+++ b/src/packages/react/README.md
@@ -0,0 +1,26 @@
+# @locusts/react
+
+[![CI](https://github.com/locusts-r-us/locusts/actions/workflows/node.yml/badge.svg)](https://github.com/locusts-r-us/locusts/actions/workflows/node.yml)
+[![NPM Version](https://img.shields.io/npm/v/%40locusts%2Freact?logo=react)](https://www.npmjs.com/package/@locusts/react)
+
+## Description
+
+@locusts/react is a member of a [series of components](https://github.com/locusts-r-us/locusts) that allows you to introduce locusts into your website.
+
+Why would you want to do that? I don't know.
+
+## Installation
+
+```bash
+npm install -D @locusts/react
+```
+
+## Usage
+
+```tsx
+import { Locusts } from "@locusts/react";
+
+export default function App() {
+  return <Locusts />;
+}
+```
diff --git a/src/packages/react/eslint.config.mjs b/src/packages/react/eslint.config.mjs
new file mode 100644
index 0000000..f49f020
--- /dev/null
+++ b/src/packages/react/eslint.config.mjs
@@ -0,0 +1,33 @@
+import library from "@repo/eslint-config/eslint.library.config.js";
+
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [...library],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      react,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
+    },
+  },
+);
diff --git a/src/packages/react/package.json b/src/packages/react/package.json
new file mode 100644
index 0000000..3bab515
--- /dev/null
+++ b/src/packages/react/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@locusts/react",
+  "version": "0.0.0",
+  "description": "A React component that introduces locusts into your website.",
+  "author": "Matt Strapp <matt+locusts@mattstrapp.net> (https://mattstrapp.net)",
+  "bugs": "https://github.com/locusts-r-us/locusts/issues",
+  "license": "0BSD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/locusts-r-us/locusts.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/locusts.umd.cjs",
+  "module": "./dist/locusts.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/locusts.js",
+      "require": "./dist/locusts.umd.cjs"
+    }
+  },
+  "keywords": [
+    "react",
+    "component",
+    "why",
+    "joke"
+  ],
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --declaration --emitDeclarationOnly && publint",
+    "format": "prettier --write . && eslint --fix .",
+    "lint": "prettier --check . && eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "publint": "^0.2.0",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}
diff --git a/src/packages/react/src/components/Locusts.tsx b/src/packages/react/src/components/Locusts.tsx
new file mode 100644
index 0000000..37aff97
--- /dev/null
+++ b/src/packages/react/src/components/Locusts.tsx
@@ -0,0 +1,5 @@
+export const Locusts = () => {
+  return <></>;
+};
+
+export default Locusts;
diff --git a/src/packages/react/src/index.ts b/src/packages/react/src/index.ts
new file mode 100644
index 0000000..10e55c7
--- /dev/null
+++ b/src/packages/react/src/index.ts
@@ -0,0 +1,3 @@
+import Locusts from "./components/Locusts";
+
+export { Locusts };
diff --git a/src/packages/react/src/vite-env.d.ts b/src/packages/react/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/packages/react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/packages/react/tsconfig.json b/src/packages/react/tsconfig.json
new file mode 100644
index 0000000..4928d20
--- /dev/null
+++ b/src/packages/react/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "@repo/typescript-config/base.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "outDir": "dist",
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src"]
+}
diff --git a/src/packages/react/vite.config.ts b/src/packages/react/vite.config.ts
new file mode 100644
index 0000000..d43457e
--- /dev/null
+++ b/src/packages/react/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: "Locusts",
+      fileName: "locusts",
+    },
+    rollupOptions: {
+      external: ["react"],
+      output: {
+        globals: {
+          react: "React",
+        },
+      },
+    },
+  },
+});
diff --git a/src/packages/vue/README.md b/src/packages/vue/README.md
index bd675a1..4d41eb3 100644
--- a/src/packages/vue/README.md
+++ b/src/packages/vue/README.md
@@ -12,7 +12,7 @@ Why would you want to do that? I don't know.
 ## Installation
 
 ```bash
-npm install @locusts/vue
+npm install -D @locusts/vue
 ```
 
 ## Usage
diff --git a/src/packages/vue/eslint.config.mjs b/src/packages/vue/eslint.config.mjs
index 439d403..eb0d6d0 100644
--- a/src/packages/vue/eslint.config.mjs
+++ b/src/packages/vue/eslint.config.mjs
@@ -1,10 +1,10 @@
 import library from "@repo/eslint-config/eslint.library.config.js";
-import pluginVue from "eslint-plugin-vue";
+import vue from "eslint-plugin-vue";
 
 /** @type {import("eslint").Linter.Config[]} */
 export default [
   ...library,
-  ...pluginVue.configs["flat/recommended"],
+  ...vue.configs["flat/recommended"],
   {
     ignores: ["dist/"],
   },
diff --git a/src/packages/vue/package.json b/src/packages/vue/package.json
index 41a56c6..4932a01 100644
--- a/src/packages/vue/package.json
+++ b/src/packages/vue/package.json
@@ -28,8 +28,8 @@
     "dev": "vite dev",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && publint",
     "check": "vue-tsc --noEmit",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint --fix .",
+    "format": "prettier --write . && eslint --fix .",
+    "lint": "prettier --check . && eslint .",
     "preview": "vite preview"
   },
   "keywords": [
@@ -40,7 +40,7 @@
     "joke"
   ],
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": ">=3.0.0"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
diff --git a/src/packages/vue/tsconfig.json b/src/packages/vue/tsconfig.json
index b8e300a..23ddef4 100644
--- a/src/packages/vue/tsconfig.json
+++ b/src/packages/vue/tsconfig.json
@@ -9,11 +9,6 @@
     "moduleResolution": "Bundler",
     "useDefineForClassFields": true
   },
-  "exclude": [
-    "node_modules",
-    "dist",
-    "src/main.ts",
-    "src/components/Locusts.vue"
-  ],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "exclude": ["node_modules", "dist"],
+  "include": ["src"]
 }