From 5bd57ae8fad9d09d677ee16e72161865a1f10aea Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 16 Nov 2021 14:25:18 +0100
Subject: [PATCH] chore: put back components

---
 example/app.vue                               |   2 +-
 src/components/elements/Avatar.vue            | 165 +++++++
 src/components/elements/AvatarGroup.vue       |  53 +++
 src/components/elements/Badge.vue             |  72 +++
 src/components/{ => elements}/Button.vue      |   6 +-
 src/components/elements/Dropdown.vue          | 327 +++++++++++++
 src/components/{ => elements}/Icon.vue        |   0
 src/components/elements/Link.vue              |  44 ++
 src/components/elements/Toggle.vue            | 125 +++++
 src/components/feedback/Alert.vue             |  94 ++++
 src/components/forms/Checkbox.vue             | 103 ++++
 src/components/forms/Input.vue                | 253 ++++++++++
 src/components/forms/InputGroup.vue           |  61 +++
 src/components/forms/Radio.vue                |  89 ++++
 src/components/forms/RadioGroup.vue           |  65 +++
 src/components/forms/Select.vue               | 214 +++++++++
 src/components/forms/SelectCustom.vue         | 445 ++++++++++++++++++
 src/components/forms/Textarea.vue             | 158 +++++++
 src/components/layout/Card.vue                |  90 ++++
 src/components/layout/Container.vue           |  20 +
 src/components/navigation/Pills.vue           |  59 +++
 src/components/navigation/Tabs.vue            |  34 ++
 .../navigation/VerticalNavigation.vue         | 117 +++++
 src/components/overlays/Modal.vue             | 176 +++++++
 src/components/overlays/Notification.vue      | 187 ++++++++
 src/components/overlays/Popover.vue           | 213 +++++++++
 src/components/overlays/Slideover.vue         | 207 ++++++++
 src/components/overlays/Tooltip.vue           | 156 ++++++
 src/index.ts                                  |  23 +-
 29 files changed, 3551 insertions(+), 7 deletions(-)
 create mode 100644 src/components/elements/Avatar.vue
 create mode 100644 src/components/elements/AvatarGroup.vue
 create mode 100644 src/components/elements/Badge.vue
 rename src/components/{ => elements}/Button.vue (99%)
 create mode 100644 src/components/elements/Dropdown.vue
 rename src/components/{ => elements}/Icon.vue (100%)
 create mode 100644 src/components/elements/Link.vue
 create mode 100644 src/components/elements/Toggle.vue
 create mode 100644 src/components/feedback/Alert.vue
 create mode 100644 src/components/forms/Checkbox.vue
 create mode 100644 src/components/forms/Input.vue
 create mode 100644 src/components/forms/InputGroup.vue
 create mode 100644 src/components/forms/Radio.vue
 create mode 100644 src/components/forms/RadioGroup.vue
 create mode 100644 src/components/forms/Select.vue
 create mode 100644 src/components/forms/SelectCustom.vue
 create mode 100644 src/components/forms/Textarea.vue
 create mode 100644 src/components/layout/Card.vue
 create mode 100644 src/components/layout/Container.vue
 create mode 100644 src/components/navigation/Pills.vue
 create mode 100644 src/components/navigation/Tabs.vue
 create mode 100644 src/components/navigation/VerticalNavigation.vue
 create mode 100644 src/components/overlays/Modal.vue
 create mode 100644 src/components/overlays/Notification.vue
 create mode 100644 src/components/overlays/Popover.vue
 create mode 100644 src/components/overlays/Slideover.vue
 create mode 100644 src/components/overlays/Tooltip.vue

diff --git a/example/app.vue b/example/app.vue
index f0424a63..21857c86 100644
--- a/example/app.vue
+++ b/example/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mx-auto max-w-80em">
     Welcome
     <NuButton class="ml-3" variant="primary" icon="heroicons-outline:check-circle">
       toto
diff --git a/src/components/elements/Avatar.vue b/src/components/elements/Avatar.vue
new file mode 100644
index 00000000..c91aa45e
--- /dev/null
+++ b/src/components/elements/Avatar.vue
@@ -0,0 +1,165 @@
+<template>
+  <span class="relative inline-flex items-center justify-center overflow-hidden" :class="avatarClass" @click="goto">
+    <img v-if="url" :src="url" :alt="alt" :class="roundedClass" />
+    <span v-else-if="gradientPlaceholder" class="w-full h-full" v-html="gradientPlaceholder" />
+    <span
+      v-else-if="placeholder"
+      class="font-bold leading-none text-white uppercase"
+    >{{ placeholder }}</span>
+    <span
+      v-else-if="text"
+      class="leading-snug"
+    >{{ text }}</span>
+    <svg
+      v-else
+      class="w-full h-full text-tw-gray-300"
+      :class="roundedClass"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+
+    <span
+      v-if="status"
+      class="absolute top-0 right-0 block rounded-full ring-1 ring-white dark:ring-gray-900"
+      :class="statusClass"
+    />
+  </span>
+</template>
+
+<script>
+import avatar from 'gradient-avatar'
+
+export default {
+  props: {
+    src: {
+      type: [String, Boolean],
+      default: null
+    },
+    text: {
+      type: String,
+      default: null
+    },
+    alt: {
+      type: String,
+      default: null
+    },
+    to: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value)
+      }
+    },
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String,
+      default: null,
+      validator (value) {
+        return ['online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
+      }
+    }
+  },
+  computed: {
+    url () {
+      if (typeof this.src === 'boolean') {
+        return null
+      }
+      return this.src
+    },
+    placeholder () {
+      if (!this.alt) {
+        return
+      }
+
+      return this.alt.split(' ').map(word => word.charAt(0)).join('')
+    },
+    gradientPlaceholder () {
+      if (!this.gradient) {
+        return
+      }
+
+      return avatar(this.alt || new Date().toString())
+    },
+    sizeClass () {
+      return ({
+        xxxs: 'h-4 w-4 text-xs',
+        xxs: 'h-5 w-5 text-xs',
+        xs: 'h-6 w-6 text-xs',
+        sm: 'h-8 w-8 text-sm',
+        md: 'h-10 w-10 text-md',
+        lg: 'h-12 w-12 text-lg',
+        xl: 'h-14 w-14 text-xl',
+        '2xl': 'h-16 w-16 text-2xl',
+        '3xl': 'h-20 w-20 text-3xl'
+      })[this.size]
+    },
+    roundedClass () {
+      return ({
+        true: 'rounded-lg',
+        false: 'rounded-full'
+      })[this.rounded]
+    },
+    placeholderClass () {
+      return ({
+        true: 'bg-tw-white',
+        false: 'bg-tw-gray-100'
+      })[!!this.alt]
+    },
+    avatarClass () {
+      return [
+        this.sizeClass,
+        this.roundedClass,
+        this.placeholderClass,
+        this.to ? 'cursor-pointer' : ''
+      ].join(' ')
+    },
+    statusClass () {
+      return [
+        ({
+          online: 'bg-green-400',
+          idle: 'bg-yellow-400',
+          invisible: 'bg-tw-gray-300',
+          donotdisturb: 'bg-red-400',
+          focus: 'bg-primary-500'
+        })[this.status],
+        ({
+          xxxs: 'h-1 w-1',
+          xxs: 'h-1 w-1',
+          xs: 'h-1.5 w-1.5',
+          sm: 'h-2 w-2',
+          md: 'h-2.5 w-2.5',
+          lg: 'h-3 w-3',
+          xl: 'h-3.5 w-3.5',
+          '2xl': 'h-3.5 w-3.5',
+          '3xl': 'h-4 w-4'
+        })[this.size],
+        ({
+          true: 'transform -translate-y-1/2 translate-x-1/2'
+        })[this.rounded]
+      ].join(' ')
+    }
+  },
+  methods: {
+    goto (e) {
+      if (!this.to || !this.$router) { return }
+      e.preventDefault()
+      this.$router.push(this.to)
+    }
+  }
+}
+</script>
diff --git a/src/components/elements/AvatarGroup.vue b/src/components/elements/AvatarGroup.vue
new file mode 100644
index 00000000..adeee098
--- /dev/null
+++ b/src/components/elements/AvatarGroup.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="flex">
+    <TwAvatar
+      v-for="(avatar, index) of displayedGroup"
+      :key="index"
+      :src="avatar.src"
+      class="shadow-solid -ml-1.5 first:ml-0"
+      :size="size"
+      :status="avatar.status"
+    />
+    <TwAvatar
+      v-if="remainingGroupSize > 0"
+      class="shadow-solid -ml-1.5 first:ml-0 text-[10px]"
+      :size="size"
+      :text="`+${remainingGroupSize}`"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    max: {
+      type: Number,
+      default: null
+    }
+  },
+  computed: {
+    displayedGroup () {
+      if (!this.max) { return this.group }
+
+      return this.group.slice(0, this.max)
+    },
+    remainingGroupSize () {
+      if (!this.max) { return 0 }
+
+      return this.group.length - this.max
+    }
+
+  }
+}
+</script>
diff --git a/src/components/elements/Badge.vue b/src/components/elements/Badge.vue
new file mode 100644
index 00000000..016c52b7
--- /dev/null
+++ b/src/components/elements/Badge.vue
@@ -0,0 +1,72 @@
+<template>
+  <span class="inline-flex items-center font-medium" :class="badgeClass">
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['sm', 'md', 'lg'].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+      validator (value) {
+        return ['primary', 'gray', 'red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink', 'gradient'].includes(value)
+      }
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizeClass () {
+      return ({
+        sm: 'text-xs px-2 py-0.5',
+        md: 'text-sm px-2.5 py-0.5 leading-4',
+        lg: 'text-sm px-3 py-0.5 leading-5'
+      })[this.size]
+    },
+    variantClass () {
+      return ({
+        primary: 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-100',
+        gray: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100',
+        red: 'bg-red-100 dark:bg-red-700 text-red-800 dark:text-red-100',
+        orange: 'bg-orange-100 dark:bg-orange-700 text-orange-800 dark:text-orange-100',
+        yellow: 'bg-yellow-100 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-100',
+        green: 'bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100',
+        teal: 'bg-teal-100 dark:bg-teal-700 text-teal-800 dark:text-teal-100',
+        blue: 'bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100',
+        indigo: 'bg-indigo-100 dark:bg-indigo-700 text-indigo-800 dark:text-indigo-100',
+        purple: 'bg-purple-100 dark:bg-purple-700 text-purple-800 dark:text-purple-100',
+        pink: 'bg-pink-100 dark:bg-pink-700 text-pink-800 dark:text-pink-100',
+        gradient: 'bg-gradient-to-r from-indigo-600 to-blue-600 text-white'
+      })[this.variant]
+    },
+    roundedClass () {
+      return ({
+        false: 'rounded',
+        true: 'rounded-full'
+      })[this.pill]
+    },
+    badgeClass () {
+      return [
+        this.sizeClass,
+        this.variantClass,
+        this.roundedClass
+      ].join(' ')
+    }
+  }
+}
+</script>
diff --git a/src/components/Button.vue b/src/components/elements/Button.vue
similarity index 99%
rename from src/components/Button.vue
rename to src/components/elements/Button.vue
index 78071e62..8cec3762 100644
--- a/src/components/Button.vue
+++ b/src/components/elements/Button.vue
@@ -12,12 +12,10 @@
 </template>
 
 <script>
-import Icon from './Icon'
+import Icon from '../elements/icon'
 
 export default {
-  components: {
-    Icon
-  },
+  components: { Icon },
   props: {
     type: {
       type: String,
diff --git a/src/components/elements/Dropdown.vue b/src/components/elements/Dropdown.vue
new file mode 100644
index 00000000..c0d762ee
--- /dev/null
+++ b/src/components/elements/Dropdown.vue
@@ -0,0 +1,327 @@
+<template>
+  <div
+    ref="container"
+    v-on-clickaway="close"
+    :class="typeof wrapperClass === 'string' ? wrapperClass : 'relative inline-block text-left'"
+    @keydown.escape="open = false"
+    @mouseover="mode === 'hover' ? mouseover() : () => {}"
+    @mouseleave="mode === 'hover' ? mouseleave() : () => {}"
+  >
+    <div class="flex items-center">
+      <slot name="trigger" :toggle="toggle" :open="open">
+        <TwButton
+          :variant="variant"
+          :size="size"
+          :label="label"
+          :icon="icon"
+          :rounded="rounded"
+          :square="square"
+          :loading="loading"
+          :disabled="disabled"
+          :custom-class="customClass"
+          :icon-class="iconClass"
+          trailing
+          @click.native="toggle"
+        >
+          <slot />
+        </TwButton>
+      </slot>
+    </div>
+
+    <transition
+      appear
+      enter-class="transform scale-95 opacity-0"
+      enter-active-class="transition duration-100 ease-out"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <div
+        v-show="open && (links.length || $slots.header || $scopedSlots.header)"
+        ref="tooltip"
+        :class="[
+          dropdownClass,
+          mode === 'hover' && 'pt-2'
+        ]"
+        class="z-30 rounded-md shadow-lg"
+      >
+        <div
+          class="overflow-y-auto bg-white divide-y divide-gray-100 rounded-md ring-1 ring-gray-200 dark:ring-gray-700 dark:divide-gray-700"
+          :class="[
+            dropdownMenuClass,
+            darken ? 'dark:bg-gray-900' : 'dark:bg-gray-800'
+          ]"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <slot name="header" />
+          <div v-if="links.length" class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div v-for="(items, index) of links" :key="index" class="py-1">
+              <div
+                v-for="(link, i) of items"
+                :key="i"
+                role="menuitem"
+                @click="!link.disabled ? click(link) : (() => {})()"
+              >
+                <component
+                  :is="(link.to && 'NuxtLink') || (link.href && 'a') || 'div'"
+                  :to="link.to"
+                  :href="link.href"
+                  :target="link.target"
+                  :class="[
+                    link.click || (link.to || link.href) ? 'cursor-pointer hover:text-tw-gray-900 focus:text-tw-gray-900 hover:bg-tw-gray-100 focus:bg-tw-gray-100' : '',
+                    link.active ? 'bg-tw-gray-100' : '',
+                    !link.disabled ? 'text-tw-gray-600' : 'text-tw-gray-400 cursor-not-allowed',
+                    size === 'md' ? 'px-4 py-2' : 'px-3 py-1.5',
+                    customLinkClass,
+                    link.customClass
+                  ]"
+                  class="flex items-center justify-between space-x-3 text-sm group focus:outline-none"
+                >
+                  <slot name="link" :link="link">
+                    <div class="flex items-center flex-1 truncate" :class="{ 'flex-row-reverse justify-between': link.reverse, 'gap-3': size === 'md', 'gap-2': size !== 'md' }">
+                      <Icon
+                        v-if="link.icon"
+                        :name="link.icon"
+                        :class="[
+                          !link.disabled ? 'group-hover:text-tw-gray-500 group-focus:text-tw-gray-500' : '',
+                          size === 'md' ? 'h-5 w-5' : 'h-4 w-4',
+                          link.customIconClass
+                        ]"
+                        class="flex-shrink-0 text-tw-gray-400"
+                      />
+                      <TwAvatar
+                        v-if="link.avatar"
+                        :src="link.avatar"
+                        :alt="link.label"
+                        :gradient="link.gradient"
+                        size="xxs"
+                      />
+                      <span class="truncate">{{ link.label }}</span>
+                    </div>
+
+                    <div
+                      v-if="link.shortcuts && link.shortcuts.length && $mq !== 'xs'"
+                      class="flex items-center flex-shrink-0 ml-1 space-x-1 text-xs font-bold text-tw-gray-400"
+                    >
+                      <div v-for="(shortcut, j) of link.shortcuts" :key="j">
+                        <span>
+                          {{ shortcut }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <span
+                      v-if="link.unread"
+                      class="flex-shrink-0 block w-2 h-2 p-1 mr-1 rounded-full opacity-75 bg-primary-600 dark:bg-white animate-pulse"
+                    />
+                  </slot>
+
+                  <slot v-if="link.slot" :name="link.slot" />
+                </component>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+import { directive as onClickaway } from 'vue-clickaway'
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  directives: {
+    onClickaway
+  },
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'solid/chevron-down'
+    },
+    links: {
+      type: Array,
+      default: () => []
+    },
+    variant: {
+      type: String,
+      default: 'white'
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    mode: {
+      type: String,
+      default: 'click',
+      validator (value) {
+        return ['click', 'hover'].includes(value)
+      }
+    },
+    placement: {
+      type: String,
+      default: 'bottom-end'
+    },
+    strategy: {
+      type: String,
+      default: 'absolute'
+    },
+    wrapperClass: {
+      type: String,
+      default: null
+    },
+    iconClass: {
+      type: String,
+      default: null
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    customLinkClass: {
+      type: String,
+      default: null
+    },
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    square: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    darken: {
+      type: Boolean,
+      default: false
+    },
+    dropdownClass: {
+      type: String,
+      default: 'w-48'
+    },
+    dropdownMenuClass: {
+      type: String,
+      default: 'max-h-56'
+    },
+    openDelay: {
+      type: Number,
+      default: 100
+    },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
+    preventOverflow: {
+      type: Number,
+      default: 8
+    }
+  },
+  data () {
+    return {
+      open: false,
+      instance: null,
+      openTimeout: null,
+      closeTimeout: null
+    }
+  },
+  watch: {
+    disabled (value) {
+      if (value && open) { this.close() }
+    },
+    open (value) {
+      if (!value) {
+        return
+      }
+
+      if (this.instance) {
+        this.instance.destroy()
+        this.instance = null
+      }
+
+      this.instance = createPopper(this.$refs.container, this.$refs.tooltip, {
+        strategy: this.strategy,
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: this.mode === 'click' ? [0, 8] : 0
+            }
+          },
+          {
+            name: 'computeStyles',
+            options: {
+              gpuAcceleration: false,
+              adaptive: false
+            }
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: this.preventOverflow
+            }
+          }
+        ]
+      })
+    }
+  },
+  beforeDestroy () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+  },
+  methods: {
+    click (link) {
+      if (link.click) {
+        link.click()
+      }
+      if (link.click || link.to) {
+        this.toggle()
+      }
+    },
+    mouseover () {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+      this.openTimeout = this.openTimeout || setTimeout(() => {
+        this.open = true
+        this.openTimeout = null
+      }, this.openDelay)
+    },
+    mouseleave () {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+      this.closeTimeout = this.closeTimeout || setTimeout(() => {
+        this.close()
+        this.closeTimeout = null
+      }, this.closeDelay)
+    },
+    toggle () {
+      this.open = !this.open
+    },
+    close () {
+      this.open = false
+    }
+  }
+}
+</script>
diff --git a/src/components/Icon.vue b/src/components/elements/Icon.vue
similarity index 100%
rename from src/components/Icon.vue
rename to src/components/elements/Icon.vue
diff --git a/src/components/elements/Link.vue b/src/components/elements/Link.vue
new file mode 100644
index 00000000..3436273a
--- /dev/null
+++ b/src/components/elements/Link.vue
@@ -0,0 +1,44 @@
+<template>
+  <NuxtLink v-slot="{ href, navigate }" v-bind="$props" custom>
+    <a
+      v-bind="$attrs"
+      :href="href"
+      :class="isActive ? activeClass : inactiveClass"
+      v-on="$listeners"
+      @click="navigate"
+    >
+      <slot v-bind="{ isActive }" />
+    </a>
+  </NuxtLink>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+const RouterLink = Vue.component('RouterLink')
+
+export default {
+  name: 'Link',
+  props: {
+    // @ts-ignore
+    ...RouterLink.options.props,
+    inactiveClass: {
+      type: String,
+      default: ''
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isActive () {
+      if (!this.exact) {
+        return !!this.$route.path.startsWith(this.to)
+      } else {
+        return this.$route.path === this.to || this.$route.path === `${this.to}/`
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/elements/Toggle.vue b/src/components/elements/Toggle.vue
new file mode 100644
index 00000000..af352c1d
--- /dev/null
+++ b/src/components/elements/Toggle.vue
@@ -0,0 +1,125 @@
+<template>
+  <div
+    class="inline-flex items-center"
+    :class="wrapperClass"
+  >
+    <span
+      v-if="textLeading"
+      :class="textClass"
+    >{{ textLeading }}</span>
+    <button
+      v-if="!short"
+      type="button"
+      aria-pressed="false"
+      :class="value ? 'bg-primary-600' : 'bg-tw-gray-200'"
+      class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none"
+      @click="onClick"
+    >
+      <span
+        aria-hidden="true"
+        :class="value ? 'translate-x-5 text-primary-600' : 'translate-x-0 text-tw-gray-400'"
+        class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+      >
+        <Icon v-if="icon" :name="value ? icon : (iconOff ? iconOff : icon)" class="w-3 h-3" />
+      </span>
+    </button>
+    <button
+      v-else
+      type="button"
+      aria-pressed="false"
+      class="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none"
+      @click="onClick"
+    >
+      <span
+        aria-hidden="true"
+        :class="value ? 'bg-primary-600' : 'bg-tw-gray-200'"
+        class="absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
+      />
+      <span
+        aria-hidden="true"
+        :class="value ? 'translate-x-5 text-primary-600' : 'translate-x-0 text-tw-gray-400'"
+        class="absolute left-0 flex items-center justify-center h-5 w-5 border border-tw-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200"
+      >
+        <Icon v-if="icon" :name="value ? icon : (iconOff ? iconOff : icon)" class="w-3 h-3" />
+      </span>
+    </button>
+    <span
+      v-if="textTrailing"
+      :class="textClass"
+    >{{ textTrailing }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    iconOff: {
+      type: String,
+      default: ''
+    },
+    short: {
+      type: Boolean,
+      default: false
+    },
+    textLeading: {
+      type: String,
+      default: ''
+    },
+    textTrailing: {
+      type: String,
+      default: ''
+    },
+    textHighlight: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    }
+  },
+  computed: {
+    wrapperClass () {
+      return ({
+        xs: 'space-x-2',
+        sm: 'space-x-3',
+        md: 'space-x-3',
+        lg: 'space-x-3',
+        xl: 'space-x-3'
+      })[this.size]
+    },
+    textClass () {
+      return [
+        ({
+          xs: 'text-xs',
+          sm: 'text-sm',
+          md: 'text-sm',
+          lg: 'text-base',
+          xl: 'text-base'
+        })[this.size],
+        this.textHighlight && this.value ? 'text-primary-600' : 'text-tw-gray-900',
+        'font-medium'
+      ].join(' ')
+    }
+  },
+  methods: {
+    onClick () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>
diff --git a/src/components/feedback/Alert.vue b/src/components/feedback/Alert.vue
new file mode 100644
index 00000000..1935762f
--- /dev/null
+++ b/src/components/feedback/Alert.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="rounded-md p-4" :class="variantClass">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <Icon :name="iconName" :class="iconClass" class="h-5 w-5" />
+      </div>
+      <div class="ml-3 flex-1 md:flex md:justify-between">
+        <p v-if="title" class="text-sm leading-5" :class="titleClass">
+          {{ title }}
+        </p>
+        <p v-if="link" class="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
+          <NuxtLink
+            :to="to"
+            class="whitespace-nowrap font-medium"
+            :class="linkClass"
+          >
+            {{ link }} &rarr;
+          </NuxtLink>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    variant: {
+      type: String,
+      default: 'info',
+      validator (value) {
+        return ['info', 'warning', 'error', 'success'].includes(value)
+      }
+    },
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    link: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    iconName () {
+      return ({
+        info: 'solid/information-circle',
+        warning: 'solid/exclamation',
+        error: 'solid/x-circle',
+        success: 'solid/check-circle'
+      })[this.variant]
+    },
+    variantClass () {
+      return ({
+        info: 'bg-blue-50',
+        warning: 'bg-orange-50',
+        error: 'bg-red-50',
+        success: 'bg-green-50'
+      })[this.variant]
+    },
+    iconClass () {
+      return ({
+        info: 'text-blue-400',
+        warning: 'text-orange-400',
+        error: 'text-red-400',
+        success: 'text-green-400'
+      })[this.variant]
+    },
+    titleClass () {
+      return ({
+        info: 'text-blue-700',
+        warning: 'text-orange-700',
+        error: 'text-red-700',
+        success: 'text-green-700'
+      })[this.variant]
+    },
+    linkClass () {
+      return ({
+        info: 'text-blue-700 hover:text-blue-600',
+        warning: 'text-orange-700 hover:text-orange-600',
+        error: 'text-red-700 hover:text-red-600',
+        success: 'text-green-700 hover:text-green-600'
+      })[this.variant]
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/Checkbox.vue b/src/components/forms/Checkbox.vue
new file mode 100644
index 00000000..eb9057a4
--- /dev/null
+++ b/src/components/forms/Checkbox.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="relative flex" :class="{ 'items-start': label, 'items-center': !label }">
+    <div class="flex items-center h-5">
+      <input
+        :id="name"
+        :checked="isChecked"
+        :name="name"
+        :required="required"
+        :value="value"
+        :disabled="disabled"
+        type="checkbox"
+        :class="inputClass"
+        @focus="focused = true"
+        @blur="focused = false"
+        @change="onChange"
+      />
+    </div>
+    <div v-if="label" class="ml-3 text-sm">
+      <label :for="name" class="font-medium text-tw-gray-700">
+        {{ label }}
+        <span v-if="required" class="text-red-400">*</span>
+      </label>
+      <p v-if="help" class="text-tw-gray-500">{{ help }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    checked: {
+      type: [Array, Boolean],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    baseClass: {
+      type: String,
+      default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 border-tw-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      focused: false
+    }
+  },
+  computed: {
+    isChecked () {
+      return Array.isArray(this.checked) ? this.checked.includes(this.value) : this.checked
+    },
+    inputClass () {
+      return [
+        this.baseClass,
+        this.customClass
+      ].join(' ')
+    }
+  },
+  methods: {
+    onChange () {
+      // We check if we have validation error and clean it as the user as typed a new value
+      if (this.newValidation) { this.newValidation = null }
+
+      if (!Array.isArray(this.checked)) { return this.$emit('change', !this.checked) }
+
+      if (this.checked.includes(this.value)) { this.$emit('change', this.checked.filter(c => c !== this.value)) } else { this.$emit('change', this.checked.concat(this.value)) }
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/Input.vue b/src/components/forms/Input.vue
new file mode 100644
index 00000000..03e1919f
--- /dev/null
+++ b/src/components/forms/Input.vue
@@ -0,0 +1,253 @@
+<template>
+  <div :class="wrapperClass">
+    <div
+      v-if="isLeading"
+      class="absolute inset-y-0 left-0 flex items-center pointer-events-none"
+    >
+      <Icon
+        :name="iconName"
+        class="text-tw-gray-400"
+        :class="iconClass"
+      />
+    </div>
+    <input
+      :id="name"
+      ref="input"
+      v-focus="autofocus"
+      :name="name"
+      :value="value"
+      :type="type"
+      :required="required"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :autocomplete="autocomplete"
+      :spellcheck="spellcheck"
+      :class="inputClass"
+      @input="updateValue($event.target.value)"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+    >
+    <slot />
+    <div
+      v-if="isTrailing"
+      class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
+    >
+      <Icon
+        :name="iconName"
+        class="text-tw-gray-400"
+        :class="iconClass"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Focus from '../../directives/focus'
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  directives: {
+    focus: Focus
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    spellcheck: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full bg-tw-white disabled:cursor-not-allowed disabled:bg-tw-gray-50'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'none', 'empty'].includes(value)
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    sizeClass () {
+      return ({
+        xxs: 'text-xs',
+        xs: 'text-xs',
+        sm: 'text-sm leading-4',
+        md: 'text-sm',
+        lg: 'text-base',
+        xl: 'text-base'
+      })[this.size]
+    },
+    paddingClass () {
+      return ({
+        xxs: 'px-1 py-0.5',
+        xs: 'px-2.5 py-1.5',
+        sm: 'px-3 py-2',
+        md: 'px-4 py-2',
+        lg: 'px-4 py-2',
+        xl: 'px-6 py-3'
+      })[this.size]
+    },
+    appearanceClass () {
+      return ({
+        default: 'focus:ring-primary-500 focus:border-primary-500 border-tw-gray-300 rounded-md',
+        none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none',
+        empty: ''
+      })[this.appearance]
+    },
+    paddingIconClass () {
+      return [
+        this.isLeading && ({
+          xxs: 'pl-7',
+          xs: 'pl-7',
+          sm: 'pl-10',
+          md: 'pl-10',
+          lg: 'pl-10',
+          xl: 'pl-10'
+        })[this.size],
+        this.isTrailing && ({
+          xxs: 'pr-10',
+          xs: 'pr-10',
+          sm: 'pr-10',
+          md: 'pr-10',
+          lg: 'pr-10',
+          xl: 'pr-10'
+        })[this.size]
+      ].join(' ')
+    },
+    inputClass () {
+      return [
+        this.baseClass,
+        this.sizeClass,
+        this.paddingClass,
+        this.paddingIconClass,
+        this.appearanceClass,
+        this.customClass
+      ].join(' ')
+    },
+    wrapperClass () {
+      return [
+        'relative',
+        this.appearance !== 'none' ? 'shadow-sm' : ''
+      ].filter(Boolean).join(' ')
+    },
+    isLeading () {
+      return (this.icon && this.leading) || (this.icon && !this.trailing) || (this.loading && !this.trailing)
+    },
+    isTrailing () {
+      return (this.icon && this.trailing) || (this.loading && this.trailing)
+    },
+    iconName () {
+      if (this.loading) {
+        return this.loadingIcon || 'custom/loading'
+      }
+
+      return this.icon
+    },
+    iconClass () {
+      return [
+        ({
+          xxs: 'h-3 w-3',
+          xs: 'h-4 w-4',
+          sm: 'h-5 w-5',
+          md: 'h-5 w-5',
+          lg: 'h-5 w-5',
+          xl: 'h-5 w-5'
+        })[this.size || 'sm'],
+        this.isLeading && ({
+          xxs: 'ml-2',
+          xs: 'ml-2',
+          sm: 'ml-3',
+          md: 'ml-3',
+          lg: 'ml-3',
+          xl: 'ml-3'
+        })[this.size || 'sm'],
+        this.isTrailing && ({
+          xxs: 'mr-2',
+          xs: 'mr-2',
+          sm: 'mr-3',
+          md: 'mr-3',
+          lg: 'mr-3',
+          xl: 'mr-3'
+        })[this.size || 'sm'],
+        ({
+          true: 'animate-spin'
+        })[this.loading]
+      ]
+    }
+  },
+  methods: {
+    updateValue (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/InputGroup.vue b/src/components/forms/InputGroup.vue
new file mode 100644
index 00000000..0c2ee028
--- /dev/null
+++ b/src/components/forms/InputGroup.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
+  >
+    <slot name="label">
+      <div :class="{ 'flex content-center justify-between': !inline }">
+        <label
+          v-if="label"
+          :for="name"
+          class="block text-sm font-medium leading-5 text-tw-gray-700"
+          :class="{'sm:mt-px sm:pt-2': inline }"
+        >
+          {{ label }}
+          <span v-if="required" class="text-red-400">*</span>
+        </label>
+        <span
+          v-if="$slots.hint || hint"
+          class="text-sm leading-5 text-tw-gray-500"
+          :class="{ 'mt-1 max-w-2xl': inline }"
+        ><slot name="hint">{{ hint }}</slot></span>
+      </div>
+    </slot>
+    <div
+      :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
+    >
+      <slot />
+      <p v-if="help" class="mt-2 text-sm text-tw-gray-500">{{ help }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    hint: {
+      type: String,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/Radio.vue b/src/components/forms/Radio.vue
new file mode 100644
index 00000000..1a3bfa14
--- /dev/null
+++ b/src/components/forms/Radio.vue
@@ -0,0 +1,89 @@
+<template>
+  <label :for="`${name}-${value}`" class="relative flex cursor-pointer">
+    <input
+      :id="`${name}-${value}`"
+      :checked="checked"
+      :name="name"
+      :required="required"
+      :value="value"
+      :disabled="disabled"
+      type="radio"
+      :class="inputClass"
+      @focus="focused = true"
+      @blur="focused = false"
+      @change="onChange"
+    />
+    <div v-if="label" class="flex flex-col ml-3">
+      <span class="block text-sm font-medium text-tw-gray-900">
+        {{ label }}
+        <span v-if="required" class="text-red-400">*</span>
+      </span>
+      <span v-if="help" class="block text-sm text-tw-gray-500">{{ help }}</span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    checked: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    baseClass: {
+      type: String,
+      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 border-tw-gray-300 bg-tw-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      focused: false
+    }
+  },
+  computed: {
+    inputClass () {
+      return [
+        this.baseClass,
+        this.customClass
+      ].join(' ')
+    }
+  },
+  methods: {
+    onChange () {
+      this.$emit('change', this.value)
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/RadioGroup.vue b/src/components/forms/RadioGroup.vue
new file mode 100644
index 00000000..fd8509d8
--- /dev/null
+++ b/src/components/forms/RadioGroup.vue
@@ -0,0 +1,65 @@
+<template>
+  <fieldset :id="name">
+    <legend v-if="label" class="sr-only">{{ label }}</legend>
+
+    <div :class="wrapperClass">
+      <TwRadio
+        v-for="(option, index) in options"
+        :key="index"
+        :checked="option.value === value"
+        :disabled="disabled"
+        :name="name"
+        v-bind="option"
+        :class="inputClass"
+        @change="onChange"
+      />
+    </div>
+  </fieldset>
+</template>
+
+<script>
+export default {
+  model: {
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    options: {
+      type: [Array],
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    wrapperClass: {
+      type: String,
+      default: null
+    },
+    inputClass: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/Select.vue b/src/components/forms/Select.vue
new file mode 100644
index 00000000..bef83c43
--- /dev/null
+++ b/src/components/forms/Select.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="relative" :class="wrapperClass">
+    <select
+      :id="name"
+      :name="name"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="selectClass"
+      @input="updateValue($event.target.value)"
+    >
+      <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
+        <optgroup
+          v-if="option.children"
+          :key="`${option[valueAttribute]}-optgroup-${index}`"
+          :value="option[valueAttribute]"
+          :label="option[textAttribute]"
+        >
+          <option
+            v-for="(childOption, index2) in option.children"
+            :key="`${childOption[valueAttribute]}-${index}-${index2}`"
+            :value="childOption[valueAttribute]"
+            :selected="childOption[valueAttribute] === normalizedValue"
+            v-text="childOption[textAttribute]"
+          />
+        </optgroup>
+        <option
+          v-else
+          :key="`${option[valueAttribute]}-${index}`"
+          :value="option[valueAttribute]"
+          :selected="option[valueAttribute] === normalizedValue"
+          v-text="option[textAttribute]"
+        />
+      </template>
+    </select>
+    <div v-if="icon" class="absolute inset-y-0 left-0 flex items-center pointer-events-none" :class="iconPadding">
+      <Icon :name="icon" :class="iconClass" />
+    </div>
+  </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    value: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full disabled:cursor-not-allowed bg-tw-white disabled:bg-tw-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border-tw-gray-300 rounded-md'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    noShadow: {
+      type: Boolean,
+      default: false
+    },
+    textAttribute: {
+      type: String,
+      default: 'text'
+    },
+    valueAttribute: {
+      type: String,
+      default: 'value'
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizeClass () {
+      return {
+        xxs: 'text-xs',
+        xs: 'text-xs',
+        sm: 'text-sm leading-4',
+        md: 'text-sm',
+        lg: 'text-base',
+        xl: 'text-base'
+      }[this.size]
+    },
+    paddingClass () {
+      return ({
+        xxs: `${this.icon ? 'pl-7' : 'pl-2'} pr-7 py-1.5`,
+        xs: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-1.5`,
+        sm: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-2`,
+        md: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
+        lg: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
+        xl: `${this.icon ? 'pl-12' : 'pl-4'} pr-12 py-3`
+      })[this.size]
+    },
+    iconClass () {
+      return ({
+        xxs: 'w-3 h-3',
+        xs: 'w-4 h-4',
+        sm: 'w-4 h-4',
+        md: 'w-5 h-5',
+        lg: 'w-5 h-5',
+        xl: 'w-5 h-5'
+      })[this.size]
+    },
+    iconPadding () {
+      return ({
+        xxs: 'pl-3',
+        xs: 'pl-3',
+        sm: 'pl-3',
+        md: 'pl-3',
+        lg: 'pl-3',
+        xl: 'pl-4'
+      })[this.size]
+    },
+    selectClass () {
+      return [
+        this.baseClass,
+        this.customClass,
+        this.sizeClass,
+        this.paddingClass
+      ].join(' ')
+    },
+    wrapperClass () {
+      return [
+        'relative',
+        'rounded-md',
+        !this.noShadow ? 'shadow-sm' : ''
+      ].filter(Boolean).join(' ')
+    },
+    normalizedOptions () {
+      return this.options.map(option => this.normalizeOption(option))
+    },
+    normalizedOptionsWithPlaceholder () {
+      if (!this.placeholder) {
+        return this.normalizedOptions
+      }
+      const { normalizedOptions } = this
+      normalizedOptions.unshift({
+        [this.valueAttribute]: null,
+        [this.textAttribute]: this.placeholder
+      })
+      return normalizedOptions
+    },
+    normalizedValue () {
+      const foundOption = this.normalizedOptionsWithPlaceholder.find(option => option.value === this.value)
+      if (!foundOption) {
+        return null
+      }
+
+      return foundOption.value
+    }
+  },
+  methods: {
+    guessOptionValue (option) {
+      return get(option, this.valueAttribute, get(option, this.textAttribute))
+    },
+    guessOptionText (option) {
+      return get(option, this.textAttribute, get(option, this.valueAttribute))
+    },
+    normalizeOption (option) {
+      if (['string', 'number', 'boolean'].includes(typeof option)) {
+        return {
+          [this.valueAttribute]: option,
+          [this.textAttribute]: option
+        }
+      }
+
+      return {
+        ...option,
+        [this.valueAttribute]: this.guessOptionValue(option),
+        [this.textAttribute]: this.guessOptionText(option)
+      }
+    },
+    updateValue (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/SelectCustom.vue b/src/components/forms/SelectCustom.vue
new file mode 100644
index 00000000..0f49473d
--- /dev/null
+++ b/src/components/forms/SelectCustom.vue
@@ -0,0 +1,445 @@
+<template>
+  <div ref="container" v-on-clickaway="close">
+    <input :value="value" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default">
+
+    <slot :toggle="toggle" :open="open">
+      <TwButton
+        icon="solid/selector"
+        icon-class="text-tw-gray-400"
+        trailing
+        :size="size"
+        :variant="variant"
+        base-class="w-full cursor-default focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+        :disabled="disabled || !options || !options.length"
+        @click.native="!disabled && options && options.length && toggle()"
+      >
+        <div v-if="selectedOptions && selectedOptions.length" class="inline-flex w-full px-3 py-2 -my-2 -ml-3 truncate">
+          <span v-for="(selectedOption, index) of selectedOptions" :key="index" class="inline-flex items-center pr-2">
+            <slot name="label" :option="selectedOption">
+              <span class="text-tw-gray-700">{{ selectedOption[textAttribute] }}</span>
+            </slot>
+          </span>
+        </div>
+        <div v-else class="inline-flex w-full text-tw-gray-400">
+          {{ placeholder || '' }}
+        </div>
+      </TwButton>
+    </slot>
+
+    <transition
+      enter-class=""
+      enter-active-class=""
+      enter-to-class=""
+      leave-class="opacity-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700" :class="dropdownClass">
+        <div v-if="searchable" class="w-full border-b border-gray-200 dark:border-gray-700">
+          <TwInput
+            ref="search"
+            v-model="q"
+            type="search"
+            :name="`select-search-${name}`"
+            block
+            autocomplete="off"
+            appearance="none"
+            :placeholder="placeholderSearch"
+          />
+        </div>
+        <ul
+          ref="options"
+          tabindex="-1"
+          role="listbox"
+          class="overflow-y-auto max-h-60 sm:text-sm focus:outline-none"
+        >
+          <li
+            v-if="showNewOption"
+            ref="option-new"
+            role="option"
+            class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
+            :class="{
+              'bg-primary-600 text-white': active === -1,
+              'text-tw-gray-900': active !== -1,
+              'py-2': dropdownSize === 'md',
+              'py-1 text-sm': dropdownSize === 'sm'
+            }"
+            @mouseover="active = -1"
+            @click="active === -1 && newOption()"
+          >
+            <slot name="newOption" :optionName="q">
+              <span class="block truncate">Add new option: "{{ q }}"</span>
+            </slot>
+          </li>
+          <li
+            v-for="(option, index) in filteredNormalizedOptions"
+            :key="index"
+            :ref="`option-${index}`"
+            role="option"
+            class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
+            :class="{
+              'font-semibold': isOptionSelected(option),
+              'bg-primary-600 text-white': active === index,
+              'text-tw-gray-900': active !== index,
+              'py-2': dropdownSize === 'md',
+              'py-1 text-sm': dropdownSize === 'sm'
+            }"
+            @mouseover="active = index"
+            @click.prevent="active === index && selectOption(option)"
+          >
+            <slot name="option" :option="option">
+              <span class="block truncate">{{ option[textAttribute] }}</span>
+            </slot>
+            <span class="absolute inset-y-0 right-0 flex items-center pr-3">
+              <Icon
+                v-if="isOptionSelected(option)"
+                name="solid/check"
+                class=" group-hover:text-white"
+                :class="{
+                  'text-white': active === index,
+                  'text-primary-600': active !== index,
+                  'h-5 w-5': dropdownSize === 'md',
+                  'h-4 w-4': dropdownSize === 'sm'
+                }"
+              />
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import { createPopper } from '@popperjs/core'
+import { directive as onClickaway } from 'vue-clickaway'
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  directives: {
+    onClickaway
+  },
+  shortcuts: {
+    disabled () {
+      return !this.open
+    },
+    up: 'prev',
+    down: 'next',
+    enter: 'enter',
+    esc: {
+      handler: 'close',
+      stop: true,
+      prevent: true
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Object, Array],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    textAttribute: {
+      type: String,
+      default: 'text'
+    },
+    valueAttribute: {
+      type: String,
+      default: 'value'
+    },
+    searchAttributes: {
+      type: Array,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    placeholderSearch: {
+      type: String,
+      default: 'Search...'
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    newEnabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    dropdownClass: {
+      type: String,
+      default: 'w-full'
+    },
+    dropdownSize: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['sm', 'md'].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: 'gray'
+    },
+    strategy: {
+      type: String,
+      default: 'absolute'
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    unselectable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      open: false,
+      active: 0,
+      q: '',
+      instance: null
+    }
+  },
+  computed: {
+    showNewOption () {
+      return this.newEnabled && this.q && !this.filteredNormalizedOptions.find(option => option[this.textAttribute].toLowerCase() === this.q.toLowerCase())
+    },
+    selectedOptions () {
+      if (this.multiple) {
+        return this.value.map(value => this.normalizedOptions.find(option => option[this.valueAttribute] === value)).filter(Boolean)
+      } else {
+        return [this.normalizedOptions.find(option => option[this.valueAttribute] === this.value)].filter(Boolean)
+      }
+    },
+    normalizedOptions () {
+      return this.options.map(option => this.normalizeOption(option))
+    },
+    filteredNormalizedOptions () {
+      let filteredNormalizedOptions = this.normalizedOptions
+
+      if (!this.q) {
+        return filteredNormalizedOptions
+      }
+
+      try {
+        filteredNormalizedOptions = this.normalizedOptions.filter((option) => {
+          return (this.searchAttributes?.length ? this.searchAttributes : [this.textAttribute]).some((searchAttribute) => {
+            return option[searchAttribute] && option[searchAttribute].search(new RegExp(this.q, 'i')) !== -1
+          })
+        })
+      } catch (e) {}
+
+      return filteredNormalizedOptions
+    }
+  },
+  watch: {
+    disabled (value) {
+      if (value && open) { this.close() }
+    },
+    open (value) {
+      this.$emit('open', value)
+
+      if (!value) {
+        return
+      }
+
+      if (this.searchable) {
+        this.$nextTick(() => {
+          this.$refs.search.$refs.input.focus()
+          this.$refs.search.$refs.input.select()
+        })
+      }
+
+      if (this.multiple) {
+        if (this.value.length) {
+          this.active = this.filteredNormalizedOptions.findIndex(option => this.value.includes(option[this.valueAttribute]))
+        }
+      } else if (this.value) {
+        this.active = this.filteredNormalizedOptions.findIndex(option => option[this.valueAttribute] === this.value)
+      }
+
+      if (this.instance) {
+        this.instance.destroy()
+        this.instance = null
+      }
+
+      this.instance = createPopper(this.$refs.container, this.$refs.tooltip, {
+        strategy: this.strategy,
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8]
+            }
+          },
+          {
+            name: 'computeStyles',
+            options: {
+              gpuAcceleration: false,
+              adaptive: false
+            }
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: 8
+            }
+          }
+        ]
+      })
+
+      this.$nextTick(() => {
+        this.scrollIntoView()
+      })
+    },
+    filteredNormalizedOptions () {
+      this.updateActive()
+    },
+    q () {
+      this.updateActive()
+    }
+  },
+  beforeDestroy () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+  },
+  methods: {
+    toggle () {
+      this.open = !this.open
+    },
+    close () {
+      this.open = false
+    },
+    newOption () {
+      this.$emit('new', this.q)
+    },
+    isOptionSelected (option) {
+      if (this.multiple) {
+        return this.value && this.value.find(it => it === option[this.valueAttribute])
+      }
+
+      return this.value && this.value === option[this.valueAttribute]
+    },
+    selectOption (option) {
+      if (this.multiple) {
+        const value = [...this.value]
+        const index = value.findIndex(it => it === option[this.valueAttribute])
+        if (index > -1) {
+          value.splice(index, 1)
+        } else {
+          value.push(option[this.valueAttribute])
+        }
+        this.$emit('input', value)
+      } else {
+        if (this.isOptionSelected(option)) {
+          if (this.unselectable) {
+            this.$emit('input', null)
+          }
+        } else {
+          this.$emit('input', option[this.valueAttribute])
+        }
+        this.open = false
+      }
+    },
+    guessOptionValue (option) {
+      return get(option, this.valueAttribute, get(option, this.textAttribute))
+    },
+    guessOptionText (option) {
+      return get(option, this.textAttribute, get(option, this.valueAttribute))
+    },
+    normalizeOption (option) {
+      if (['string', 'number', 'boolean'].includes(typeof option)) {
+        return {
+          [this.valueAttribute]: option,
+          [this.textAttribute]: option
+        }
+      }
+
+      return {
+        ...option,
+        [this.valueAttribute]: this.guessOptionValue(option),
+        [this.textAttribute]: this.guessOptionText(option)
+      }
+    },
+    prev () {
+      if (this.active - 1 >= (this.showNewOption ? -1 : 0)) {
+        this.active--
+      }
+
+      this.scrollIntoView()
+    },
+    next () {
+      if (this.active + 1 <= (this.filteredNormalizedOptions.length - 1)) {
+        this.active++
+      }
+
+      this.scrollIntoView()
+    },
+    enter () {
+      if (this.active === -1) {
+        if (this.showNewOption) {
+          this.newOption()
+        }
+        return
+      }
+
+      const option = this.filteredNormalizedOptions[this.active]
+      if (!option) {
+        return
+      }
+
+      this.selectOption(option)
+    },
+    scrollIntoView () {
+      let child
+      if (this.active === -1) {
+        child = this.$refs['option-new']
+      } else {
+        child = this.$refs[`option-${this.active}`][0]
+      }
+
+      if (!child) {
+        return
+      }
+
+      child.scrollIntoView({ block: 'nearest' })
+    },
+    updateActive () {
+      this.active = this.showNewOption && !this.filteredNormalizedOptions.length ? -1 : 0
+    }
+  }
+}
+</script>
diff --git a/src/components/forms/Textarea.vue b/src/components/forms/Textarea.vue
new file mode 100644
index 00000000..d77c8d68
--- /dev/null
+++ b/src/components/forms/Textarea.vue
@@ -0,0 +1,158 @@
+<template>
+  <div :class="wrapperClass">
+    <textarea
+      :id="name"
+      ref="textarea"
+      v-focus="autofocus"
+      :name="name"
+      :value="value"
+      :rows="rows"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :class="textareaClass"
+      @input="updateValue($event.target.value)"
+    />
+  </div>
+</template>
+
+<script>
+import Focus from '../../directives/focus'
+
+export default {
+  directives: {
+    focus: Focus
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'none'].includes(value)
+      }
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full bg-tw-white disabled:cursor-not-allowed disabled:bg-tw-gray-50'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    noResize: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    sizeClass () {
+      return ({
+        xxs: 'text-xs',
+        xs: 'text-xs',
+        sm: 'text-sm leading-4',
+        md: 'text-sm',
+        lg: 'text-base',
+        xl: 'text-base'
+      })[this.size]
+    },
+    paddingClass () {
+      return ({
+        xxs: 'px-1 py-0.5',
+        xs: 'px-2.5 py-1.5',
+        sm: 'px-3 py-2',
+        md: 'px-4 py-2',
+        lg: 'px-4 py-2',
+        xl: 'px-6 py-3'
+      })[this.size]
+    },
+    appearanceClass () {
+      return ({
+        default: 'focus:ring-primary-500 focus:border-primary-500 border-tw-gray-300 rounded-md',
+        none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
+      })[this.appearance]
+    },
+    resizeClass () {
+      return ({
+        true: 'resize-none',
+        false: ''
+      })[this.noResize]
+    },
+    textareaClass () {
+      return [
+        this.baseClass,
+        this.customClass,
+        this.sizeClass,
+        this.paddingClass,
+        this.resizeClass,
+        this.appearanceClass
+      ].join(' ')
+    },
+    wrapperClass () {
+      return [
+        'relative',
+        this.appearance !== 'none' ? 'shadow-sm' : ''
+      ].filter(Boolean).join(' ')
+    }
+  },
+  watch: {
+    value (newValue) {
+      this.resizeTextarea()
+    }
+  },
+  mounted () {
+    this.resizeTextarea()
+  },
+  methods: {
+    resizeTextarea () {
+      this.$nextTick(() => {
+        const textarea = this.$refs.textarea
+        textarea.style.height = 'auto'
+        textarea.style.height = `${textarea.scrollHeight}px`
+      })
+    },
+    updateValue (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
diff --git a/src/components/layout/Card.vue b/src/components/layout/Card.vue
new file mode 100644
index 00000000..0d921e45
--- /dev/null
+++ b/src/components/layout/Card.vue
@@ -0,0 +1,90 @@
+<template>
+  <component
+    :is="$listeners && $listeners.submit ? 'form': 'div'"
+    :class="[padded && rounded && 'rounded-md', !padded && rounded && 'sm:rounded-md', wrapperClass, ringClass, backgroundClass]"
+    @submit.prevent="$listeners && $listeners.submit ? $listeners.submit() : null"
+  >
+    <div
+      v-if="$slots.header"
+      :class="[headerClass, headerBackgroundClass, borderColorClass, !!$slots.default && 'border-b']"
+    >
+      <slot name="header" />
+    </div>
+    <div :class="[bodyClass, bodyBackgroundClass]">
+      <slot />
+    </div>
+    <div
+      v-if="$slots.footer"
+      :class="[footerClass, footerBackgroundClass, borderColorClass, (!!$slots.default || (!$slots.default && !!$slots.header)) && 'border-t']"
+    >
+      <slot name="footer" />
+    </div>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    wrapperClass: {
+      type: String,
+      default: 'overflow-hidden'
+    },
+    ringClass: {
+      type: String,
+      default: 'ring-1 ring-gray-200 dark:ring-gray-700'
+    },
+    bodyClass: {
+      type: String,
+      default: 'px-4 py-5 sm:p-6'
+    },
+    bodyBackgroundClass: {
+      type: String,
+      default: null
+    },
+    headerClass: {
+      type: String,
+      default: 'px-4 py-5 sm:px-6'
+    },
+    headerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    footerClass: {
+      type: String,
+      default: 'px-4 py-4 sm:px-6'
+    },
+    footerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    borderColorClass: {
+      type: String,
+      default: 'border-gray-200 dark:border-gray-700'
+    },
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    variant: {
+      type: String,
+      default: 'gray',
+      validator (value) {
+        return ['gray', 'white', 'black'].includes(value)
+      }
+    }
+  },
+  computed: {
+    backgroundClass () {
+      return ({
+        white: 'bg-white dark:bg-gray-800',
+        gray: 'bg-tw-gray-50',
+        black: 'bg-white dark:bg-black'
+      })[this.variant]
+    }
+  }
+}
+</script>
diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue
new file mode 100644
index 00000000..2d4adfb8
--- /dev/null
+++ b/src/components/layout/Container.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="mx-auto sm:px-6 lg:px-8" :class="{ 'px-4': padded, 'max-w-7xl': constrained }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    constrained: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
diff --git a/src/components/navigation/Pills.vue b/src/components/navigation/Pills.vue
new file mode 100644
index 00000000..5552c860
--- /dev/null
+++ b/src/components/navigation/Pills.vue
@@ -0,0 +1,59 @@
+<template>
+  <nav class="flex items-center space-x-1.5">
+    <div v-for="(link, index) of links" :key="index">
+      <TwButton
+        :size="size"
+        :to="link.to"
+        :label="link.label"
+        :icon="link.icon"
+        :variant="isActive(link) ? activeVariant : variant"
+        :custom-class="isActive(link) ? activeClass : ''"
+        @click.native="click(link)"
+      />
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    variant: {
+      type: String,
+      default: 'gray-hover'
+    },
+    activeVariant: {
+      type: String,
+      default: 'gray'
+    },
+    activeClass: {
+      type: String,
+      default: 'text-tw-gray-700 hover:text-tw-gray-700 focus:text-tw-gray-700'
+    }
+  },
+  computed: {
+    options () {
+      return this.links.map(link => ({ value: link.to, text: link.label }))
+    }
+  },
+  methods: {
+    click (link) {
+      this.$emit('input', link)
+    },
+    isActive (link) {
+      if (link.exact === false) {
+        return !!this.$route.path.startsWith(link.to)
+      } else {
+        return this.$route.path === link.to
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/navigation/Tabs.vue b/src/components/navigation/Tabs.vue
new file mode 100644
index 00000000..1973e1fb
--- /dev/null
+++ b/src/components/navigation/Tabs.vue
@@ -0,0 +1,34 @@
+<template>
+  <nav class="flex items-center gap-6">
+    <TwLink
+      v-for="(link, index) of links"
+      :key="index"
+      :to="link.to"
+      :exact="link.exact"
+      class="pt-2 pb-3 text-sm font-medium border-b-2 whitespace-nowrap"
+      :active-class="activeClass"
+      :inactive-class="inactiveClass"
+    >
+      {{ link.label }}
+    </TwLink>
+  </nav>
+</template>
+
+<script>
+export default {
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    activeClass: {
+      type: String,
+      default: 'border-black dark:border-white text-black dark:text-white hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
+    },
+    inactiveClass: {
+      type: String,
+      default: 'border-transparent text-tw-gray-500 hover:text-tw-gray-700 hover:border-tw-gray-300'
+    }
+  }
+}
+</script>
diff --git a/src/components/navigation/VerticalNavigation.vue b/src/components/navigation/VerticalNavigation.vue
new file mode 100644
index 00000000..cbfc9d85
--- /dev/null
+++ b/src/components/navigation/VerticalNavigation.vue
@@ -0,0 +1,117 @@
+<template>
+  <nav>
+    <h3
+      v-if="title || $slots.title"
+      class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase text-tw-gray-500"
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h3>
+
+    <div class="space-y-1">
+      <TwLink
+        v-for="link of links"
+        v-slot="{ isActive }"
+        :key="link.to || link.label"
+        :to="link.to"
+        :exact="link.exact"
+        class="flex items-center px-2 py-2 text-sm font-medium rounded-md group focus:outline-none"
+        :active-class="activeVariantClass"
+        :inactive-class="variantClass"
+        @click.native="link.click && link.click()"
+        @keyup.enter.native="$event.target.blur()"
+      >
+        <slot name="icon" :link="link">
+          <Icon
+            v-if="link.icon"
+            :name="link.icon"
+            class="w-6 h-6 mr-3"
+            :class="isActive ? activeIconClass : iconClass"
+          />
+        </slot>
+        <slot :link="link">
+          <span class="truncate">{{ link.label }}</span>
+        </slot>
+        <div v-if="link.shortcuts" class="hidden ml-3 space-x-1 lg:flex">
+          <span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 text-tw-gray-600">
+            {{ shortcut }}
+          </span>
+        </div>
+        <span class="inline-block ml-auto">
+          <slot name="badge" :link="link">
+            <span
+              v-if="link.badge"
+              class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
+              :class="{
+                'bg-tw-gray-50': isActive,
+                'bg-gray-200 dark:bg-gray-700 text-tw-gray-600': !isActive
+              }"
+            >
+              {{ link.badge }}
+            </span>
+          </slot>
+        </span>
+      </TwLink>
+    </div>
+  </nav>
+</template>
+
+<script>
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'white',
+      validator (value) {
+        return ['white', 'gray'].includes(value)
+      }
+    }
+  },
+  computed: {
+    options () {
+      return this.links.map(link => ({ value: link.to, text: link.label }))
+    },
+    variantClass () {
+      return ({
+        white: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50',
+        gray: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50'
+      })[this.variant]
+    },
+    activeVariantClass () {
+      return ({
+        white: 'text-tw-gray-900 bg-tw-gray-100 hover:text-tw-gray-900 hover:bg-tw-gray-100 focus:bg-tw-gray-100',
+        gray: 'text-tw-gray-900 bg-gray-200 dark:bg-gray-800 hover:text-tw-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
+      })[this.variant]
+    },
+    iconClass () {
+      return ({
+        white: 'text-tw-gray-400 group-hover:text-tw-gray-500',
+        gray: 'text-tw-gray-400 group-hover:text-tw-gray-500'
+      })[this.variant]
+    },
+    activeIconClass () {
+      return ({
+        white: 'text-tw-gray-500 group-hover:text-tw-gray-500',
+        gray: 'text-tw-gray-500 group-hover:text-tw-gray-500'
+      })[this.variant]
+    }
+  },
+  methods: {
+    changeRoute (to) {
+      this.$router.push(to)
+    }
+  }
+}
+</script>
diff --git a/src/components/overlays/Modal.vue b/src/components/overlays/Modal.vue
new file mode 100644
index 00000000..0c33bee4
--- /dev/null
+++ b/src/components/overlays/Modal.vue
@@ -0,0 +1,176 @@
+<template>
+  <div v-if="showModal" class="fixed inset-0 z-50 overflow-hidden modal">
+    <div class="flex items-start justify-center min-h-screen">
+      <transition
+        appear
+        enter-class="opacity-0"
+        enter-active-class="duration-300 ease-out"
+        enter-to-class="opacity-100"
+        leave-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-to-class="opacity-0"
+        @before-leave="backdropLeaving = true"
+        @after-leave="backdropLeaving = false"
+      >
+        <div v-if="showBackdrop" class="fixed inset-0 transition-opacity bg-gray-800 sm:bg-opacity-75" @click="open = false" />
+      </transition>
+
+      <transition
+        appear
+        enter-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
+        enter-active-class="duration-300 ease-out"
+        enter-to-class="translate-y-0 opacity-100 sm:scale-100"
+        leave-class="translate-y-0 opacity-100 sm:scale-100"
+        leave-active-class="duration-200 ease-in"
+        leave-to-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
+        @before-leave="contentLeaving = true"
+        @after-leave="contentLeaving = false"
+      >
+        <TwCard
+          v-if="showContent"
+          v-bind="$attrs"
+          class="z-50 flex flex-col flex-1 w-screen h-screen mx-auto overflow-hidden shadow-xl"
+          :class="modalClass"
+          variant="white"
+          ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
+          aria-modal="true"
+          v-on="$listeners"
+        >
+          <template v-if="$slots.header" #header>
+            <slot name="header" />
+          </template>
+          <template v-else-if="title" #header>
+            <div class="flex items-center justify-between">
+              <h2 class="font-medium sm:text-lg sm:leading-6 text-tw-gray-900">
+                {{ title }}
+              </h2>
+              <div class="flex items-center">
+                <button
+                  type="button"
+                  aria-label="Close panel"
+                  class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  @click="open = false"
+                >
+                  <Icon name="outline/x" class="w-6 h-6" />
+                </button>
+              </div>
+            </div>
+          </template>
+          <slot />
+          <template v-if="$slots.footer" #footer>
+            <slot name="footer" />
+          </template>
+        </TwCard>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    baseClass: {
+      type: String,
+      default: 'sm:my-20 sm:max-w-xl sm:h-auto'
+    }
+  },
+  data () {
+    return {
+      showModal: false,
+      showBackdrop: false,
+      showContent: false,
+      backdropLeaving: false,
+      contentLeaving: false
+    }
+  },
+  head () {
+    if (this.open) {
+      return {
+        bodyAttrs: {
+          class: ['overflow-hidden']
+        },
+        htmlAttrs: {
+          style: ['touch-action: none;']
+        }
+      }
+    }
+
+    return undefined
+  },
+  computed: {
+    modalClass () {
+      return this.fullscreen ? 'sm:m-10 sm:h-[calc(100vh-5rem)]' : this.baseClass
+    },
+    leaving () {
+      return this.backdropLeaving || this.contentLeaving
+    },
+    open: {
+      get () {
+        return this.value
+      },
+      set (open) {
+        this.$emit('input', open)
+      }
+    }
+  },
+  watch: {
+    open: {
+      handler (newValue) {
+        if (newValue) {
+          this.show()
+        } else {
+          this.close()
+        }
+      },
+      immediate: true
+    },
+    leaving (newValue) {
+      if (newValue === false) {
+        this.showModal = false
+        this.open = false
+      }
+    }
+  },
+  shortcuts: {
+    disabled () {
+      return !this.open
+    },
+    esc: 'esc'
+  },
+  methods: {
+    show () {
+      this.showModal = true
+      this.showBackdrop = true
+      this.showContent = true
+    },
+    close () {
+      this.showBackdrop = false
+      this.showContent = false
+    },
+    esc () {
+      this.$listeners.close ? this.$listeners.close() : this.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal {
+  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
+}
+</style>
diff --git a/src/components/overlays/Notification.vue b/src/components/overlays/Notification.vue
new file mode 100644
index 00000000..bc6ded90
--- /dev/null
+++ b/src/components/overlays/Notification.vue
@@ -0,0 +1,187 @@
+<template>
+  <transition
+    appear
+    enter-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+    enter-active-class="transition duration-300 ease-out transform"
+    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+    leave-class="opacity-100"
+    leave-active-class="transition duration-100 ease-in"
+    leave-to-class="opacity-0"
+  >
+    <div
+      class="z-50 w-full bg-white rounded-lg shadow-lg pointer-events-auto dark:bg-gray-800"
+      @mouseover="onMouseover"
+      @mouseout="onMouseout"
+    >
+      <div class="relative overflow-hidden rounded-lg ring-1 ring-gray-200 dark:ring-gray-700">
+        <div class="p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
+            </div>
+            <div class="ml-3 w-0 flex-1 pt-0.5">
+              <p class="text-sm font-medium leading-5 text-tw-gray-900">
+                {{ title }}
+              </p>
+              <p v-if="description" class="mt-1 text-sm leading-5 text-tw-gray-500">
+                {{ description }}
+              </p>
+              <TwButton
+                v-if="undo"
+                variant="white"
+                size="xs"
+                class="mt-2"
+                @click.native.stop="cancel"
+              >
+                Undo
+                <div class="inline-flex items-center rounded bg-tw-gray-200 ml-1.5">
+                  <span class="w-full px-1 text-center text-tw-gray-600 text-xxs">
+                    Z
+                  </span>
+                </div>
+              </TwButton>
+            </div>
+            <div class="flex-shrink-0 ml-4">
+              <button
+                class="transition duration-150 ease-in-out text-tw-gray-400 focus:outline-none hover:text-tw-gray-500 focus:text-tw-gray-500"
+                @click.stop="close"
+              >
+                <span class="sr-only">Close</span>
+                <Icon name="outline/x" class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-if="timeout" class="absolute bottom-0 left-0 right-0 h-1">
+          <div class="h-1 bg-primary-500" :style="progressBarStyle" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true,
+      default: 'info',
+      validator (value) {
+        return ['info', 'success', 'error', 'warning'].includes(value)
+      }
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    timeout: {
+      type: Number,
+      default: 5000
+    },
+    undo: {
+      type: Function,
+      default: null
+    },
+    callback: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      timer: null,
+      ticker: null,
+      remainingTime: this.timeout
+    }
+  },
+  computed: {
+    iconName () {
+      return this.icon || ({
+        warning: 'solid/exclamation-circle',
+        info: 'solid/information-circle',
+        success: 'solid/check-circle',
+        error: 'solid/x-circle'
+      })[this.type]
+    },
+    iconClass () {
+      return ({
+        warning: 'text-orange-400',
+        info: 'text-blue-400',
+        success: 'text-green-400',
+        error: 'text-red-400'
+      })[this.type] || 'text-tw-gray-400'
+    },
+    progressBarStyle () {
+      const remainingPercent = this.remainingTime / this.timeout * 100
+      return { width: `${remainingPercent}%` }
+    }
+  },
+  mounted () {
+    if (!this.$timer) {
+      return
+    }
+
+    if (this.timeout) {
+      this.timer = new this.$timer(() => {
+        this.close()
+        this.ticker?.stop()
+      }, this.timeout)
+      this.ticker = new this.$ticker(() => {
+        this.remainingTime -= 10
+      }, 10)
+    }
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      this.timer.stop()
+      this.ticker.stop()
+    }
+  },
+  methods: {
+    onMouseover () {
+      if (this.timer) {
+        this.timer.pause()
+        this.ticker.stop()
+      }
+    },
+    onMouseout () {
+      if (this.timer) {
+        this.timer.resume()
+        this.ticker.start()
+      }
+    },
+    cancel () {
+      if (this.timer) {
+        this.timer.stop()
+        this.ticker.stop()
+      }
+      if (this.undo) {
+        this.undo()
+      }
+      this.$emit('close')
+    },
+    close () {
+      if (this.callback) {
+        this.callback()
+      }
+      this.$emit('close')
+    }
+  }
+}
+</script>
diff --git a/src/components/overlays/Popover.vue b/src/components/overlays/Popover.vue
new file mode 100644
index 00000000..93ff3774
--- /dev/null
+++ b/src/components/overlays/Popover.vue
@@ -0,0 +1,213 @@
+<template>
+  <div
+    ref="container"
+    v-on-clickaway="onClickaway"
+    class="inline whitespace-normal"
+    @mouseover="mode === 'hover' ? mouseover() : () => {}"
+    @mouseleave="mode === 'hover' ? mouseleave() : () => {}"
+  >
+    <slot :toggle="toggle" />
+
+    <Portal to="popover">
+      <transition
+        enter-class="transform scale-95 opacity-0"
+        enter-active-class="transition duration-100 ease-out"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-class="opacity-100"
+        leave-active-class="duration-100 ease-in"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="show && ready && $scopedSlots.content"
+          ref="popover"
+          class="z-30 flex bg-white rounded-md shadow ring-1 ring-gray-200 dark:ring-gray-700"
+          :class="[
+            popoverClass,
+            darken ? 'dark:bg-gray-900' : 'dark:bg-gray-800',
+            mode === 'click' ? '' : 'invisible lg:visible'
+          ]"
+          @mouseover="mode === 'hover' ? mouseover() : () => {}"
+          @mouseleave="mode === 'hover' ? mouseleave() : () => {}"
+        >
+          <slot name="content" :toggle="toggle" />
+        </div>
+      </transition>
+    </Portal>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+import { directive as onClickaway } from 'vue-clickaway'
+
+export default {
+  directives: {
+    onClickaway
+  },
+  props: {
+    darken: {
+      type: Boolean,
+      default: false
+    },
+    popoverClass: {
+      type: String,
+      default: 'w-auto h-auto'
+    },
+    mode: {
+      type: String,
+      default: 'hover',
+      validator (value) {
+        return ['click', 'hover'].includes(value)
+      }
+    },
+    strategy: {
+      type: String,
+      default: 'fixed'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    openDelay: {
+      type: Number,
+      default: 300
+    },
+    closeDelay: {
+      type: Number,
+      default: 100
+    },
+    ready: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      show: false,
+      instance: null,
+      openTimeout: null,
+      closeTimeout: null
+    }
+  },
+  watch: {
+    show (value) {
+      this.$emit('show', value)
+
+      if (!value || !this.ready) {
+        // let the 100ms hide animation proceed before destroying the popper instance
+        setTimeout(() => {
+          // if popover reshow, abort destroy
+          if (this.show && this.ready) {
+            return
+          }
+          this.destroyPopper()
+        }, 120)
+        return
+      }
+
+      this.createPopper()
+    },
+    ready (value) {
+      if (!value || !this.show) {
+        // let the 100ms hide animation proceed before destroying the popper instance
+        setTimeout(() => {
+          // if popover reshow, abort destroy
+          if (this.show && this.ready) {
+            return
+          }
+          this.destroyPopper()
+        }, 120)
+        return
+      }
+
+      this.createPopper()
+    }
+  },
+  beforeDestroy () {
+    this.destroyPopper()
+  },
+  methods: {
+    createPopper () {
+      // https://portal-vue.linusb.org/guide/caveats.html#refs
+      this.$nextTick().then(
+        this.$nextTick().then(() => {
+          setTimeout(() => {
+            if (this.instance) {
+              this.instance.forceUpdate()
+              return
+            }
+
+            this.instance = createPopper(this.$refs.container, this.$refs.popover, {
+              strategy: this.strategy,
+              placement: this.placement,
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 8]
+                  }
+                },
+                {
+                  name: 'computeStyles',
+                  options: {
+                    gpuAcceleration: false,
+                    adaptive: false
+                  }
+                },
+                {
+                  name: 'preventOverflow',
+                  options: {
+                    padding: 8
+                  }
+                }
+              ]
+            })
+          }, 1)
+        })
+      )
+    },
+    destroyPopper () {
+      if (this.instance) {
+        this.instance.destroy()
+        this.instance = null
+      }
+    },
+    mouseover () {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+      if (this.show) {
+        return
+      }
+      this.openTimeout = this.openTimeout || setTimeout(() => {
+        this.open()
+        this.openTimeout = null
+      }, this.openDelay)
+    },
+    mouseleave () {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+      if (!this.show) {
+        return
+      }
+      this.closeTimeout = this.closeTimeout || setTimeout(() => {
+        this.close()
+        this.closeTimeout = null
+      }, this.closeDelay)
+    },
+    toggle () {
+      this.show = !this.show
+    },
+    open () {
+      this.show = true
+    },
+    close () {
+      this.show = false
+    },
+    onClickaway () {
+      if (this.mode !== 'hover') {
+        this.close()
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/overlays/Slideover.vue b/src/components/overlays/Slideover.vue
new file mode 100644
index 00000000..58b42fb7
--- /dev/null
+++ b/src/components/overlays/Slideover.vue
@@ -0,0 +1,207 @@
+<template>
+  <div v-if="showSlideover" ref="container" class="fixed inset-0 z-50 overflow-hidden slideover">
+    <div class="absolute inset-0 overflow-hidden">
+      <transition
+        appear
+        enter-class="opacity-0"
+        enter-active-class="duration-300 ease-out"
+        enter-to-class="opacity-100"
+        leave-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-to-class="opacity-0"
+        @before-leave="backdropLeaving = true"
+        @after-leave="backdropLeaving = false"
+      >
+        <div v-if="showBackdrop" class="fixed inset-0 transition-opacity bg-gray-800 sm:bg-opacity-75" @click="open = false" />
+      </transition>
+
+      <section class="absolute inset-y-0 right-0 flex max-w-full sm:pl-16">
+        <transition
+          appear
+          v-bind="transitionProps"
+          @before-leave="contentLeaving = true"
+          @after-leave="contentLeaving = false"
+        >
+          <TwCard
+            v-if="showContent"
+            v-bind="$attrs"
+            role="dialog"
+            aria-modal="true"
+            class="z-50 flex flex-col w-screen h-screen transition transform shadow-xl sm:max-w-md "
+            body-class="flex-1 overflow-y-auto"
+            ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
+            variant="white"
+            :rounded="false"
+            v-on="$listeners"
+          >
+            <template v-if="$slots.header" #header>
+              <slot name="header" />
+            </template>
+            <template v-else-if="title" #header>
+              <div class="flex items-center justify-between">
+                <h2 class="font-medium sm:leading-6 sm:text-lg text-tw-gray-900">
+                  {{ title }}
+                </h2>
+                <div class="flex items-center">
+                  <button
+                    type="button"
+                    aria-label="Close panel"
+                    class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    @click="open = false"
+                  >
+                    <Icon name="outline/x" class="w-6 h-6" />
+                  </button>
+                </div>
+              </div>
+            </template>
+            <slot />
+            <template v-if="$slots.footer" #footer>
+              <slot name="footer" />
+            </template>
+          </TwCard>
+        </transition>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import focusLock from 'dom-focus-lock'
+
+import Icon from '../elements/icon'
+
+export default {
+  components: { Icon },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      showSlideover: false,
+      showBackdrop: false,
+      showContent: false,
+      backdropLeaving: false,
+      contentLeaving: false,
+      lock: false
+    }
+  },
+  head () {
+    if (this.open) {
+      return {
+        bodyAttrs: {
+          class: ['overflow-hidden']
+        },
+        htmlAttrs: {
+          style: ['touch-action: none;']
+        }
+      }
+    }
+
+    return undefined
+  },
+  computed: {
+    transitionProps () {
+      // Same transition than Modal but only on mobile
+      if (this.$mq === 'xs') {
+        return {
+          enterClass: 'translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95',
+          enterActiveClass: 'duration-300 ease-out',
+          enterToClass: 'translate-y-0 opacity-100 sm:scale-100',
+          leaveClass: 'translate-y-0 opacity-100 sm:scale-100',
+          leaveActiveClass: 'duration-200 ease-in',
+          leaveToClass: 'translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95'
+        }
+      } else {
+        return {
+          enterClass: 'translate-x-full',
+          enterActiveClass: 'transition duration-500 ease-in-out transform sm:duration-700',
+          enterToClass: 'translate-x-0',
+          leaveClass: 'translate-x-0',
+          leaveActiveClass: 'transition duration-500 ease-in-out transform sm:duration-700',
+          leaveToClass: 'translate-x-full'
+        }
+      }
+    },
+    leaving () {
+      return this.backdropLeaving || this.contentLeaving
+    },
+    open: {
+      get () {
+        return this.value
+      },
+      set (open) {
+        this.$emit('input', open)
+      }
+    }
+  },
+  watch: {
+    open: {
+      handler (newValue) {
+        if (newValue) {
+          this.show()
+        } else {
+          this.close()
+        }
+      },
+      immediate: true
+    },
+    leaving (newValue) {
+      if (newValue === false) {
+        this.showSlideover = false
+        this.open = false
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.lock) {
+      focusLock.off(this.$refs.container)
+      this.lock = false
+    }
+  },
+  shortcuts: {
+    disabled () {
+      return !this.open
+    },
+    esc: 'esc'
+  },
+  methods: {
+    show () {
+      this.showSlideover = true
+      this.showBackdrop = true
+      this.showContent = true
+      // Remove current focus if any, avoiding the close button to autofocus and break opening animation.
+      document.activeElement?.blur()
+      this.$nextTick(() => {
+        if (this.$refs.container && !this.lock) {
+          focusLock.on(this.$refs.container)
+          this.lock = true
+        }
+      })
+    },
+    close () {
+      this.showBackdrop = false
+      this.showContent = false
+      if (this.lock) {
+        focusLock.off(this.$refs.container)
+        this.lock = false
+      }
+    },
+    esc () {
+      this.$listeners.close ? this.$listeners.close() : this.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.slideover {
+  margin: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
+}
+</style>
diff --git a/src/components/overlays/Tooltip.vue b/src/components/overlays/Tooltip.vue
new file mode 100644
index 00000000..353b8886
--- /dev/null
+++ b/src/components/overlays/Tooltip.vue
@@ -0,0 +1,156 @@
+
+<template>
+  <div ref="container" v-on-clickaway="close" @mouseover="mouseover" @mouseleave="mouseleave">
+    <slot />
+
+    <transition
+      enter-class="transform scale-95 opacity-0"
+      enter-active-class="transition duration-100 ease-out"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-class="opacity-100"
+      leave-active-class="duration-100 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-show="show && (text || shortcuts.length || $slots.text)"
+        ref="tooltip"
+        class="fixed z-30 flex items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible"
+        :class="{
+          'bg-gray-800': !darken,
+          'bg-gray-900': darken
+        }"
+      >
+        <span v-if="text || $slots.text" class="truncate text-gray-50 text-xxs">
+          <slot name="text">{{ text }}</slot>
+        </span>
+        <div v-if="shortcuts && shortcuts.length">
+          <div class="flex items-center flex-shrink-0 h-6 space-x-1">
+            <span v-if="text" class="mb-2 text-center text-gray-500">.</span>
+            <div
+              v-for="(shortcut, index) of shortcuts"
+              :key="index"
+              class="flex items-center px-1 bg-gray-600 rounded"
+            >
+              <span
+                class="font-light text-center text-gray-200 text-xxs"
+              >{{ shortcut }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+import { directive as onClickaway } from 'vue-clickaway'
+
+export default {
+  directives: {
+    onClickaway
+  },
+  props: {
+    text: {
+      type: String,
+      default: null
+    },
+    shortcuts: {
+      type: Array,
+      default: () => []
+    },
+    darken: {
+      type: Boolean,
+      default: false
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 100
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  data () {
+    return {
+      show: false,
+      instance: null,
+      openTimeout: null,
+      closeTimeout: null
+    }
+  },
+  watch: {
+    show (value) {
+      if (!value) {
+        return
+      }
+
+      if (this.instance) {
+        this.instance.destroy()
+        this.instance = null
+      }
+
+      this.instance = createPopper(this.$refs.container, this.$refs.tooltip, {
+        strategy: 'fixed',
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8]
+            }
+          },
+          {
+            name: 'computeStyles',
+            options: {
+              gpuAcceleration: false,
+              adaptive: false
+            }
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: 8
+            }
+          }
+        ]
+      })
+    }
+  },
+  beforeDestroy () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+  },
+  methods: {
+    mouseover () {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+      this.openTimeout = this.openTimeout || setTimeout(() => {
+        this.open()
+        this.openTimeout = null
+      }, this.openDelay)
+    },
+    mouseleave () {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+      this.closeTimeout = this.closeTimeout || setTimeout(() => {
+        this.close()
+        this.closeTimeout = null
+      }, this.closeDelay)
+    },
+    open () {
+      this.show = true
+    },
+    close () {
+      this.show = false
+    }
+  }
+}
+</script>
diff --git a/src/index.ts b/src/index.ts
index 440904e7..2f5092b3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -75,9 +75,28 @@ export default defineNuxtModule({
     await installModule(nuxt, { src: '@unocss/nuxt', options })
 
     nuxt.hook('components:dirs', (dirs) => {
-      // Add ./components dir to the list
       dirs.push({
-        path: join(__dirname, 'components'),
+        path: join(__dirname, 'components/elements'),
+        prefix: _options.prefix || 'u'
+      })
+      dirs.push({
+        path: join(__dirname, 'components/feedback'),
+        prefix: _options.prefix || 'u'
+      })
+      dirs.push({
+        path: join(__dirname, 'components/forms'),
+        prefix: _options.prefix || 'u'
+      })
+      dirs.push({
+        path: join(__dirname, 'components/layout'),
+        prefix: _options.prefix || 'u'
+      })
+      dirs.push({
+        path: join(__dirname, 'components/navigation'),
+        prefix: _options.prefix || 'u'
+      })
+      dirs.push({
+        path: join(__dirname, 'components/overlays'),
         prefix: _options.prefix || 'u'
       })
     })