diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2d2b47d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
\ No newline at end of file
diff --git a/README.md b/README.md
index 214294d..5311f34 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,317 @@
-# bs5-utils
\ No newline at end of file
+# Bs5Utils - A JavaScript utility package for Bootstrap 5 components
+
+---
+
+A simple package to make the usage of various components within Bootstrap 5 easier to use.
+
+If this package has helped you, and you're feeling particularly generous:
+- **ETH/MATIC:** 0x6515654c8e931052ab17a63311411D475D503e59
+- **ADA:** addr1qxaqvghsr8lu3wrmql4fcvg6txj5083s2a9rr5dmrrtjt0yn8t0x4yav3ma2flg3tzcu9767s7senydcumnf6c4krnnspn949q
+
+---
+
+Contents
+-
+
+- [Configuration](#configuration)
+- [Theming](#theming)
+- [API](#api)
+- [Support & Contribute](#support--contribute)
+
+Configuration
+-
+
+There are several defaults which you can customize:
+
+```javascript
+Bs5Utils.defaults.toasts.position = 'top-right';
+Bs5Utils.defaults.toasts.container = 'toast-container';
+Bs5Utils.defaults.toasts.stacking = false;
+```
+
+As `bs5Utils.Snack` is a subset of `bs5Utils.Toast`, the configuration for toasts will also apply to `bs5Utils.Sanck`.
+
+Theming
+-
+
+You can register your own custom styles by passing classes to specific components by using the static
+method `Bs5Utils.registerStyle`. The components you can customise are:
+
+- `btnClose` - The dismiss button
+- `main` - The area of the toast, snack, or modal which will display the `type` color
+- `border` - The border of the component
+
+These components have been clearly illustrated below. For the time being, the `border` style for `bs5Utils.Snack` cannot
+be overridden.
+
+**Note:** All of these keys _must_ be passed in the `styles` parameter object.
+
+**Method Overview**
+
+```javascript
+/**
+ * Register a style for the components
+ * @param key - To reference your style
+ * @param styles - The style object
+ */
+Bs5Utils.registerStyle(key, styles)
+```
+
+**Usage**
+
+You first define your CSS classes:
+
+```css
+.bg-pink {
+    background-color: pink;
+}
+
+.text-purple {
+    color: purple;
+}
+
+.border-pink {
+    border-color: pink !important;
+}
+```
+
+Then you register the style:
+
+```javascript
+Bs5Utils.registerStyle('pink', {
+    btnClose: ['btn-close-white'],
+    main: ['bg-pink', 'text-purple'],
+    border: ['border-pink']
+});
+```
+
+Pass empty arrays if you wish to leave the default styles e.g.
+
+```javascript
+Bs5Utils.registerStyle('pink', {
+    btnClose: [],
+    main: ['bg-pink', 'text-purple'],
+    border: ['border-pink']
+});
+```
+
+Now, `pink` can be used as a `type` when displaying snacks, toasts, or modals e.g.
+
+**Snack**
+
+![Theming Snack](example/img/theming-snack.png)
+
+**Toast**
+
+![Theming Snack](example/img/theming-toast.png)
+
+**Modal**
+
+![Theming Modal](example/img/theming-modal.png)
+
+API
+-
+
+This package is based around the `Bs5Utils` class, so first things first, construct the object:
+
+```javascript
+const bs5Utils = new Bs5Utils();
+```
+
+Thereafter you'll be able to use the methods outlined below.
+
+### Snacks
+
+**Method Overview**
+
+```javascript
+/**
+ * Display a lightweight toast for simple alerts
+ * @param - type the theme of the snack
+ * @param - title the title of the of the snack
+ * @param - delay in ms, if specified the snack will autohide after the specified amount
+ * @param - dismissible set whether the dismiss button should show
+ */
+bs5Utils.Snack.show(
+    type,
+    title,
+    delay = 0,
+    dismissible = true
+);
+```
+
+**Usage**
+
+```javascript
+bs5Utils.Snack.show('secondary', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('light', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('white', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('dark', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('info', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('primary', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('success', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('warning', 'Hello World!', delay = 0, dismissible = true);
+bs5Utils.Snack.show('danger', 'Hello World!', delay = 0, dismissible = true);
+```
+
+**Example**
+
+![img.png](example/img/api-snacks.png)
+
+### Toasts
+
+**Method Overview**
+
+```javascript
+/**
+ * Display a toast for alerts
+ * @param type - the theme of the snack
+ * @param icon - Set an icon in the top-left corner, you can pass HTML directly
+ * @param title - the title of the of the toast
+ * @param subtitle - the subtitle of the toast
+ * @param content - the content of the toast
+ * @param buttons - the action buttons of the toast
+ * @param delay - in ms, if specified the snack will autohide after the specified amount
+ * @param dismissible - set whether the dismiss button should show
+ */
+bs5Utils.Toast.show({
+    type,
+    icon = '',
+    title,
+    subtitle = '',
+    content = '',
+    buttons = [],
+    delay = 0,
+    dismissible = true,
+});
+```
+
+**Usage**
+
+```javascript
+bs5Utils.Toast.show({
+    type: 'primary',
+    icon: `<i class="far fa-check-circle fa-lg me-2"></i>`,
+    title: 'Notification!',
+    subtitle: '23 secs ago',
+    content: 'Hello World!',
+    buttons: [
+        {
+            text: 'Click Me!',
+            class: 'btn btn-sm btn-primary',
+            handler: () => {
+                alert(`Button #1 has been clicked!`);
+            }
+        },
+        {
+            text: 'Click Me Too!',
+            class: 'btn btn-sm btn-warning',
+            handler: () => {
+                alert(`You clicked me too!`);
+            }
+        },
+        {
+            type: 'dismiss',
+            text: 'Hide',
+            class: 'btn btn-sm btn-secondary'
+        }
+    ],
+    delay: 0,
+    dismissible: true
+});
+```
+
+**Example**
+
+![img.png](example/img/api-toasts.png)
+
+### Modals
+
+**Method Overview**
+
+```javascript
+/**
+ * Display a modal
+ * @param type - the theme of the snack
+ * @param title - the title of the modal, if omitted, the modal-header element is removed
+ * @param content - the content of the modal, if omitted, the modal-body element is removed
+ * @param buttons - any action buttons, if omitted, the the modal-footer element  is removed
+ * @param centered - set whether the modal is centered
+ * @param dismissible - set whether the dismiss button should show
+ * @param backdrop - set the type of backdrop: true, false, static
+ * @param keyboard - set whether the escape key closes the modal
+ * @param focus - set whether the modal is autofocussed when initialized
+ * @param fullscreen - set whether the modal is fullscreen
+ * @param modalSize - set the size of the modal: sm, lg, xl by default, it's an empty string
+ */
+bs5Utils.Modal.show({
+    type,
+    title = '',
+    content = '',
+    buttons = [],
+    centered = false,
+    dismissible = true,
+    backdrop = dismissible ? true : 'static',
+    keyboard = dismissible,
+    focus = true,
+    fullscreen = false,
+    size = ''
+})
+```
+
+**Usage**
+
+```javascript
+bs5Utils.Modal.show({
+    type: 'primary',
+    title: `Hello World!`,
+    content: `<p class="text-center fw-bold">Hello World!</p>`,
+    buttons: [
+        {
+            text: 'Click Me!',
+            class: 'btn btn-sm btn-primary',
+            handler: () => {
+                alert(`Button #1 has been clicked!`);
+            }
+        },
+        {
+            text: 'Click Me Too!',
+            class: 'btn btn-sm btn-warning',
+            handler: () => {
+                alert(`You clicked me too!`);
+            }
+        },
+        {
+            type: 'dismiss',
+            text: 'Hide',
+            class: 'btn btn-sm btn-secondary'
+        }
+    ],
+    centered: true,
+    dismissible: true,
+    backdrop: 'static',
+    keyboard: false,
+    focus: false
+});
+```
+
+**Example**
+
+![img.png](example/img/api-modal-1.png)
+
+![img.png](example/img/api-modal-2.png)
+
+![img_1.png](example/img/api-modal-3.png)
+
+![img.png](example/img/api-modal-4.png)
+
+Support & Contribute
+-
+
+- Use: [Babel Repl](https://babeljs.io/repl) and [JavaScript Minifier](https://javascript-minifier.com/) to build the
+  app to transpile and minify your changes
+- Submit issues and PRs
+- Let's know how you're using this package in your project
+- If this package has helped you, and you're feeling particularly generous:
+  - **ETH/MATIC:** 0x6515654c8e931052ab17a63311411D475D503e59
+  - **ADA:** addr1qxaqvghsr8lu3wrmql4fcvg6txj5083s2a9rr5dmrrtjt0yn8t0x4yav3ma2flg3tzcu9767s7senydcumnf6c4krnnspn949q
\ No newline at end of file
diff --git a/dist/js/Bs5Utils.js b/dist/js/Bs5Utils.js
new file mode 100644
index 0000000..8343842
--- /dev/null
+++ b/dist/js/Bs5Utils.js
@@ -0,0 +1 @@
+"use strict";function _classPrivateMethodInitSpec(t,e){_checkPrivateRedeclaration(t,e),e.add(t)}function _defineProperty(t,e,s){return e in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}function _classPrivateMethodGet(t,e,s){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return s}function _classPrivateFieldInitSpec(t,e,s){_checkPrivateRedeclaration(t,e),e.set(t,s)}function _checkPrivateRedeclaration(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function _classPrivateFieldSet(t,e,s){return _classApplyDescriptorSet(t,_classExtractFieldDescriptor(t,e,"set"),s),s}function _classApplyDescriptorSet(t,e,s){if(e.set)e.set.call(t,s);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=s}}function _classPrivateFieldGet(t,e){return _classApplyDescriptorGet(t,_classExtractFieldDescriptor(t,e,"get"))}function _classExtractFieldDescriptor(t,e,s){if(!e.has(t))throw new TypeError("attempted to "+s+" private field on non-instance");return e.get(t)}function _classApplyDescriptorGet(t,e){return e.get?e.get.call(t):e.value}var _count=new WeakMap;class Modal{constructor(){_classPrivateFieldInitSpec(this,_count,{writable:!0,value:0})}show({type:t,title:e="",content:s="",buttons:a=[],centered:o=!1,dismissible:i=!0,backdrop:n=!!i||"static",keyboard:r=i,focus:l=!0,fullscreen:d=!1,size:c=""}){_classPrivateFieldSet(this,_count,1+ +_classPrivateFieldGet(this,_count)),c=["sm","lg","xl"].includes(c)?`modal-${c}`:"",d=d?"modal-fullscreen":"",o=o?"modal-dialog-centered modal-dialog-scrollable":"";const b=Bs5Utils.defaults.styles[t],u=b.btnClose.join(" "),m=b.border,h=document.createElement("div");h.setAttribute("id",`modal-${_classPrivateFieldGet(this,_count)}`),h.setAttribute("tabindex","-1"),h.classList.add("modal");let p="",v=[];Array.isArray(a)&&a.length&&(p+=`<div class="modal-footer ${m.join(" ")}">`,a.forEach((t,e)=>{switch(t.type||"button"){case"dismiss":p+=`<button type="button" class="${t.class}" data-bs-dismiss="modal">${t.text}</button>`;break;default:let s=`modal-${_classPrivateFieldGet(this,_count)}-button-${e}`;p+=`<button type="button" id="${s}" class="${t.class}">${t.text}</button>`,t.hasOwnProperty("handler")&&"function"==typeof t.handler&&v.push({id:s,handler:t.handler})}}),p+="</div>"),h.innerHTML=` <div class="modal-dialog ${o} ${d} ${c}">\n                                <div class="modal-content border-0">\n                                  ${e.length?`<div class="modal-header border-0 ${b.main.join(" ")}">\n                                    <h5 class="modal-title">${e}</h5>\n                                    ${i?`<button type="button" class="btn-close ${u}" data-bs-dismiss="modal" aria-label="Close"></button>`:""}\n                                  </div>`:""}\n                                  ${s.length?`<div class="modal-body">${s}</div>`:""}\n                                  ${p}\n                                </div>\n                              </div>`,document.body.appendChild(h),h.addEventListener("hidden.bs.modal",function(t){t.target.remove()}),v.forEach(t=>{document.getElementById(t.id).addEventListener("click",t.handler)});const f={backdrop:n,keyboard:r,focus:l},y=new bootstrap.Modal(h,f);return y.show(),y}}var _count2=new WeakMap;class Snack{constructor(){_classPrivateFieldInitSpec(this,_count2,{writable:!0,value:0})}show(t,e,s=0,a=!0){_classPrivateFieldSet(this,_count2,1+ +_classPrivateFieldGet(this,_count2));const o=Bs5Utils.defaults.styles[t],i=o.btnClose.join(" "),n=document.createElement("div");n.classList.add("toast","align-items-center","border-1","border-dark"),o.main.forEach(t=>{n.classList.add(t)}),n.setAttribute("id",`snack-${_classPrivateFieldGet(this,_count2)}`),n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.setAttribute("aria-atomic","true"),n.innerHTML=`<div class="d-flex">\n                        <div class="toast-body">${e}</div>\n                        ${a?`<button type="button" class="btn-close ${i} me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>`:""}\n                      </div>`,Bs5Utils.defaults.toasts.stacking||document.querySelectorAll(`#${Bs5Utils.defaults.toasts.container} .toast`).forEach(t=>{t.remove()}),document.querySelector(`#${Bs5Utils.defaults.toasts.container}`).appendChild(n),n.addEventListener("hidden.bs.toast",function(t){t.target.remove()});const r={autohide:s>0&&"number"==typeof s};s>0&&"number"==typeof s&&(r.delay=s);const l=new bootstrap.Toast(n,r);return l.show(),l}}var _count3=new WeakMap;class Toast{constructor(){_classPrivateFieldInitSpec(this,_count3,{writable:!0,value:0})}show({type:t,icon:e="",title:s,subtitle:a="",content:o="",buttons:i=[],delay:n=0,dismissible:r=!0}){_classPrivateFieldSet(this,_count3,1+ +_classPrivateFieldGet(this,_count3));const l=Bs5Utils.defaults.styles[t],d=l.btnClose.join(" "),c=l.border,b=document.createElement("div");b.setAttribute("id",`toast-${_classPrivateFieldGet(this,_count3)}`),b.setAttribute("role","alert"),b.setAttribute("aria-live","assertive"),b.setAttribute("aria-atomic","true"),b.classList.add("toast","align-items-center"),c.forEach(t=>{b.classList.add(t)});let u="",m=[];Array.isArray(i)&&i.length&&(u+=`<div class="d-flex justify-content-center mt-2 pt-2 border-top ${c.join(" ")}">`,i.forEach((t,e)=>{switch(t.type||"button"){case"dismiss":u+=`<button type="button" class="${t.class}" data-bs-dismiss="toast">${t.text}</button>&nbsp;`;break;default:let s=`toast-${_classPrivateFieldGet(this,_count3)}-button-${e}`;u+=`<button type="button" id="${s}" class="${t.class}">${t.text}</button>&nbsp;`,t.hasOwnProperty("handler")&&"function"==typeof t.handler&&m.push({id:s,handler:t.handler})}}),u+="</div>"),b.innerHTML=`<div class="toast-header ${l.main.join(" ")}">\n                            ${e}\n                            <strong class="me-auto">${s}</strong>\n                            <small>${a}</small>\n                            ${r?`<button type="button" class="btn-close ${d}" data-bs-dismiss="toast" aria-label="Close"></button>`:""}\n                        </div>\n                        <div class="toast-body">\n                            ${o}\n                            ${u}\n                        </div>`,Bs5Utils.defaults.toasts.stacking||document.querySelectorAll(`#${Bs5Utils.defaults.toasts.container} .toast`).forEach(t=>{t.remove()}),document.querySelector(`#${Bs5Utils.defaults.toasts.container}`).appendChild(b),b.addEventListener("hidden.bs.toast",function(t){t.target.remove()}),m.forEach(t=>{document.getElementById(t.id).addEventListener("click",t.handler)});const h={autohide:n>0&&"number"==typeof n};n>0&&"number"==typeof n&&(h.delay=n);const p=new bootstrap.Toast(b,h);return p.show(),p}}var _createToastContainer=new WeakSet;class Bs5Utils{constructor(){_classPrivateMethodInitSpec(this,_createToastContainer),_classPrivateMethodGet(this,_createToastContainer,_createToastContainer2).call(this),this.Toast=new Toast,this.Snack=new Snack,this.Modal=new Modal}static registerStyle(t,e){if("object"!=typeof e&&Array.isArray(e))throw"The styles parameter must be an object when you register component style.";Bs5Utils.defaults.styles[t]=e}}function _createToastContainer2(){let t=document.querySelector(`#${Bs5Utils.defaults.toasts.container}`);if(!t){const e={"top-left":"top-0 start-0 ms-1 mt-1","top-center":"top-0 start-50 translate-middle-x mt-1","top-right":"top-0 end-0 me-1 mt-1","middle-left":"top-50 start-0 translate-middle-y ms-1","middle-center":"top-50 start-50 translate-middle p-3","middle-right":"top-50 end-0 translate-middle-y me-1","bottom-left":"bottom-0 start-0 ms-1 mb-1","bottom-center":"bottom-0 start-50 translate-middle-x mb-1","bottom-right":"bottom-0 end-0 me-1 mb-1"};(t=document.createElement("div")).classList.add("position-relative"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),t.innerHTML=`<div id="${Bs5Utils.defaults.toasts.container}" class="toast-container position-fixed pb-1 ${e[Bs5Utils.defaults.toasts.position]||e["top-right"]}"></div>`,document.body.appendChild(t)}}_defineProperty(Bs5Utils,"defaults",{toasts:{position:"top-right",container:"toast-container",stacking:!0},styles:{secondary:{btnClose:["btn-close-white"],main:["text-white","bg-secondary"],border:["border-secondary"]},light:{btnClose:[],main:["text-dark","bg-light","border-bottom","border-dark"],border:["border-dark"]},white:{btnClose:[],main:["text-dark","bg-white","border-bottom","border-dark"],border:["border-dark"]},dark:{btnClose:["btn-close-white"],main:["text-white","bg-dark"],border:["border-dark"]},info:{btnClose:["btn-close-white"],main:["text-white","bg-info"],border:["border-info"]},primary:{btnClose:["btn-close-white"],main:["text-white","bg-primary"],border:["border-primary"]},success:{btnClose:["btn-close-white"],main:["text-white","bg-success"],border:["border-success"]},warning:{btnClose:["btn-close-white"],main:["text-white","bg-warning"],border:["border-warning"]},danger:{btnClose:["btn-close-white"],main:["text-white","bg-danger"],border:["border-danger"]}}});
\ No newline at end of file
diff --git a/example/img/api-modal-1.png b/example/img/api-modal-1.png
new file mode 100644
index 0000000..6b299a1
Binary files /dev/null and b/example/img/api-modal-1.png differ
diff --git a/example/img/api-modal-2.png b/example/img/api-modal-2.png
new file mode 100644
index 0000000..b16e5a9
Binary files /dev/null and b/example/img/api-modal-2.png differ
diff --git a/example/img/api-modal-3.png b/example/img/api-modal-3.png
new file mode 100644
index 0000000..7c0b4ca
Binary files /dev/null and b/example/img/api-modal-3.png differ
diff --git a/example/img/api-modal-4.png b/example/img/api-modal-4.png
new file mode 100644
index 0000000..de6e270
Binary files /dev/null and b/example/img/api-modal-4.png differ
diff --git a/example/img/api-snacks.png b/example/img/api-snacks.png
new file mode 100644
index 0000000..1b831d9
Binary files /dev/null and b/example/img/api-snacks.png differ
diff --git a/example/img/api-toasts.png b/example/img/api-toasts.png
new file mode 100644
index 0000000..6e84d9a
Binary files /dev/null and b/example/img/api-toasts.png differ
diff --git a/example/img/theming-modal.png b/example/img/theming-modal.png
new file mode 100644
index 0000000..87cefbc
Binary files /dev/null and b/example/img/theming-modal.png differ
diff --git a/example/img/theming-snack.png b/example/img/theming-snack.png
new file mode 100644
index 0000000..4f66036
Binary files /dev/null and b/example/img/theming-snack.png differ
diff --git a/example/img/theming-toast.png b/example/img/theming-toast.png
new file mode 100644
index 0000000..42fd468
Binary files /dev/null and b/example/img/theming-toast.png differ
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000..327d787
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+          integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-solarizedlight.min.css"
+          integrity="sha512-fibfhB71IpdEKqLKXP/96WuX1cTMmvZioYp7T6I+lTbvJrrjEGeyYdAf09GHpFptF8toQ32woGZ8bw9+HjZc0A=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <style>
+        .bg-pink {
+            background-color: pink;
+        }
+
+        .text-purple {
+            color: purple;
+        }
+
+        .border-pink {
+            border-color: pink !important;
+        }
+    </style>
+
+    <title>Hello, world!</title>
+</head>
+<body>
+
+<div class="container-fluid text-center text-white bg-dark shadow-lg py-5 mb-5">
+    <h1 class="fw-bold">bs5-utils</h1>
+</div>
+
+<div class="container text-center">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card mb-2">
+                <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Snack.show</code></div>
+                <div class="card-body p-0">
+                    <pre class="m-0"><code id="snack-code" class="language-javascript">bs5Utils.Snack.show(
+    type,
+    title,
+    delay = 0,
+    dismissible = true
+);</code></pre>
+                </div>
+                <div class="card-footer p-0">
+                    <button id="show-snack-btn" class="btn d-block btn-dark rounded-0 w-100">Show Snack</button>
+                </div>
+            </div>
+
+            <div class="card mb-2">
+                <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Toast.show</code></div>
+                <div class="card-body p-0">
+                    <pre class="m-0"><code id="toast-code" class="language-javascript">bs5Utils.Toast.show({
+     type,
+     icon = '',
+     title,
+     subtitle = '',
+     content = '',
+     buttons = [],
+     delay = 0,
+     dismissible = true
+});</code></pre>
+                </div>
+                <div class="card-footer p-0">
+                    <button id="show-toast-btn" class="btn d-block btn-dark rounded-0 w-100">Show Toast</button>
+                </div>
+            </div>
+
+            <div class="card mb-2">
+                <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Modal.show</code></div>
+                <div class="card-body p-0">
+                    <pre class="m-0"><code id="modal-code" class="language-javascript">bs5Utils.Modal.show({
+     type,
+     title = '',
+     content = '',
+     buttons = [],
+     centered = false,
+     dismissible = true,
+     backdrop = dismissible ? true : 'static',
+     keyboard = dismissible,
+     focus = true,
+     fullscreen = false,
+     size = ''
+});</code></pre>
+                </div>
+                <div class="card-footer p-0">
+                    <button id="show-modal-btn" class="btn d-block btn-dark rounded-0 w-100">Show Modal</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
+        integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
+        crossorigin="anonymous"></script>
+<!--<script src="../src/js/components/Toast.js"></script>-->
+<!--<script src="../src/js/components/Snack.js"></script>-->
+<!--<script src="../src/js/components/Modal.js"></script>-->
+<!--<script src="../src/js/Bs5Utils.js"></script>-->
+<script src="../dist/js/Bs5Utils.js"></script>
+<script>
+    window.Prism = window.Prism || {};
+    window.Prism.manual = true;
+
+    function getRandomInt(min, max) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function randFromArray(arr) {
+        return arr[getRandomInt(0, arr.length - 1)];
+    }
+
+    /***
+     * Overridable globals
+     ***/
+    Bs5Utils.defaults.toasts.position = 'top-right';
+    Bs5Utils.defaults.toasts.container = 'toast-container';
+    Bs5Utils.defaults.toasts.stacking = true;
+
+    const bs5Utils = new Bs5Utils();
+    const types = ['secondary', 'light', 'white', 'dark', 'info', 'primary', 'success', 'warning', 'danger'];
+
+    const snackCode = document.getElementById('snack-code'),
+        toastCode = document.getElementById('toast-code'),
+        modalCode = document.getElementById('modal-code');
+
+    Prism.highlightElement(snackCode);
+    Prism.highlightElement(toastCode);
+    Prism.highlightElement(modalCode);
+
+    document.querySelector('#show-snack-btn').addEventListener('click', function () {
+        const type = randFromArray(types);
+        let delay = 0;
+
+        if (getRandomInt(0, 1) === 1) {
+            delay = 5000;
+        }
+
+        bs5Utils.Snack.show(type, 'Hello World!', delay, true);
+        snackCode.innerHTML = `bs5Utils.Snack.show(
+    '${type}',
+    'Hello World!',
+    ${delay},
+    true
+);`;
+
+        Prism.highlightElement(snackCode);
+    });
+
+    document.querySelector('#show-toast-btn').addEventListener('click', function () {
+        const type = randFromArray(types),
+            buttons = getRandomInt(0, 1) === 1 ? [
+                {
+                    text: 'Click Me!',
+                    class: 'btn btn-sm btn-primary',
+                    handler: () => {
+                        alert(`${type} has been clicked!`);
+                    }
+                },
+                {
+                    text: 'Click Me Too!',
+                    class: 'btn btn-sm btn-warning',
+                    handler: () => {
+                        alert(`You clicked me too!`);
+                    }
+                },
+                {
+                    type: 'dismiss',
+                    text: 'Hide',
+                    class: 'btn btn-sm btn-secondary'
+                }
+            ] : [];
+
+        let icon = ``;
+
+        switch (getRandomInt(0, 2)) {
+            case 0:
+                icon = `<i class="far fa-check-circle fa-lg me-2"></i>`;
+                break;
+
+            case 1:
+                icon = `<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>`;
+                break;
+
+            case 2:
+                icon = ``
+                break;
+        }
+
+        let delay = 0;
+
+        if (getRandomInt(0, 1) === 1) {
+            delay = 5000;
+        }
+
+        bs5Utils.Toast.show({
+            type,
+            icon,
+            title: `Notification!`,
+            subtitle: '23 secs ago',
+            content: `Hello World!`,
+            buttons,
+            delay
+        });
+
+        toastCode.innerHTML = `bs5Utils.Toast.show({
+    type: '${type}',
+    icon: '${icon}',
+    title: 'Notification!',
+    subtitle: '23 secs ago',
+    content: 'Hello World!',
+    buttons: ${JSON.stringify(buttons)},
+    delay: ${delay}
+});`;
+        Prism.highlightElement(toastCode);
+    });
+
+    document.querySelector('#show-modal-btn').addEventListener('click', function () {
+        const type = randFromArray(types),
+            buttons = getRandomInt(0, 1) === 1 ? [
+                {
+                    text: 'Click Me!',
+                    class: 'btn btn-sm btn-primary',
+                    handler: () => {
+                        alert(`${type} has been clicked!`);
+                    }
+                },
+                {
+                    text: 'Click Me Too!',
+                    class: 'btn btn-sm btn-warning',
+                    handler: () => {
+                        alert(`You clicked me too!`);
+                    }
+                },
+                {
+                    type: 'dismiss',
+                    text: 'Hide',
+                    class: 'btn btn-sm btn-secondary'
+                }
+            ] : [],
+            centered = randFromArray([false, true]),
+            keyboard = randFromArray([false, true]),
+            focus = randFromArray([false, true]);
+
+        bs5Utils.Modal.show({
+            type: type,
+            title: `Hello World!`,
+            content: `<p class="text-center fw-bold">Hello World!</p>`,
+            buttons,
+            centered,
+            backdrop: 'static',
+            keyboard,
+            focus,
+        });
+
+        modalCode.innerHTML = `bs5Utils.Modal.show({
+    type: '${type}',
+    title: 'Hello World!',
+    content: '<p class="text-center fw-bold">Hello World!</p>',
+    buttons: ${JSON.stringify(buttons)},
+    centered: ${centered},
+    dismissible: true,
+    backdrop: 'static',
+    keyboard: ${keyboard},
+    focus: ${focus},
+});`;
+
+        Prism.highlightElement(modalCode);
+    });
+</script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..fe1b3da
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "bs5-utils",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "bootstrap": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz",
+      "integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..60afbaa
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "bs5-utils",
+  "version": "1.0.0",
+  "description": "A JavaScript utility package for Bootstrap 5 components.",
+  "main": "src/js/Bs5Utils.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Script47/Toast.git"
+  },
+  "keywords": [
+    "bootstrap-5",
+    "bootstrap"
+  ],
+  "author": "Script47 <Script47@hotmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Script47/bs5-utils/issues"
+  },
+  "homepage": "https://github.com/Script47/bs5-utils",
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "bootstrap": ">=5.0"
+  },
+  "devDependencies": {}
+}
diff --git a/src/js/Bs5Utils.js b/src/js/Bs5Utils.js
new file mode 100644
index 0000000..f65f814
--- /dev/null
+++ b/src/js/Bs5Utils.js
@@ -0,0 +1,108 @@
+class Bs5Utils {
+    /**
+     * Default config options
+     * @type {{toasts: {container: string, position: string, stacking: boolean}}}
+     */
+    static defaults = {
+        toasts: {
+            position: 'top-right',
+            container: 'toast-container',
+            stacking: true
+        },
+
+        styles: {
+            secondary: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-secondary'],
+                border: ['border-secondary']
+            },
+            light: {
+                btnClose: [],
+                main: ['text-dark', 'bg-light', 'border-bottom', 'border-dark'],
+                border: ['border-dark']
+            },
+            white: {
+                btnClose: [],
+                main: ['text-dark', 'bg-white', 'border-bottom', 'border-dark'],
+                border: ['border-dark']
+            },
+            dark: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-dark'],
+                border: ['border-dark']
+            },
+            info: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-info'],
+                border: ['border-info']
+            },
+            primary: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-primary'],
+                border: ['border-primary']
+            },
+            success: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-success'],
+                border: ['border-success']
+            },
+            warning: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-warning'],
+                border: ['border-warning']
+            },
+            danger: {
+                btnClose: ['btn-close-white'],
+                main: ['text-white', 'bg-danger'],
+                border: ['border-danger']
+            }
+        }
+    }
+
+    constructor() {
+        this.#createToastContainer();
+
+        this.Toast = new Toast();
+        this.Snack = new Snack();
+        this.Modal = new Modal();
+    }
+
+    #createToastContainer() {
+        let containerEl = document.querySelector(`#${Bs5Utils.defaults.toasts.container}`);
+
+        if (!containerEl) {
+            const positionToClass = {
+                'top-left': 'top-0 start-0 ms-1 mt-1',
+                'top-center': 'top-0 start-50 translate-middle-x mt-1',
+                'top-right': 'top-0 end-0 me-1 mt-1',
+                'middle-left': 'top-50 start-0 translate-middle-y ms-1',
+                'middle-center': 'top-50 start-50 translate-middle p-3',
+                'middle-right': 'top-50 end-0 translate-middle-y me-1',
+                'bottom-left': 'bottom-0 start-0 ms-1 mb-1',
+                'bottom-center': 'bottom-0 start-50 translate-middle-x mb-1',
+                'bottom-right': 'bottom-0 end-0 me-1 mb-1'
+            };
+
+            containerEl = document.createElement('div');
+            containerEl.classList.add('position-relative');
+            containerEl.setAttribute('aria-live', 'polite');
+            containerEl.setAttribute('aria-atomic', 'true');
+            containerEl.innerHTML = `<div id="${Bs5Utils.defaults.toasts.container}" class="toast-container position-fixed pb-1 ${positionToClass[Bs5Utils.defaults.toasts.position] || positionToClass['top-right']}"></div>`;
+
+            document.body.appendChild(containerEl);
+        }
+    }
+
+    /**
+     * Register a style for the components
+     * @param key - To reference your style
+     * @param styles - The style object
+     */
+    static registerStyle(key, styles) {
+        if (typeof styles !== 'object' && Array.isArray(styles)) {
+            throw 'The styles parameter must be an object when you register component style.'
+        }
+
+        Bs5Utils.defaults.styles[key] = styles;
+    }
+}
\ No newline at end of file
diff --git a/src/js/components/Modal.js b/src/js/components/Modal.js
new file mode 100644
index 0000000..fedf714
--- /dev/null
+++ b/src/js/components/Modal.js
@@ -0,0 +1,114 @@
+class Modal {
+    /**
+     * A counter for the Modals
+     * @type {number}
+     */
+    #count = 0;
+
+    /**
+     * Display a modal
+     * @param type - the theme of the snack
+     * @param title - the title of the modal, if omitted, the modal-header element is removed
+     * @param content - the content of the modal, if omitted, the modal-body element is removed
+     * @param buttons - any action buttons, if omitted, the the modal-footer element  is removed
+     * @param centered - set whether the modal is centered
+     * @param dismissible - set whether the dismiss button should show
+     * @param backdrop - set the type of backdrop: true, false, static
+     * @param keyboard - set whether the escape key closes the modal
+     * @param focus - set whether the modal is autofocussed when initialized
+     * @param fullscreen - set whether the modal is fullscreen
+     * @param modalSize - set the size of the modal: sm, lg, xl by default, it's an empty string
+     */
+    show({
+             type,
+             title = '',
+             content = '',
+             buttons = [],
+             centered = false,
+             dismissible = true,
+             backdrop = dismissible ? true : 'static',
+             keyboard = dismissible,
+             focus = true,
+             fullscreen = false,
+             size = ''
+         }) {
+        this.#count++;
+
+        size = ['sm', 'lg', 'xl'].includes(size) ? `modal-${size}` : '';
+        fullscreen = fullscreen ? 'modal-fullscreen' : '';
+        centered = centered ? 'modal-dialog-centered modal-dialog-scrollable' : '';
+
+        const style = Bs5Utils.defaults.styles[type],
+            btnCloseStyles = style.btnClose.join(' '),
+            borderStyles = style.border,
+            modal = document.createElement('div');
+
+        modal.setAttribute('id', `modal-${this.#count}`)
+        modal.setAttribute('tabindex', '-1');
+        modal.classList.add('modal');
+
+        let footerHtml = '',
+            buttonIds = [];
+
+        if (Array.isArray(buttons) && buttons.length) {
+            footerHtml += `<div class="modal-footer ${borderStyles.join(' ')}">`;
+
+            buttons.forEach((button, key) => {
+                const type = button.type || 'button';
+
+                switch (type) {
+                    case 'dismiss':
+                        footerHtml += `<button type="button" class="${button.class}" data-bs-dismiss="modal">${button.text}</button>`;
+                        break;
+
+                    default:
+                        let id = `modal-${this.#count}-button-${key}`;
+
+                        footerHtml += `<button type="button" id="${id}" class="${button.class}">${button.text}</button>`;
+
+                        if (button.hasOwnProperty('handler') && typeof button.handler === 'function') {
+                            buttonIds.push({
+                                id,
+                                handler: button.handler
+                            });
+                        }
+                }
+            });
+
+            footerHtml += `</div>`;
+        }
+
+        modal.innerHTML = ` <div class="modal-dialog ${centered} ${fullscreen} ${size}">
+                                <div class="modal-content border-0">
+                                  ${title.length ? `<div class="modal-header border-0 ${style.main.join(' ')}">
+                                    <h5 class="modal-title">${title}</h5>
+                                    ${dismissible ? `<button type="button" class="btn-close ${btnCloseStyles}" data-bs-dismiss="modal" aria-label="Close"></button>` : ``}
+                                  </div>` : ``}
+                                  ${content.length ? `<div class="modal-body">${content}</div>` : ``}
+                                  ${footerHtml}
+                                </div>
+                              </div>`;
+
+        document.body.appendChild(modal);
+
+        modal.addEventListener('hidden.bs.modal', function (e) {
+            e.target.remove();
+        });
+
+        buttonIds.forEach(value => {
+            document.getElementById(value.id).addEventListener('click', value.handler)
+        });
+
+        const opts = {
+            backdrop,
+            keyboard,
+            focus
+        };
+
+        const bsModal = new bootstrap.Modal(modal, opts);
+
+        bsModal.show();
+
+        return bsModal;
+    }
+}
\ No newline at end of file
diff --git a/src/js/components/Snack.js b/src/js/components/Snack.js
new file mode 100644
index 0000000..0c76f78
--- /dev/null
+++ b/src/js/components/Snack.js
@@ -0,0 +1,61 @@
+class Snack {
+    /**
+     * A counter for the Snacks
+     * @type {number}
+     */
+    #count = 0;
+
+    /**
+     * Display a lightweight toast
+     * @param type - the theme of the snack
+     * @param title - the title of the of the snack
+     * @param delay - in ms, if specified the snack will autohide after the specified amount
+     * @param dismissible - set whether the dismiss button should show
+     */
+    show(type, title, delay = 0, dismissible = true) {
+        this.#count++;
+
+        const style = Bs5Utils.defaults.styles[type],
+            btnCloseStyle = style.btnClose.join(' '),
+            snack = document.createElement('div');
+
+        snack.classList.add('toast', 'align-items-center', 'border-1', 'border-dark');
+        style.main.forEach(value => {
+            snack.classList.add(value);
+        });
+        snack.setAttribute('id', `snack-${this.#count}`);
+        snack.setAttribute('role', 'alert');
+        snack.setAttribute('aria-live', 'assertive');
+        snack.setAttribute('aria-atomic', 'true');
+        snack.innerHTML = `<div class="d-flex">
+                        <div class="toast-body">${title}</div>
+                        ${dismissible ? `<button type="button" class="btn-close ${btnCloseStyle} me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>` : ''}
+                      </div>`;
+
+        if (!Bs5Utils.defaults.toasts.stacking) {
+            document.querySelectorAll(`#${Bs5Utils.defaults.toasts.container} .toast`).forEach((toast) => {
+                toast.remove();
+            });
+        }
+
+        document.querySelector(`#${Bs5Utils.defaults.toasts.container}`).appendChild(snack);
+
+        snack.addEventListener('hidden.bs.toast', function (e) {
+            e.target.remove();
+        });
+
+        const opts = {
+            autohide: (delay > 0 && typeof delay === 'number'),
+        };
+
+        if (delay > 0 && typeof delay === 'number') {
+            opts['delay'] = delay;
+        }
+
+        const bsSnack = new bootstrap.Toast(snack, opts);
+
+        bsSnack.show();
+
+        return bsSnack;
+    }
+}
\ No newline at end of file
diff --git a/src/js/components/Toast.js b/src/js/components/Toast.js
new file mode 100644
index 0000000..490d346
--- /dev/null
+++ b/src/js/components/Toast.js
@@ -0,0 +1,118 @@
+class Toast {
+    /**
+     * A counter for the Toasts
+     * @type {number}
+     */
+    #count = 0;
+
+    /**
+     * Display a toast for alerts
+     * @param type - the theme of the snack
+     * @param icon - Set an icon in the top-left corner, you can pass HTML directly
+     * @param title - the title of the of the toast
+     * @param subtitle - the subtitle of the toast
+     * @param content - the content of the toast
+     * @param buttons - the action buttons of the toast
+     * @param delay - in ms, if specified the snack will autohide after the specified amount
+     * @param dismissible - set whether the dismiss button should show
+     */
+    show({
+             type,
+             icon = '',
+             title,
+             subtitle = '',
+             content = '',
+             buttons = [],
+             delay = 0,
+             dismissible = true
+         }) {
+        this.#count++;
+
+        const style = Bs5Utils.defaults.styles[type],
+            btnCloseStyles = style.btnClose.join(' '),
+            borderStyles = style.border,
+            toast = document.createElement('div');
+
+        toast.setAttribute('id', `toast-${this.#count}`);
+        toast.setAttribute('role', 'alert');
+        toast.setAttribute('aria-live', 'assertive');
+        toast.setAttribute('aria-atomic', 'true');
+
+        toast.classList.add('toast', 'align-items-center');
+        borderStyles.forEach(value => {
+            toast.classList.add(value);
+        });
+
+        let buttonsHtml = ``,
+            buttonIds = [];
+
+        if (Array.isArray(buttons) && buttons.length) {
+            buttonsHtml += `<div class="d-flex justify-content-center mt-2 pt-2 border-top ${borderStyles.join(' ')}">`;
+
+            buttons.forEach((button, key) => {
+                const type = button.type || 'button';
+
+                switch (type) {
+                    case 'dismiss':
+                        buttonsHtml += `<button type="button" class="${button.class}" data-bs-dismiss="toast">${button.text}</button>&nbsp;`;
+                        break;
+
+                    default:
+                        let id = `toast-${this.#count}-button-${key}`;
+
+                        buttonsHtml += `<button type="button" id="${id}" class="${button.class}">${button.text}</button>&nbsp;`;
+
+                        if (button.hasOwnProperty('handler') && typeof button.handler === 'function') {
+                            buttonIds.push({
+                                id,
+                                handler: button.handler
+                            });
+                        }
+                }
+            });
+
+            buttonsHtml += `</div>`;
+        }
+
+        toast.innerHTML = `<div class="toast-header ${style.main.join(' ')}">
+                            ${icon}
+                            <strong class="me-auto">${title}</strong>
+                            <small>${subtitle}</small>
+                            ${dismissible ? `<button type="button" class="btn-close ${btnCloseStyles}" data-bs-dismiss="toast" aria-label="Close"></button>` : ''}
+                        </div>
+                        <div class="toast-body">
+                            ${content}
+                            ${buttonsHtml}
+                        </div>`;
+
+        if (!Bs5Utils.defaults.toasts.stacking) {
+            document.querySelectorAll(`#${Bs5Utils.defaults.toasts.container} .toast`).forEach((toast) => {
+                toast.remove();
+            });
+        }
+
+        document.querySelector(`#${Bs5Utils.defaults.toasts.container}`).appendChild(toast);
+
+        toast.addEventListener('hidden.bs.toast', function (e) {
+            e.target.remove();
+        });
+
+        buttonIds.forEach(value => {
+            document.getElementById(value.id).addEventListener('click', value.handler)
+        });
+
+        const opts = {
+            autohide: (delay > 0 && typeof delay === 'number'),
+        };
+
+        if (delay > 0 && typeof delay === 'number') {
+            opts['delay'] = delay;
+        }
+
+        const bsToast = new bootstrap.Toast(toast, opts);
+
+        bsToast.show();
+
+        return bsToast;
+    }
+}
\ No newline at end of file