diff --git a/babel.config.js b/babel.config.js
index ba17966..9f3933c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', { "useBuiltIns": false }]
   ]
 }
diff --git a/package.json b/package.json
index b0bf051..87ef866 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,40 @@
 {
-  "name": "vlm",
-  "version": "0.1.0",
-  "private": true,
+  "name": "vue-last-modal",
+  "description": "Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue.js.",
+  "version": "1.0.0",
+  "main": "dist/last-modal.umd.min.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/greegus/vue-last-modal.git"
+  },
+  "keywords": [
+    "vue",
+    "modal",
+    "plugin",
+    "vuejs",
+    "dialog",
+    "stacking",
+    "promise",
+    "component",
+    "web"
+  ],
+  "author": "Matus Duchon",
+  "license": "MIT",
+  "homepage": "https://github.com/greegus/vue-last-modal#readme",
+  "bugs": {
+    "url": "https://github.com/greegus/vue-last-modal/issues"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build --target lib --name last-modal src/last-modal.js"
   },
   "dependencies": {
-    "vue": "^2.5.22"
+    "vue": "^2.5.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.1",
     "@vue/cli-service": "^3.0.1",
-    "vue-template-compiler": "^2.5.21"
+    "postcss-nested": "^4.1.1",
+    "vue-template-compiler": "^2.5.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 961986e..de25dfe 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    'autoprefixer': {},
+    'postcss-nested': {}
   }
 }
diff --git a/public/index.html b/public/index.html
index 818df17..cd4e624 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>vlm</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index fcc5662..9089328 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,91 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div class="container">
+    <div class="py-3 mt-3 mb-5 border-bottom">
+      <h1>Last Modal</h1>
+    </div>
+
+    <button class="btn btn-secondary" @click="open()">
+      Open
+    </button>
+
+    <button class="btn btn-secondary" @click="openPlain()">
+      Open plain
+    </button>
+
+    <button class="btn btn-secondary" @click="alert()">
+      Alert
+    </button>
+
+    <button class="btn btn-secondary" @click="confirm()">
+      Confirm
+    </button>
+
+    <button class="btn btn-secondary" @click="openScrollable()">
+      Open scrollable
+    </button>
+  </div>
+
+  <modal-stack />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+const MyModal = {
+  template: `
+    <modal-layout>
+      Hello there!
+    </modal-layout>
+  `
+}
 
 export default {
-  name: 'app',
-  components: {
-    HelloWorld
+  methods: {
+    open() {
+      this.$modal(MyModal)
+    },
+
+    alert() {
+      this.$alert({title: 'Alert!', message: 'Now panic and freak out!'})
+    },
+
+    confirm() {
+      this.$confirm('Do you want to confirm?')
+    },
+
+    openPlain() {
+      this.$modal({
+        template: `
+          <modal-layout plain width="auto" hide-closer>
+            Content with no paddings
+          </modal-layout>
+        `
+      })
+    },
+
+    openScrollable() {
+      this.$modal({
+        template: `
+          <modal-layout title="A modal with scrollable text" width="850" scroll closer>
+            <span v-for="i in Array.from({length: 30})" :key="i">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </span>
+          </modal-layout>
+        `
+      })
+    }
   }
-}
+};
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="postcss" scoped>
+  .btn + .btn {
+    margin-left: .5rem;
+  }
 </style>
+
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 7fd2dc5..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/dialog.vue b/src/components/dialog.vue
new file mode 100644
index 0000000..d552a49
--- /dev/null
+++ b/src/components/dialog.vue
@@ -0,0 +1,46 @@
+<template>
+    <modal-layout class="Dialog" width="480" :title="title" closer>
+        {{ message }}
+
+        <template slot="footer">
+            <div class="Dialog__buttons">
+                <span class="Dialog__buttonWrapper" v-for="(button, $index) in buttons" :key="$index">
+                    <button type="button" :class="button.className" @click="$emit('close', button.value)" >
+                        {{ button.label }}
+                    </button>
+                </span>
+            </div>
+        </template>
+    </modal-layout>
+</template>
+
+<script>
+export default {
+    props: {
+        title: String,
+        message: String,
+        buttons: Array,
+    },
+
+    mounted() {
+        const buttons = this.$el.querySelectorAll('button')
+
+        if (buttons.length) {
+            buttons[buttons.length - 1].focus()
+        }
+    }
+}
+</script>
+
+<style lang="postcss" scoped>
+.Dialog__buttons {
+  text-align: right;
+  margin-top: 1rem;
+}
+
+.Dialog__buttonWrapper + .Dialog__buttonWrapper {
+  margin-left: .5rem;
+}
+</style>
+
+
diff --git a/src/components/modal-layout.vue b/src/components/modal-layout.vue
new file mode 100644
index 0000000..f068db8
--- /dev/null
+++ b/src/components/modal-layout.vue
@@ -0,0 +1,184 @@
+<template>
+    <div class="ModalLayout" :class="{hasHeader, hasFooter, isScrollable, isPlain}" :style="computedStyle">
+      <div class="ModalLayout__close" @click="close()" v-if="!hideCloser">
+      </div>
+
+      <div class="ModalLayout__header" v-if="hasHeader">
+          <slot name="header">
+            <div class="ModalLayout__title">
+              {{ title }}
+            </div>
+          </slot>
+      </div>
+
+      <div class="ModalLayout__body">
+          <slot />
+      </div>
+
+      <div class="ModalLayout__footer" v-if="hasFooter">
+          <slot name="footer" />
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "modal-layout",
+
+  props: {
+    title: String,
+
+    hideCloser: Boolean,
+
+    scroll: Boolean,
+
+    plain: Boolean,
+
+    width: {
+      type: [Number, String],
+      default: 600
+    }
+  },
+
+  computed: {
+    isScrollable() {
+      return this.scroll;
+    },
+
+    isPlain() {
+      return this.plain;
+    },
+
+    hasHeader() {
+      return this.$slots.header || this.title;
+    },
+
+    hasFooter() {
+      return this.$slots.footer;
+    },
+
+    computedStyle() {
+      const maxWidth = this.width + (Number(this.width) ? "px" : "");
+
+      if (maxWidth && maxWidth !== "auto") {
+        return {
+          width: "100%",
+          maxWidth
+        };
+      }
+    }
+  },
+
+  methods: {
+    close() {
+      this.$root.$emit("lastModal.closeTop");
+    }
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+.ModalLayout {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: auto;
+  min-height: fit-content;
+
+  background: white;
+  border-radius: 4px;
+
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+  &.isScrollable {
+    min-height: auto;
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.ModalLayout__header {
+  padding: 1.25rem 4rem 1.25rem 1.5rem;
+
+  .ModalLayout.isPlain {
+    padding: 0;
+  }
+}
+
+.ModalLayout__title {
+  font-size: larger;
+}
+
+.ModalLayout__close {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4rem;
+  height: 4.3rem;
+
+  font-size: 1.85rem;
+  opacity: 0.4;
+
+  &::before {
+    content: "\00d7";
+
+    transform: translateY(-0.15rem);
+  }
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+}
+
+.ModalLayout__body {
+  flex: 0 0 auto;
+  padding: 1.5rem;
+  border-radius: 4px;
+}
+
+.ModalLayout.hasHeader .ModalLayout__body {
+  padding-top: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.ModalLayout.hasFooter .ModalLayout__body {
+  padding-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.ModalLayout.isScrollable .ModalLayout__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+.ModalLayout.isScrollable.hasHeader .ModalLayout__body {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ModalLayout.isScrollable.hasFooter .ModalLayout__body {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ModalLayout.isPlain .ModalLayout__body {
+  padding: 0;
+}
+
+.ModalLayout__footer {
+  flex: 0 0 auto;
+  padding: 1.25rem 1.5rem;
+}
+
+.ModalLayout.isPlain .ModalLayout__footer {
+  padding: 0;
+}
+</style>
diff --git a/src/components/modal-stack.vue b/src/components/modal-stack.vue
new file mode 100644
index 0000000..1215fb3
--- /dev/null
+++ b/src/components/modal-stack.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class="ModalStack">
+      <transition name="backdrop">
+        <div class="ModalStack__backdrop" v-if="modals.length"/>
+      </transition>
+
+      <transition-group name="modal">
+        <div v-for="modal in modals" class="ModalStack__modalWrapper" :key="modal.id" @click="closeByBackdropClick($event, modal)">
+          <component
+            class="ModalStack__modal"
+            v-bind="modal.props"
+            :is="modal.component"
+            :class="{isTop: topModal.id === modal.id}"
+            :ref="`modal_${modal.id}`"
+            @close="close(modal, $event)"
+          />
+        </div>
+      </transition-group>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "modal-stack",
+
+  data() {
+    return {
+      modals: []
+    }
+  },
+
+  computed: {
+    topModal() {
+      return this.modals.length ? this.modals[this.modals.length - 1] : null
+    }
+  },
+
+  methods: {
+    open(modal) {
+      document.activeElement && document.activeElement.blur()
+
+      this.modals.push(modal)
+    },
+
+    close(modal, result = undefined) {
+      if (!this.modals.find(({id}) => id === modal.id)) {
+        return
+      }
+
+      const closingRoutine = () => {
+        this.modals = this.modals.filter(({id}) => id !== modal.id)
+        modal.resolve(result)
+      }
+
+      const modalInstance = this._getModalInstance(modal)
+
+      if ('before-close' in modalInstance.$listeners) {
+        modalInstance.$emit('before-close', closingRoutine)
+      } else {
+        closingRoutine()
+      }
+    },
+
+    closeTop() {
+      this.close(this.topModal)
+    },
+
+    closeByEscKey(e) {
+      if (this.topModal && e.key === "Escape" && !e.defaultPrevented) {
+        e.preventDefault()
+        this.closeTop()
+      }
+    },
+
+    closeByBackdropClick(e, modal) {
+      if (e.target === e.currentTarget) {
+        this.close(modal)
+      }
+    },
+
+    _getModalInstance(modal) {
+      return this.$refs[`modal_${modal.id}`][0].$children[0]
+    }
+  },
+
+  mounted() {
+    document.body.appendChild(this.$el)
+    document.addEventListener("keydown", this.closeByEscKey)
+
+    this.$root.$on("lastModal.open", this.open)
+    this.$root.$on("lastModal.close", this.close)
+    this.$root.$on("lastModal.closeTop", this.closeTop)
+  },
+
+  destroyed() {
+    document.body.removeChild(this.$el)
+    document.removeEventListener("keydown", this.closeByEscKey)
+
+    this.$root.$off("lastModal.open", this.open)
+    this.$root.$off("lastModal.close", this.close)
+    this.$root.$off("lastModal.closeTop", this.closeTop)
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.ModalStack {
+  position: fixed;
+  z-index: 1050;
+}
+
+.ModalStack__backdrop {
+  background: rgba(0, 0, 0, 0.35);
+
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ModalStack__modalWrapper {
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  padding: 1.5rem;
+
+  overflow: auto;
+}
+
+.ModalStack__modalScroller {
+  overflow: auto;
+  position: relative;
+  height: calc(100vh);
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.ModalStack__modal {
+  transition: filter .15s;
+
+  &:not(.isTop) {
+    filter: brightness(80%);
+  }
+}
+
+/* animations */
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.25s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.backdrop-enter-active,
+.backdrop-leave-active {
+  transition: opacity 0.25s;
+}
+
+.backdrop-enter,
+.backdrop-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/last-modal.js b/src/last-modal.js
new file mode 100644
index 0000000..44ffe29
--- /dev/null
+++ b/src/last-modal.js
@@ -0,0 +1,98 @@
+import Dialog from "./components/dialog.vue"
+import ModalLayout from "./components/modal-layout.vue"
+import ModalStack from "./components/modal-stack.vue"
+
+const defaultConfig = {
+  cancelLabel: 'Cancel',
+  confirmLabel: 'OK',
+  buttonClassName: 'btn btn-secondary',
+  primaryButtonClassName: 'btn btn-primary'
+}
+
+const LastModal = {
+  install(Vue, config = {}) {
+    let sequence = 0
+
+    config = Object.assign({}, defaultConfig, config)
+
+    Vue.component(ModalStack.name, ModalStack)
+    Vue.component(ModalLayout.name, ModalLayout)
+
+    Vue.prototype.$modal = function(component, props = {}, inline = false) {
+      return new Promise(resolve => {
+        this.$root.$emit("lastModal.open", {
+            id: ++sequence,
+            component,
+            props,
+            resolve,
+            inline
+        })
+      });
+    };
+
+    Vue.prototype.$dialog = function({title, message, buttons}) {
+      return this.$modal(Dialog, {
+        title, message, buttons
+      })
+    }
+
+    Vue.prototype.$alert = function(options) {
+      if (typeof options === 'string') {
+        options = {
+          message: options
+        }
+      }
+
+      return this.$dialog({
+        title: options.title,
+        message: options.message,
+        buttons: [
+          {
+            className: config.buttonClassName,
+            label: options.confirmLabel || config.confirmLabel
+          }
+        ]
+      })
+    }
+
+    Vue.prototype.$confirm = function(options) {
+      if (typeof options === 'string') {
+        options = {
+          message: options
+        }
+      }
+
+      return this.$dialog({
+        title: options.title,
+        message: options.message,
+        buttons: [
+          {
+            className: config.buttonClassName,
+            label: options.cancelLabel || config.cancelLabel,
+            value: false
+          },
+          {
+            className: config.primaryButtonClassName,
+            label: options.confirmLabel || config.confirmLabel,
+            value: true
+          }
+        ]
+      })
+    }
+  }
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+
+if (typeof window !== 'undefined') {
+	GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+	GlobalVue = global.Vue;
+}
+
+if (GlobalVue) {
+	GlobalVue.use(LastModal);
+}
+
+export default LastModal
diff --git a/src/main.js b/src/main.js
index 63eb05f..9ee44e9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,12 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from "vue";
+import App from "./App.vue";
 
-Vue.config.productionTip = false
+import VueLastModal from '../dist/last-modal.umd'
+
+Vue.use(VueLastModal)
+
+Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+  render: h => h(App)
+}).$mount("#app");
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..22c57e1
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  productionSourceMap: false,
+  runtimeCompiler: true,
+  css: { extract: false }
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f69c157..6c3132d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4599,6 +4599,13 @@ postcss-modules-values@^1.3.0:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
+postcss-nested@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.1.1.tgz#2074e6641583bf7151d951908d68fa95039fe340"
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^5.0.0-rc.4"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -4742,7 +4749,7 @@ postcss@^6.0.1, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.5:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
   dependencies: