diff --git a/README.md b/README.md
index c9b489c..456ae2e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# vue-simple-lightbox
+# vue-wrapping-lightbox
 
 Very basic lightbox that is Vue3 ready with little to no funcitonality.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1db5d78..b6bdd86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-simple-lightbox",
-  "version": "0.0.0",
+  "name": "vue-wrapping-lightbox",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -171,6 +171,35 @@
         "fastq": "^1.6.0"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.3.1.tgz",
+      "integrity": "sha512-84rExe3ICUBXzqNX48WZV2Jp3OddjTMX97O2Py6D1KJaGSwWp0mDHXj+bCGNJqWHIEKDIT2U0sDjhP4czKi6cA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "resolve": "^1.17.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        }
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz",
@@ -219,6 +248,12 @@
         "@types/chai": "*"
       }
     },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
     "@types/jsdom": {
       "version": "16.2.14",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -2213,6 +2248,12 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "hash-sum": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true
+    },
     "html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -3280,6 +3321,40 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rollup-plugin-peer-deps-external": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz",
+      "integrity": "sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==",
+      "dev": true
+    },
+    "rollup-plugin-vue": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0.tgz",
+      "integrity": "sha512-oVvUd84d5u73M2HYM3XsMDLtZRIA/tw2U0dmHlXU2UWP5JARYHzh/U9vcxaN/x/9MrepY7VH3pHFeOhrWpxs/Q==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "hash-sum": "^2.0.0",
+        "rollup-pluginutils": "^2.8.2"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 35f2ab8..b0a6023 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-simple-lightbox",
-  "version": "0.0.1",
+  "name": "vue-wrapping-lightbox",
+  "version": "0.0.2",
   "author": "Elke Heymans",
   "scripts": {
     "dev": "vite",
@@ -14,17 +14,32 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ElkeCodes/vue-simple-lightbox.git"
+    "url": "https://github.com/ElkeCodes/vue-wrapping-lightbox.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "lightbox"
+  ],
+  "files": ["dist"],
+  "main": "./dist/vue-wrapping-lightbox.umd.js",
+  "module": "./dist/vue-wrapping-lightbox.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-wrapping-lightbox.es.js",
+      "require": "./dist/vue-wrapping-lightbox.umd.js"
+    }
   },
-  "keywords": ["vue", "vue3", "lightbox"],
   "dependencies": {
     "vue": "^3.2.31"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.1",
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.25",
     "@vitejs/plugin-vue": "^2.2.2",
+    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
@@ -35,6 +50,9 @@
     "eslint-plugin-vue": "^8.2.0",
     "jsdom": "^19.0.0",
     "prettier": "^2.5.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-vue": "^6.0.0",
     "start-server-and-test": "^1.14.0",
     "typescript": "~4.5.5",
     "vite": "^2.8.4",
@@ -42,3 +60,4 @@
     "vue-tsc": "^0.31.4"
   }
 }
+
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcf..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/src/App.vue b/src/App.vue
index c35fec2..1c27391 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <template>
   <button @click="active = !active">Toggle lightbox</button>
-  <vue-simple-lightbox ref="lightbox">
+  <vue-wrapping-lightbox ref="lightbox">
     <img src="https://randomfox.ca/images/57.jpg" alt="" />
     <img src="https://randomfox.ca/images/117.jpg" alt="" />
     <img src="https://randomfox.ca/images/40.jpg" alt="" />
-  </vue-simple-lightbox>
+  </vue-wrapping-lightbox>
   <div class="images">
     <img
       src="https://randomfox.ca/images/57.jpg"
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import VueSimpleLightbox from "./VueSimpleLightbox.vue";
+import VueWrappingLightbox from "./VueWrappingLightbox.vue";
 
 const active = ref(false);
 </script>
diff --git a/src/VueSimpleLightbox.vue b/src/VueWrappingLightbox.vue
similarity index 95%
rename from src/VueSimpleLightbox.vue
rename to src/VueWrappingLightbox.vue
index c3e6004..3eb518f 100644
--- a/src/VueSimpleLightbox.vue
+++ b/src/VueWrappingLightbox.vue
@@ -1,16 +1,9 @@
 <template>
-  <vue-simple-lightbox />
+  <vue-wrapping-lightbox />
 </template>
 
 <script setup lang="ts">
-import {
-  defineComponent,
-  h,
-  useSlots,
-  withDefaults,
-  ref,
-  Transition,
-} from "vue";
+import { defineComponent, h, useSlots, withDefaults, ref } from "vue";
 import NextArrow from "./components/NextArrow.vue";
 import PreviousArrow from "./components/PreviousArrow.vue";
 import Close from "./components/Close.vue";
@@ -47,7 +40,7 @@ const openImage = (index: number): void => {
   activeIndex.value = index;
 };
 
-const VueSimpleLightbox = defineComponent({
+const VueWrappingLightbox = defineComponent({
   render() {
     if (!slots.default) {
       return undefined;
diff --git a/src/export.js b/src/export.js
new file mode 100644
index 0000000..fd28465
--- /dev/null
+++ b/src/export.js
@@ -0,0 +1,3 @@
+import VueWrappingLightBox from "./VueWrappingLightbox.vue";
+
+export { VueWrappingLightBox };
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..39b7e7a
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,14 @@
+import components from "./export";
+
+const plugin = {
+  install(Vue) {
+    for (const prop in components) {
+      if (components.hasOwnProperty(prop)) {
+        const component = components[prop];
+        Vue.component(component.name, component);
+      }
+    }
+  },
+};
+
+export default plugin;
diff --git a/vite.config.ts b/vite.config.ts
index 5d02fc2..2a5e46b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from "url";
+import path from "path";
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
@@ -11,4 +12,19 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/export.js"),
+      name: "VueWrappingLightbox",
+      fileName: (format) => `vue-wrapping-lightbox.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
 });