diff --git a/docs/assets/styles/variables.css b/docs/assets/styles/variables.css
new file mode 100644
index 0000000..1154fed
--- /dev/null
+++ b/docs/assets/styles/variables.css
@@ -0,0 +1,66 @@
+.dark .v-select {
+  --vs-colors--lightest: rgba(60, 60, 60, 0.26);
+  --vs-colors--light: rgba(60, 60, 60, 0.5);
+  --vs-colors--dark: #333;
+  --vs-colors--darkest: rgba(0, 0, 0, 0.15);
+
+  /* Search Input */
+  --vs-search-input-color: inherit;
+  --vs-search-input-placeholder-color: inherit;
+
+  /* Font */
+  --vs-font-size: 1rem;
+  --vs-line-height: 1.4;
+
+  /* Disabled State */
+  --vs-state-disabled-bg: rgb(248, 248, 248);
+  --vs-state-disabled-color: var(--vs-colors--light);
+  --vs-state-disabled-controls-color: var(--vs-colors--light);
+  --vs-state-disabled-cursor: not-allowed;
+
+  /* Borders */
+  --vs-border-color: #24292e;
+  --vs-border-width: 1px;
+  --vs-border-style: solid;
+  --vs-border-radius: 4px;
+
+  /* Actions: house the component controls */
+  --vs-actions-padding: 4px 6px 0 3px;
+
+  /* Component Controls: Clear, Open Indicator */
+  --vs-controls-color: #c9c2c2;
+  --vs-controls-size: 1;
+  --vs-controls--deselect-text-shadow: 0 1px 0 #fff;
+
+  /* Selected */
+  --vs-selected-bg: #f0f0f0;
+  --vs-selected-color: #fff;
+  --vs-selected-border-color: var(--vs-border-color);
+  --vs-selected-border-style: var(--vs-border-style);
+  --vs-selected-border-width: var(--vs-border-width);
+
+  /* Dropdown */
+  --vs-dropdown-bg: #343434;
+  --vs-dropdown-color: inherit;
+  --vs-dropdown-z-index: 1000;
+  --vs-dropdown-min-width: 160px;
+  --vs-dropdown-max-height: 350px;
+  --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
+
+  /* Options */
+  --vs-dropdown-option-bg: #000;
+  --vs-dropdown-option-color: #fff;
+  --vs-dropdown-option-padding: 3px 20px;
+
+  /* Active State */
+  --vs-dropdown-option--active-bg: #5897fb;
+  --vs-dropdown-option--active-color: #fff;
+
+  /* Deselect State */
+  --vs-dropdown-option--deselect-bg: #fb5858;
+  --vs-dropdown-option--deselect-color: #fff;
+
+  /* Transitions */
+  --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
+  --vs-transition-duration: 150ms;
+}
diff --git a/docs/components/ApplicationHeader.vue b/docs/components/ApplicationHeader.vue
index 499f11a..b988989 100644
--- a/docs/components/ApplicationHeader.vue
+++ b/docs/components/ApplicationHeader.vue
@@ -72,7 +72,7 @@ const isScrolled = computed(() => y.value !== 0)
           <path
             class="fill-current fill-[#000] dark:fill-sky-50"
             fill-rule="evenodd"
-            d="M43.7221 18.025a2.2806 2.2806 0 0 1 1.6124.6682l6.8419 6.8419a2.2807 2.2807 0 0 1-3.2248 3.2248l-5.2295-5.2295-5.2295 5.2295a2.2807 2.2807 0 0 1-3.2248-3.2248l6.8419-6.8419a2.2806 2.2806 0 0 1 1.6124-.6682Zm-8.4543 21.1938a2.281 2.281 0 0 1 3.2248 0l5.2295 5.2295 5.2295-5.2295a2.2807 2.2807 0 0 1 3.2248 3.2248l-6.8419 6.8419a2.2804 2.2804 0 0 1-3.2248 0l-6.8419-6.8419a2.2806 2.2806 0 0 1 0-3.2248Z"
+            d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
             clip-rule="evenodd"
           />
         </svg>
diff --git a/docs/components/Hero.vue b/docs/components/Hero.vue
index 61e6058..54927a3 100644
--- a/docs/components/Hero.vue
+++ b/docs/components/Hero.vue
@@ -2,6 +2,11 @@
 import Button from '~/components/Button.vue'
 import TimelineSvg from '~/components/TimelineSvg.vue'
 import VueSelect from '~/components/VueSelect.vue'
+import {
+  SparklesIcon,
+  ArrowDownTrayIcon,
+  RocketLaunchIcon,
+} from '@heroicons/vue/20/solid'
 </script>
 
 <template>
@@ -15,6 +20,7 @@ import VueSelect from '~/components/VueSelect.vue'
         <div class="relative z-10 md:text-center lg:text-left">
           <img
             alt=""
+            aria-hidden="true"
             src="~/assets/img/blur-cyan.png"
             decoding="async"
             class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
@@ -82,10 +88,29 @@ import VueSelect from '~/components/VueSelect.vue'
               <div
                 class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
               ></div>
-              <div class="pl-4 pt-4">
-                <div class="mt-6 flex items-start px-1 text-sm">
-                  <VueSelect :options="['hello']" />
+              <div class="p-4 dark">
+                <div class="flex items-center space-x-4">
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <ArrowDownTrayIcon class="w-3 h-3 mr-1" />
+                    960k installs/month
+                  </span>
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <SparklesIcon class="w-3 h-3 mr-1" />
+                    4.5k stars
+                  </span>
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <RocketLaunchIcon class="w-3 h-3 mr-1" />
+                    Vue 3
+                  </span>
                 </div>
+
+                <VueSelect class="w-full mt-4" :options="['hello']" />
               </div>
             </div>
           </div>
@@ -94,3 +119,10 @@ import VueSelect from '~/components/VueSelect.vue'
     </div>
   </div>
 </template>
+
+<style scoped>
+.v-select {
+  --vs-border-color: rgba(125, 211, 252, 0.3);
+  --vs-actions-padding: 0.25rem 0.5rem;
+}
+</style>
diff --git a/docs/components/content/Lead.vue b/docs/components/content/Lead.vue
index 8937810..d549af3 100644
--- a/docs/components/content/Lead.vue
+++ b/docs/components/content/Lead.vue
@@ -1,3 +1,3 @@
 <template>
-  <p class="lead"><Markdown :use="$slots.default" unwrap="p" /></p>
+  <p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
 </template>
diff --git a/docs/components/content/QuickLink.vue b/docs/components/content/QuickLink.vue
index 4159ec6..6ee62ff 100644
--- a/docs/components/content/QuickLink.vue
+++ b/docs/components/content/QuickLink.vue
@@ -14,15 +14,15 @@ defineProps<{
       class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
     />
     <div class="relative overflow-hidden rounded-xl p-6">
-      <!--      <Icon :icon="icon" class="h-8 w-8" />-->
+      <slot name="icon" />
       <h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
-        <NuxtLink :href="href">
+        <NuxtLink :to="href">
           <span class="absolute -inset-px rounded-xl" />
           {{ title }}
         </NuxtLink>
       </h2>
       <p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
-        <Markdown :use="$slots.default" unwrap="p" />
+        <ContentSlot :use="$slots.default" unwrap="p" />
       </p>
     </div>
   </div>
diff --git a/docs/content/guide/install.md b/docs/content/guide/install.md
index f8eaeb7..8003315 100644
--- a/docs/content/guide/install.md
+++ b/docs/content/guide/install.md
@@ -27,7 +27,6 @@ app.component('vSelect', vSelect);
 ### Local Registration
 
 ```vue
-
 <script>
 import vSelect from 'vue-select'
 
@@ -41,6 +40,8 @@ export default {
 </template>
 ```
 
+### CSS
+
 The component itself does not include any CSS. You'll need to include it separately:
 
 ```js
@@ -62,8 +63,8 @@ global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS.
 <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
 
 <!-- or point to a specific vue-select release -->
-<script src="https://unpkg.com/vue-select@3.0.0"></script>
-<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
+<script src="https://unpkg.com/vue-select@4.0.0"></script>
+<link rel="stylesheet" href="https://unpkg.com/vue-select@4.0.0/dist/vue-select.css">
 ```
 
 Then register the component in your javascript:
@@ -79,7 +80,9 @@ url: dJjzeP
 
 ## Vue Compatibility
 
-| Vue  | Vue Select | Notes                                                                      |
-|------|------------|----------------------------------------------------------------------------|
-| ^2.3 | 3.x        | The 3.x branch of Vue Select supports Vue 2.3 and above. View the v3 docs. |
-| ^3.0 | 4.0-beta   | The latest version of Vue Select for Vue 3 applications.                   |
+You're currently reading the docs for version 4 of Vue Select, which is designed for Vue 3.
+
+| Vue  | Vue Select | Docs                      |
+|------|------------|---------------------------|
+| ^2.3 | 3.0        | https://v3.vue-select.org |
+| ^3.0 | 4.0        | https://vue-select.org    |
diff --git a/docs/content/index.md b/docs/content/index.md
index 2b33b1d..dc361ce 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -7,34 +7,56 @@ description: Everything you wish the HTML select element could do, shipped as a
 ---
 
 :::lead
-Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, extensible Vue component.
+Vue Select is a feature rich combobox component. You might know it as a dropdown or
+typeahead select. They're a staple on the web, and they're notoriously tough to get right!
 :::
 
+Vue Select provides a default template that fits most use cases. The component is designed
+to be as lightweight as possible, while maintaining high standards for accessibility, developer
+experience, and customization.
+
 :::quick-links
 
-:::quick-link{title="Installation" icon="installation" href="/"}
-Step-by-step guides to setting up your system and installing the library.
+:::quick-link{title="Installation" href="/guide/install"}
+Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
+
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+</svg>
 :::
 
-:::quick-link{title="Architecture guide" icon="presets" href="/"}
-Learn how the internals work and contribute.
-:::
+:::quick-link{title="Options and Selections" href="/"}
+You'll need to register some options so your users can select them.
 
-:::quick-link{title="Plugins" icon="plugins" href="/"}
-Extend the library with third-party plugins or write your own.
-:::
-
-:::quick-link{title="API reference" icon="theming" href="/"}
-Learn to easily customize and modify your app's visual design to fit your brand.
-:::
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
+</svg>
 
 :::
 
+:::quick-link{title="Customizing" href="/"}
+Vue Select is plug-and-play by design, but you can always customize the look and feel.
 
-Vue Select is a feature rich select/dropdown/typeahead component. It provides a default
-template that fits most use cases for a filterable select dropdown. The component is designed to be as
-lightweight as possible, while maintaining high standards for accessibility,
-developer experience, and customization.
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+</svg>
+:::
+
+:::quick-link{title="Premium Resources" icon="theming" href="/"}
+Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
+loading and more.
+
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+</svg>
+
+:::
+
+:::
 
 ## Features
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 5a9f4c5..3cb8081 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  css: ['~/assets/styles/fonts.css'],
+  css: ['~/assets/styles/fonts.css', '~/assets/styles/variables.css'],
 
   modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/content'],
 
diff --git a/docs/package.json b/docs/package.json
index 84addfc..dd39688 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.4",
     "@heroicons/vue": "^2.0.13",
-    "@vueuse/core": "^9.6.0"
+    "@vueuse/core": "^9.6.0",
+    "npm": "^9.2.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90c548f..839a0ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,7 @@ importers:
       '@nuxtjs/tailwindcss': ^6.1.3
       '@tailwindcss/typography': ^0.5.8
       '@vueuse/core': ^9.6.0
+      npm: ^9.2.0
       nuxt: 3.0.0
       prettier: ^2.8.1
       prettier-plugin-tailwindcss: ^0.2.0
@@ -78,6 +79,7 @@ importers:
       '@headlessui/vue': 1.7.4
       '@heroicons/vue': 2.0.13
       '@vueuse/core': 9.6.0
+      npm: 9.2.0
     devDependencies:
       '@nuxt/content': 2.2.2
       '@nuxtjs/color-mode': 3.2.0
@@ -1676,7 +1678,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.5_@types+node@18.11.11
+      vite: 3.2.5
       vue: 3.2.45
     dev: true
 
@@ -6727,6 +6729,81 @@ packages:
       - which
       - write-file-atomic
 
+  /npm/9.2.0:
+    resolution: {integrity: sha512-oypVdaWGHDuV79RXLvp+B9gh6gDyAmoHKrQ0/JBYTWWx5D8/+AAxFdZC84fSIiyDdyW4qfrSyYGKhekxDOaMXQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+    dev: false
+    bundledDependencies:
+      - '@isaacs/string-locale-compare'
+      - '@npmcli/arborist'
+      - '@npmcli/config'
+      - '@npmcli/map-workspaces'
+      - '@npmcli/package-json'
+      - '@npmcli/run-script'
+      - abbrev
+      - archy
+      - cacache
+      - chalk
+      - ci-info
+      - cli-columns
+      - cli-table3
+      - columnify
+      - fastest-levenshtein
+      - fs-minipass
+      - glob
+      - graceful-fs
+      - hosted-git-info
+      - ini
+      - init-package-json
+      - is-cidr
+      - json-parse-even-better-errors
+      - libnpmaccess
+      - libnpmdiff
+      - libnpmexec
+      - libnpmfund
+      - libnpmhook
+      - libnpmorg
+      - libnpmpack
+      - libnpmpublish
+      - libnpmsearch
+      - libnpmteam
+      - libnpmversion
+      - make-fetch-happen
+      - minimatch
+      - minipass
+      - minipass-pipeline
+      - mkdirp
+      - ms
+      - node-gyp
+      - nopt
+      - npm-audit-report
+      - npm-install-checks
+      - npm-package-arg
+      - npm-pick-manifest
+      - npm-profile
+      - npm-registry-fetch
+      - npm-user-validate
+      - npmlog
+      - p-map
+      - pacote
+      - parse-conflict-json
+      - proc-log
+      - qrcode-terminal
+      - read
+      - read-package-json
+      - read-package-json-fast
+      - rimraf
+      - semver
+      - ssri
+      - tar
+      - text-table
+      - tiny-relative-date
+      - treeverse
+      - validate-npm-package-name
+      - which
+      - write-file-atomic
+
   /npmlog/5.0.1:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
     dependencies: