diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index ca61f2f4..33684feb 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -78,7 +78,9 @@ const components = [
   {
     label: 'Badge',
     to: '/components/Badge',
-    nuxt3: true
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'Button',
diff --git a/src/presets/tailwindui.ts b/src/presets/tailwindui.ts
index facfe17b..ed58f607 100644
--- a/src/presets/tailwindui.ts
+++ b/src/presets/tailwindui.ts
@@ -95,6 +95,22 @@ const button = {
   }
 }
 
+const badge = {
+  base: 'inline-flex items-center font-medium',
+  size: {
+    sm: 'text-xs px-2 py-0.5',
+    md: 'text-sm px-2.5 py-0.5',
+    lg: 'text-sm px-3 py-0.5',
+    xl: 'text-sm px-4 py-1'
+  },
+  variant: {
+    ...colors.reduce((acc: any, color) => {
+      acc[color] = `bg-${color}-100 dark:bg-${color}-700 text-${color}-800 dark:text-${color}-100`
+      return acc
+    }, {})
+  }
+}
+
 const formGroup = {
   wrapper: '',
   label: 'block text-sm font-medium u-text-gray-700',
@@ -256,14 +272,15 @@ const verticalNavigation = {
 }
 
 export default {
+  card,
   button,
+  badge,
   formGroup,
   input,
   textarea,
   select,
   checkbox,
   radio,
-  card,
   container,
   toggle,
   verticalNavigation
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index 016c52b7..3f965a74 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -1,27 +1,34 @@
 <template>
-  <span class="inline-flex items-center font-medium" :class="badgeClass">
+  <span :class="badgeClass">
     <slot>{{ label }}</slot>
   </span>
 </template>
 
 <script>
+import { classNames } from '../../utils'
+import $ui from '#build/ui'
+
 export default {
   props: {
     size: {
       type: String,
       default: 'md',
       validator (value) {
-        return ['sm', 'md', 'lg'].includes(value)
+        return Object.keys($ui.badge.size).includes(value)
       }
     },
     variant: {
       type: String,
       default: 'primary',
       validator (value) {
-        return ['primary', 'gray', 'red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink', 'gradient'].includes(value)
+        return Object.keys($ui.badge.variant).includes(value)
       }
     },
-    pill: {
+    baseClass: {
+      type: String,
+      default: () => $ui.badge.base
+    },
+    rounded: {
       type: Boolean,
       default: false
     },
@@ -30,42 +37,18 @@ export default {
       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(' ')
+  setup (props) {
+    const badgeClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        $ui.badge.size[props.size],
+        $ui.badge.variant[props.variant],
+        props.rounded ? 'rounded-full' : 'rounded-md'
+      )
+    })
+
+    return {
+      badgeClass
     }
   }
 }