diff --git a/src/module.ts b/src/module.ts
index 4bcf32e09c..45a4abdc17 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -158,7 +158,7 @@ export default defineNuxtModule<ModuleOptions>({
         content: {
           files: [
             resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'),
-            resolve(runtimeDir, '*.{mjs,js,ts}')
+            resolve(runtimeDir, 'ui.config/**/*.{mjs,js,ts}')
           ],
           transform: {
             vue: (content) => {
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
deleted file mode 100644
index 9a973a47b8..0000000000
--- a/src/runtime/ui.config.ts
+++ /dev/null
@@ -1,1323 +0,0 @@
-const _popperArrow = {
-  base: 'before:w-2 before:h-2',
-  ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
-  rounded: 'before:rounded-sm',
-  background: 'before:bg-gray-200 dark:before:bg-gray-800',
-  shadow: 'before:shadow',
-  placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
-}
-
-// Data
-
-export const table = {
-  wrapper: 'relative overflow-x-auto',
-  base: 'min-w-full table-fixed',
-  divide: 'divide-y divide-gray-300 dark:divide-gray-700',
-  thead: '',
-  tbody: 'divide-y divide-gray-200 dark:divide-gray-800',
-  tr: {
-    base: '',
-    selected: 'bg-gray-50 dark:bg-gray-800/50',
-    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer'
-  },
-  th: {
-    base: 'text-left rtl:text-right',
-    padding: 'px-3 py-3.5',
-    color: 'text-gray-900 dark:text-white',
-    font: 'font-semibold',
-    size: 'text-sm'
-  },
-  td: {
-    base: 'whitespace-nowrap',
-    padding: 'px-3 py-4',
-    color: 'text-gray-500 dark:text-gray-400',
-    font: '',
-    size: 'text-sm'
-  },
-  checkbox: {
-    padding: 'ps-4'
-  },
-  loadingState: {
-    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
-    label: 'text-sm text-center text-gray-900 dark:text-white',
-    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4 animate-spin'
-  },
-  emptyState: {
-    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
-    label: 'text-sm text-center text-gray-900 dark:text-white',
-    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
-  },
-  default: {
-    sortAscIcon: 'i-heroicons-bars-arrow-up-20-solid',
-    sortDescIcon: 'i-heroicons-bars-arrow-down-20-solid',
-    sortButton: {
-      icon: 'i-heroicons-arrows-up-down-20-solid',
-      trailing: true,
-      square: true,
-      color: 'gray',
-      variant: 'ghost',
-      class: '-m-1.5'
-    },
-    loadingState: {
-      icon: 'i-heroicons-arrow-path-20-solid',
-      label: 'Loading...'
-    },
-    emptyState: {
-      icon: 'i-heroicons-circle-stack-20-solid',
-      label: 'No items.'
-    }
-  }
-}
-
-// Elements
-
-export const avatar = {
-  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
-  background: 'bg-gray-100 dark:bg-gray-800',
-  rounded: 'rounded-full',
-  text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
-  placeholder: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
-  size: {
-    '3xs': 'h-4 w-4 text-[8px]',
-    '2xs': 'h-5 w-5 text-[10px]',
-    xs: 'h-6 w-6 text-xs',
-    sm: 'h-8 w-8 text-sm',
-    md: 'h-10 w-10 text-base',
-    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'
-  },
-  chip: {
-    base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
-    background: 'bg-{color}-500 dark:bg-{color}-400',
-    position: {
-      'top-right': 'top-0 right-0',
-      'bottom-right': 'bottom-0 right-0',
-      'top-left': 'top-0 left-0',
-      'bottom-left': 'bottom-0 left-0'
-    },
-    size: {
-      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
-      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
-      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
-      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
-    }
-  },
-  icon: {
-    base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
-    size: {
-      '3xs': 'h-2 w-2',
-      '2xs': 'h-2.5 w-2.5',
-      xs: 'h-3 w-3',
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-      xl: 'h-7 w-7',
-      '2xl': 'h-8 w-8',
-      '3xl': 'h-10 w-10'
-    }
-  },
-  default: {
-    size: 'sm',
-    icon: null,
-    chipColor: null,
-    chipPosition: 'top-right'
-  }
-}
-
-export const avatarGroup = {
-  wrapper: 'inline-flex flex-row-reverse justify-end',
-  ring: 'ring-2 ring-white dark:ring-gray-900',
-  margin: '-me-1.5 first:me-0'
-}
-
-export const badge = {
-  base: 'inline-flex items-center',
-  rounded: 'rounded-md',
-  font: 'font-medium',
-  size: {
-    xs: 'text-xs px-1.5 py-0.5',
-    sm: 'text-xs px-2 py-1',
-    md: 'text-sm px-2 py-1',
-    lg: 'text-sm px-2.5 py-1.5'
-  },
-  color: {
-    white: {
-      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
-    },
-    gray: {
-      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
-    },
-    black: {
-      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
-    }
-  },
-  variant: {
-    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
-    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
-    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
-    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
-  },
-  default: {
-    size: 'sm',
-    variant: 'solid',
-    color: 'primary'
-  }
-}
-
-export const button = {
-  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
-  font: 'font-medium',
-  rounded: 'rounded-md',
-  size: {
-    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
-  },
-  gap: {
-    '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
-    sm: 'gap-x-1.5',
-    md: 'gap-x-2',
-    lg: 'gap-x-2.5',
-    xl: 'gap-x-2.5'
-  },
-  padding: {
-    '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
-  },
-  square: {
-    '2xs': 'p-1',
-    xs: 'p-1.5',
-    sm: 'p-1.5',
-    md: 'p-2',
-    lg: 'p-2.5',
-    xl: 'p-2.5'
-  },
-  color: {
-    white: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-    },
-    gray: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-    },
-    black: {
-      solid: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
-    }
-  },
-  variant: {
-    solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
-    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
-  },
-  icon: {
-    base: 'flex-shrink-0',
-    size: {
-      '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6'
-    }
-  },
-  default: {
-    size: 'sm',
-    variant: 'solid',
-    color: 'primary',
-    loadingIcon: 'i-heroicons-arrow-path-20-solid'
-  }
-}
-
-export const buttonGroup = {
-  wrapper: {
-    horizontal: 'inline-flex -space-x-px',
-    vertical: 'inline-flex flex-col -space-y-px'
-  },
-  rounded: 'rounded-md',
-  shadow: 'shadow-sm'
-}
-
-export const dropdown = {
-  wrapper: 'relative inline-flex text-left rtl:text-right',
-  container: 'z-20 group',
-  width: 'w-48',
-  height: '',
-  background: 'bg-white dark:bg-gray-800',
-  shadow: 'shadow-lg',
-  rounded: 'rounded-md',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
-  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
-  divide: 'divide-y divide-gray-200 dark:divide-gray-700',
-  padding: 'p-1',
-  item: {
-    base: 'group flex items-center gap-2 w-full',
-    rounded: 'rounded-md',
-    padding: 'px-2 py-1.5',
-    size: 'text-sm',
-    active: 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white',
-    inactive: 'text-gray-700 dark:text-gray-200',
-    disabled: 'cursor-not-allowed opacity-50',
-    icon: {
-      base: 'flex-shrink-0 h-4 w-4',
-      active: 'text-gray-500 dark:text-gray-400',
-      inactive: 'text-gray-400 dark:text-gray-500'
-    },
-    avatar: {
-      base: 'flex-shrink-0',
-      size: '3xs'
-    },
-    shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
-  },
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: 'transition duration-100 ease-out',
-    enterFromClass: 'transform scale-95 opacity-0',
-    enterToClass: 'transform scale-100 opacity-100',
-    leaveActiveClass: 'transition duration-75 ease-in',
-    leaveFromClass: 'transform scale-100 opacity-100',
-    leaveToClass: 'transform scale-95 opacity-0'
-  },
-  popper: {
-    placement: 'bottom-end',
-    strategy: 'fixed'
-  },
-  arrow: {
-    ..._popperArrow,
-    ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
-    background: 'before:bg-white dark:before:bg-gray-700'
-  }
-}
-
-export const accordion = {
-  wrapper: 'w-full flex flex-col',
-  item: {
-    base: '',
-    size: 'text-sm',
-    color: 'text-gray-500 dark:text-gray-400',
-    padding: 'pt-1.5 pb-3',
-    icon: 'ms-auto transform transition-transform duration-200'
-  },
-  transition: {
-    enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out',
-    leaveActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out'
-  },
-  default: {
-    openIcon: 'i-heroicons-chevron-down-20-solid',
-    closeIcon: '',
-    class: 'mb-1.5 w-full',
-    variant: 'soft'
-  }
-}
-
-export const alert = {
-  wrapper: 'w-full relative overflow-hidden',
-  title: 'text-sm font-medium',
-  description: 'mt-1 text-sm leading-4 opacity-90',
-  shadow: '',
-  rounded: 'rounded-lg',
-  padding: 'p-3',
-  icon: {
-    base: 'flex-shrink-0 w-5 h-5'
-  },
-  avatar: {
-    base: 'flex-shrink-0 self-center',
-    size: 'md'
-  },
-  color: {
-    white: {
-      solid: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800'
-    }
-  },
-  variant: {
-    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
-    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
-    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
-    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
-  },
-  default: {
-    color: 'white',
-    variant: 'solid',
-    icon: null,
-    closeButton: null,
-    actionButton: {
-      size: 'xs',
-      color: 'primary',
-      variant: 'link'
-    }
-  }
-}
-
-export const kbd = {
-  base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
-  padding: 'px-1',
-  size: {
-    xs: 'h-4 min-w-[16px] text-[10px]',
-    sm: 'h-5 min-w-[20px] text-[11px]',
-    md: 'h-6 min-w-[24px] text-[12px]'
-  },
-  rounded: 'rounded',
-  font: 'font-medium font-sans',
-  background: 'bg-gray-100 dark:bg-gray-800',
-  ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
-  default: {
-    size: 'sm'
-  }
-}
-
-export const progress = {
-  wrapper: 'w-full flex flex-col gap-2',
-  indicator: {
-    container: {
-      base: 'flex flex-row justify-end',
-      width: 'min-w-fit',
-      transition: 'transition-all'
-    },
-    align: 'text-end',
-    width: 'w-fit',
-    color: 'text-gray-400 dark:text-gray-500',
-    size: {
-      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
-      '2xl': 'text-base'
-    }
-  },
-  progress: {
-    base: 'block appearance-none border-none overflow-hidden',
-    width: 'w-full [&::-webkit-progress-bar]:w-full',
-    size: {
-      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
-      '2xl': 'h-5'
-    },
-    rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
-    track: '[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700',
-    bar: '[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    background: '[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current',
-    indeterminate: {
-      base: 'indeterminate:relative',
-      rounded: 'indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full'
-    }
-  },
-  steps: {
-    base: 'grid grid-cols-1',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    size: {
-      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
-      '2xl': 'text-base'
-    }
-  },
-  step: {
-    base: 'transition-all opacity-0 truncate row-start-1 col-start-1',
-    align: 'text-end',
-    active: 'opacity-100',
-    first: 'text-gray-500 dark:text-gray-400'
-  },
-  animation: {
-    carousel: 'bar-animation-carousel',
-    'carousel-inverse': 'bar-animation-carousel-inverse',
-    swing: 'bar-animation-swing',
-    elastic: 'bar-animation-elastic'
-  },
-  default: {
-    color: 'primary',
-    size: 'md',
-    animation: 'carousel'
-  }
-}
-
-export const meter = {
-  wrapper: 'w-full flex flex-col gap-2',
-  indicator: {
-    container: 'min-w-fit transition-all',
-    text: 'text-gray-400 dark:text-gray-500 text-end',
-    size: {
-      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
-      '2xl': 'text-base'
-    }
-  },
-  meter: {
-    base: 'appearance-none block w-full bg-none overflow-y-hidden',
-    background: 'bg-gray-200 dark:bg-gray-700',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    ring: '',
-    rounded: 'rounded-full',
-    shadow: '',
-    size: {
-      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
-      '2xl': 'h-5'
-    },
-    appearance: {
-      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
-      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
-      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
-      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
-    },
-    bar: {
-      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
-      ring: '',
-      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
-      size: {
-        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
-        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
-        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
-        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
-        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
-        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
-        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
-      }
-    }
-  },
-  label: {
-    base: 'flex gap-2 items-center',
-    text: 'truncate',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    size: {
-      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
-      '2xl': 'text-base'
-    }
-  },
-  color: {
-    white: 'text-white dark:text-black',
-    black: 'text-black dark:text-white',
-    gray: 'text-gray-500 dark:text-gray-400'
-  },
-  default: {
-    size: 'md',
-    color: 'primary'
-  }
-}
-
-export const meterGroup = {
-  wrapper: 'flex flex-col gap-2 w-full',
-  base: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
-  background: 'bg-gray-200 dark:bg-gray-700',
-  transition: 'transition-all',
-  rounded: 'rounded-full',
-  shadow: '',
-  default: {
-    size: 'md'
-  }
-}
-
-// Forms
-
-export const input = {
-  wrapper: 'relative',
-  base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
-  rounded: 'rounded-md',
-  placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
-  size: {
-    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
-  },
-  gap: {
-    '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
-    sm: 'gap-x-1.5',
-    md: 'gap-x-2',
-    lg: 'gap-x-2.5',
-    xl: 'gap-x-2.5'
-  },
-  padding: {
-    '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
-  },
-  leading: {
-    padding: {
-      '2xs': 'ps-7',
-      xs: 'ps-8',
-      sm: 'ps-9',
-      md: 'ps-10',
-      lg: 'ps-11',
-      xl: 'ps-12'
-    }
-  },
-  trailing: {
-    padding: {
-      '2xs': 'pe-7',
-      xs: 'pe-8',
-      sm: 'pe-9',
-      md: 'pe-10',
-      lg: 'pe-11',
-      xl: 'pe-12'
-    }
-  },
-  color: {
-    white: {
-      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
-    },
-    gray: {
-      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
-    }
-  },
-  variant: {
-    outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
-    none: 'bg-transparent focus:ring-0 focus:shadow-none'
-  },
-  icon: {
-    base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    size: {
-      '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6'
-    },
-    leading: {
-      wrapper: 'absolute inset-y-0 start-0 flex items-center',
-      pointer: 'pointer-events-none',
-      padding: {
-        '2xs': 'ps-2',
-        xs: 'ps-2.5',
-        sm: 'ps-2.5',
-        md: 'ps-3',
-        lg: 'ps-3.5',
-        xl: 'ps-3.5'
-      }
-    },
-    trailing: {
-      wrapper: 'absolute inset-y-0 end-0 flex items-center',
-      pointer: 'pointer-events-none',
-      padding: {
-        '2xs': 'pe-2',
-        xs: 'pe-2.5',
-        sm: 'pe-2.5',
-        md: 'pe-3',
-        lg: 'pe-3.5',
-        xl: 'pe-3.5'
-      }
-    }
-  },
-  default: {
-    size: 'sm',
-    color: 'white',
-    variant: 'outline',
-    loadingIcon: 'i-heroicons-arrow-path-20-solid'
-  }
-}
-
-export const formGroup = {
-  wrapper: '',
-  label: {
-    wrapper: 'flex content-center items-center justify-between',
-    base: 'block font-medium text-gray-700 dark:text-gray-200',
-    // eslint-disable-next-line quotes
-    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
-  },
-  size: {
-    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
-  },
-  container: 'mt-1 relative',
-  description: 'text-gray-500 dark:text-gray-400',
-  hint: 'text-gray-500 dark:text-gray-400',
-  help: 'mt-2 text-gray-500 dark:text-gray-400',
-  error: 'mt-2 text-red-500 dark:text-red-400',
-  default: {
-    size: 'sm'
-  }
-}
-
-export const textarea = {
-  ...input,
-  default: {
-    size: 'sm',
-    color: 'white',
-    variant: 'outline'
-  }
-}
-
-export const select = {
-  ...input,
-  placeholder: 'text-gray-900 dark:text-white',
-  default: {
-    size: 'sm',
-    color: 'white',
-    variant: 'outline',
-    loadingIcon: 'i-heroicons-arrow-path-20-solid',
-    trailingIcon: 'i-heroicons-chevron-down-20-solid'
-  }
-}
-
-export const selectMenu = {
-  container: 'z-20 group',
-  width: 'w-full',
-  height: 'max-h-60',
-  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
-  background: 'bg-white dark:bg-gray-800',
-  shadow: 'shadow-lg',
-  rounded: 'rounded-md',
-  padding: 'p-1',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
-  input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
-  option: {
-    base: 'cursor-default select-none relative flex items-center justify-between gap-1',
-    rounded: 'rounded-md',
-    padding: 'px-2 py-1.5',
-    size: 'text-sm',
-    color: 'text-gray-900 dark:text-white',
-    container: 'flex items-center gap-2 min-w-0',
-    active: 'bg-gray-100 dark:bg-gray-900',
-    inactive: '',
-    selected: 'pe-7',
-    disabled: 'cursor-not-allowed opacity-50',
-    empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
-    icon: {
-      base: 'flex-shrink-0 h-4 w-4',
-      active: 'text-gray-900 dark:text-white',
-      inactive: 'text-gray-400 dark:text-gray-500'
-    },
-    selectedIcon: {
-      wrapper: 'absolute inset-y-0 end-0 flex items-center',
-      padding: 'pe-2',
-      base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
-    },
-    avatar: {
-      base: 'flex-shrink-0',
-      size: '3xs'
-    },
-    chip: {
-      base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
-    }
-  },
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    leaveActiveClass: 'transition ease-in duration-100',
-    leaveFromClass: 'opacity-100',
-    leaveToClass: 'opacity-0'
-  },
-  popper: {
-    placement: 'bottom-end'
-  },
-  default: {
-    selectedIcon: 'i-heroicons-check-20-solid'
-  },
-  arrow: {
-    ..._popperArrow,
-    ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
-    background: 'before:bg-white dark:before:bg-gray-700'
-  }
-}
-
-export const radioGroup = {
-  wrapper: 'relative flex items-start',
-  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
-  default: {
-    color: 'primary'
-  }
-}
-
-export const radio = {
-  wrapper: 'relative flex items-start',
-  base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
-  color: 'text-{color}-500 dark:text-{color}-400',
-  background: 'bg-white dark:bg-gray-900',
-  border: 'border border-gray-300 dark:border-gray-700',
-  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
-  required: 'text-sm text-red-500 dark:text-red-400',
-  help: 'text-sm text-gray-500 dark:text-gray-400',
-  default: {
-    color: 'primary'
-  }
-}
-
-export const checkbox = {
-  wrapper: 'relative flex items-start',
-  base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
-  rounded: 'rounded',
-  color: 'text-{color}-500 dark:text-{color}-400',
-  background: 'bg-white dark:bg-gray-900',
-  border: 'border border-gray-300 dark:border-gray-700',
-  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  label: 'font-medium text-gray-700 dark:text-gray-200',
-  required: 'text-red-500 dark:text-red-400',
-  help: 'text-gray-500 dark:text-gray-400',
-  default: {
-    color: 'primary'
-  }
-}
-
-export const toggle = {
-  base: 'relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
-  rounded: 'rounded-full',
-  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  active: 'bg-{color}-500 dark:bg-{color}-400',
-  inactive: 'bg-gray-200 dark:bg-gray-700',
-  container: {
-    base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
-    active: 'translate-x-4 rtl:-translate-x-4',
-    inactive: 'translate-x-0 rtl:-translate-x-0'
-  },
-  icon: {
-    base: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
-    active: 'opacity-100 ease-in duration-200',
-    inactive: 'opacity-0 ease-out duration-100',
-    on: 'h-3 w-3 text-{color}-500 dark:text-{color}-400',
-    off: 'h-3 w-3 text-gray-400 dark:text-gray-500'
-  },
-  default: {
-    onIcon: null,
-    offIcon: null,
-    color: 'primary'
-  }
-}
-
-export const range = {
-  wrapper: 'relative w-full flex items-center',
-  base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
-  rounded: 'rounded-lg',
-  background: 'bg-transparent',
-  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  progress: {
-    base: 'absolute pointer-events-none peer-disabled:bg-opacity-50',
-    rounded: 'rounded-s-lg',
-    background: 'bg-{color}-500 dark:bg-{color}-400',
-    size: {
-      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
-      '2xl': 'h-5'
-    }
-  },
-  thumb: {
-    base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
-    color: 'text-{color}-500 dark:text-{color}-400',
-    background: '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current',
-    ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
-    size: {
-      '2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
-      xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
-      sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      '2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
-    }
-  },
-  track: {
-    base: '[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50',
-    background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700',
-    rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
-    size: {
-      '2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
-      xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
-      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
-      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
-      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
-      xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
-      '2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
-    }
-  },
-  size: {
-    '2xs': 'h-1.5',
-    xs: 'h-2',
-    sm: 'h-3',
-    md: 'h-4',
-    lg: 'h-5',
-    xl: 'h-6',
-    '2xl': 'h-7'
-  },
-  default: {
-    size: 'md',
-    color: 'primary'
-  }
-}
-
-// Layout
-
-export const card = {
-  base: 'overflow-hidden',
-  background: 'bg-white dark:bg-gray-900',
-  divide: 'divide-y divide-gray-200 dark:divide-gray-800',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  rounded: 'rounded-lg',
-  shadow: 'shadow',
-  body: {
-    base: '',
-    background: '',
-    padding: 'px-4 py-5 sm:p-6'
-  },
-  header: {
-    base: '',
-    background: '',
-    padding: 'px-4 py-5 sm:px-6'
-  },
-  footer: {
-    base: '',
-    background: '',
-    padding: 'px-4 py-4 sm:px-6'
-  }
-}
-
-export const container = {
-  base: 'mx-auto',
-  padding: 'px-4 sm:px-6 lg:px-8',
-  constrained: 'max-w-7xl'
-}
-
-export const skeleton = {
-  base: 'animate-pulse',
-  background: 'bg-gray-100 dark:bg-gray-800',
-  rounded: 'rounded-md'
-}
-
-export const divider = {
-  wrapper: {
-    base: 'flex items-center align-center text-center w-full',
-    horizontal: 'flex-row',
-    vertical: 'flex-col'
-  },
-  container: {
-    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
-    horizontal: 'mx-3 whitespace-nowrap',
-    vertical: 'my-2'
-  },
-  border: {
-    base: 'flex border-gray-200 dark:border-gray-800',
-    horizontal: 'w-full',
-    vertical: 'h-full',
-    size: {
-      horizontal: 'border-t',
-      vertical: 'border-s'
-    }
-  },
-  icon: {
-    base: 'flex-shrink-0 w-5 h-5'
-  },
-  avatar: {
-    base: 'flex-shrink-0',
-    size: '2xs'
-  },
-  label: 'text-sm'
-}
-
-// Navigation
-
-export const verticalNavigation = {
-  wrapper: 'relative',
-  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
-  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-  padding: 'px-3 py-1.5',
-  width: 'w-full',
-  rounded: 'rounded-md',
-  font: 'font-medium',
-  size: 'text-sm',
-  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
-  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
-  label: 'truncate relative',
-  icon: {
-    base: 'flex-shrink-0 w-4 h-4',
-    active: 'text-gray-700 dark:text-gray-200',
-    inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
-  },
-  avatar: {
-    base: 'flex-shrink-0',
-    size: '3xs'
-  },
-  badge: {
-    base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
-    active: 'bg-white dark:bg-gray-900',
-    inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
-  }
-}
-
-export const commandPalette = {
-  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
-  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
-  input: {
-    wrapper: 'relative flex items-center',
-    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
-    padding: 'px-4',
-    height: 'h-12',
-    size: 'sm:text-sm',
-    icon: {
-      base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
-      size: 'h-4 w-4',
-      padding: 'ps-10'
-    },
-    closeButton: 'absolute end-4'
-  },
-  emptyState: {
-    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
-    label: 'text-sm text-center text-gray-900 dark:text-white',
-    queryLabel: 'text-sm text-center text-gray-900 dark:text-white',
-    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
-  },
-  group: {
-    wrapper: 'p-2',
-    label: 'px-2 my-2 text-xs font-semibold text-gray-900 dark:text-white',
-    container: 'text-sm text-gray-700 dark:text-gray-200',
-    command: {
-      base: 'flex justify-between select-none items-center rounded-md px-2 py-1.5 gap-2 relative',
-      active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
-      inactive: '',
-      label: 'flex items-center gap-1.5 min-w-0',
-      prefix: 'text-gray-400 dark:text-gray-500',
-      suffix: 'text-gray-400 dark:text-gray-500',
-      container: 'flex items-center gap-2 min-w-0',
-      icon: {
-        base: 'flex-shrink-0 w-4 h-4',
-        active: 'text-gray-900 dark:text-white',
-        inactive: 'text-gray-400 dark:text-gray-500'
-      },
-      selectedIcon: {
-        base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
-      },
-      avatar: {
-        base: 'flex-shrink-0',
-        size: '3xs' as const
-      },
-      chip: {
-        base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
-      },
-      disabled: 'opacity-50',
-      shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5'
-    },
-    active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
-    inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400'
-  },
-  default: {
-    icon: 'i-heroicons-magnifying-glass-20-solid',
-    loadingIcon: 'i-heroicons-arrow-path-20-solid',
-    emptyState: {
-      icon: 'i-heroicons-magnifying-glass-20-solid',
-      label: 'We couldn\'t find any items.',
-      queryLabel: 'We couldn\'t find any items with that term. Please try again.'
-    },
-    closeButton: null,
-    selectedIcon: 'i-heroicons-check-20-solid'
-  }
-}
-
-export const pagination = {
-  wrapper: 'flex items-center -space-x-px',
-  base: '',
-  rounded: 'first:rounded-s-md last:rounded-e-md',
-  default: {
-    size: 'sm',
-    activeButton: {
-      color: 'primary'
-    },
-    inactiveButton: {
-      color: 'white'
-    },
-    firstButton: {
-      color: 'white',
-      class: 'rtl:[&_span:first-child]:rotate-180',
-      icon: 'i-heroicons-chevron-double-left-20-solid'
-    },
-    lastButton: {
-      color: 'white',
-      class: 'rtl:[&_span:last-child]:rotate-180',
-      icon: 'i-heroicons-chevron-double-right-20-solid'
-    },
-    prevButton: {
-      color: 'white',
-      class: 'rtl:[&_span:first-child]:rotate-180',
-      icon: 'i-heroicons-chevron-left-20-solid'
-    },
-    nextButton: {
-      color: 'white',
-      class: 'rtl:[&_span:last-child]:rotate-180',
-      icon: 'i-heroicons-chevron-right-20-solid '
-    }
-  }
-}
-
-export const tabs = {
-  wrapper: 'relative space-y-2',
-  container: 'relative w-full',
-  base: 'focus:outline-none',
-  list: {
-    base: 'relative',
-    background: 'bg-gray-100 dark:bg-gray-800',
-    rounded: 'rounded-lg',
-    shadow: '',
-    padding: 'p-1',
-    height: 'h-10',
-    width: 'w-full',
-    marker: {
-      wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
-      base: 'w-full h-full',
-      background: 'bg-white dark:bg-gray-900',
-      rounded: 'rounded-md',
-      shadow: 'shadow-sm'
-    },
-    tab: {
-      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
-      background: '',
-      active: 'text-gray-900 dark:text-white',
-      inactive: 'text-gray-500 dark:text-gray-400',
-      height: 'h-8',
-      padding: 'px-3',
-      size: 'text-sm',
-      font: 'font-medium',
-      rounded: 'rounded-md',
-      shadow: ''
-    }
-  }
-}
-
-// Overlays
-
-export const modal = {
-  wrapper: 'relative z-50',
-  inner: 'fixed inset-0 overflow-y-auto',
-  container: 'flex min-h-full items-end sm:items-center justify-center text-center',
-  padding: 'p-4 sm:p-0',
-  margin: 'sm:my-8',
-  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
-  overlay: {
-    base: 'fixed inset-0 transition-opacity',
-    background: 'bg-gray-200/75 dark:bg-gray-800/75',
-    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
-    transition: {
-      enter: 'ease-out duration-300',
-      enterFrom: 'opacity-0',
-      enterTo: 'opacity-100',
-      leave: 'ease-in duration-200',
-      leaveFrom: 'opacity-100',
-      leaveTo: 'opacity-0'
-    }
-  },
-  background: 'bg-white dark:bg-gray-900',
-  ring: '',
-  rounded: 'rounded-lg',
-  shadow: 'shadow-xl',
-  width: 'sm:max-w-lg',
-  height: '',
-  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
-  transition: {
-    enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
-    leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-  }
-}
-
-export const slideover = {
-  wrapper: 'fixed inset-0 flex z-50',
-  overlay: {
-    base: 'fixed inset-0 transition-opacity',
-    background: 'bg-gray-200/75 dark:bg-gray-800/75',
-    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
-    transition: {
-      enter: 'ease-in-out duration-500',
-      enterFrom: 'opacity-0',
-      enterTo: 'opacity-100',
-      leave: 'ease-in-out duration-500',
-      leaveFrom: 'opacity-100',
-      leaveTo: 'opacity-0'
-    }
-  },
-  base: 'relative flex-1 flex flex-col w-full focus:outline-none',
-  background: 'bg-white dark:bg-gray-900',
-  ring: '',
-  rounded: '',
-  padding: '',
-  shadow: 'shadow-xl',
-  width: 'w-screen max-w-md',
-  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
-  transition: {
-    enter: 'transform transition ease-in-out duration-300',
-    leave: 'transform transition ease-in-out duration-200'
-  }
-}
-
-export const tooltip = {
-  wrapper: 'relative inline-flex',
-  container: 'z-20 group',
-  width: 'max-w-xs',
-  background: 'bg-white dark:bg-gray-900',
-  color: 'text-gray-900 dark:text-white',
-  shadow: 'shadow',
-  rounded: 'rounded',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
-  shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: 'transition ease-out duration-200',
-    enterFromClass: 'opacity-0 translate-y-1',
-    enterToClass: 'opacity-100 translate-y-0',
-    leaveActiveClass: 'transition ease-in duration-150',
-    leaveFromClass: 'opacity-100 translate-y-0',
-    leaveToClass: 'opacity-0 translate-y-1'
-  },
-  popper: {
-    strategy: 'fixed'
-  },
-  arrow: _popperArrow
-}
-
-export const popover = {
-  wrapper: 'relative',
-  container: 'z-20 group',
-  width: '',
-  background: 'bg-white dark:bg-gray-900',
-  shadow: 'shadow-lg',
-  rounded: 'rounded-md',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  base: 'overflow-hidden focus:outline-none relative',
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: 'transition ease-out duration-200',
-    enterFromClass: 'opacity-0 translate-y-1',
-    enterToClass: 'opacity-100 translate-y-0',
-    leaveActiveClass: 'transition ease-in duration-150',
-    leaveFromClass: 'opacity-100 translate-y-0',
-    leaveToClass: 'opacity-0 translate-y-1'
-  },
-  popper: {
-    strategy: 'fixed'
-  },
-  arrow: _popperArrow
-}
-
-export const contextMenu = {
-  wrapper: 'relative',
-  container: 'z-20 group',
-  width: '',
-  background: 'bg-white dark:bg-gray-900',
-  shadow: 'shadow-lg',
-  rounded: 'rounded-md',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  base: 'overflow-hidden focus:outline-none relative',
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: 'transition ease-out duration-200',
-    enterFromClass: 'opacity-0 translate-y-1',
-    enterToClass: 'opacity-100 translate-y-0',
-    leaveActiveClass: 'transition ease-in duration-150',
-    leaveFromClass: 'opacity-100 translate-y-0',
-    leaveToClass: 'opacity-0 translate-y-1'
-  },
-  popper: {
-    placement: 'bottom-start',
-    scroll: false
-  },
-  arrow: _popperArrow
-}
-
-export const notification = {
-  wrapper: 'w-full pointer-events-auto',
-  container: 'relative overflow-hidden',
-  title: 'text-sm font-medium text-gray-900 dark:text-white',
-  description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
-  background: 'bg-white dark:bg-gray-900',
-  shadow: 'shadow-lg',
-  rounded: 'rounded-lg',
-  padding: 'p-4',
-  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  icon: {
-    base: 'flex-shrink-0 w-5 h-5',
-    color: 'text-{color}-500 dark:text-{color}-400'
-  },
-  avatar: {
-    base: 'flex-shrink-0 self-center',
-    size: 'md' as const
-  },
-  progress: {
-    base: 'absolute bottom-0 end-0 start-0 h-1',
-    background: 'bg-{color}-500 dark:bg-{color}-400'
-  },
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: 'transform ease-out duration-300 transition',
-    enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
-    enterToClass: 'translate-y-0 opacity-100 sm:translate-x-0',
-    leaveActiveClass: 'transition ease-in duration-100',
-    leaveFromClass: 'opacity-100',
-    leaveToClass: 'opacity-0'
-  },
-  default: {
-    color: 'primary',
-    icon: null,
-    closeButton: {
-      icon: 'i-heroicons-x-mark-20-solid',
-      color: 'gray',
-      variant: 'link',
-      padded: false
-    },
-    actionButton: {
-      size: 'xs',
-      color: 'white'
-    }
-  }
-}
-
-export const notifications = {
-  wrapper: 'fixed flex flex-col justify-end z-[55]',
-  position: 'bottom-0 end-0',
-  width: 'w-full sm:w-96',
-  container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
-}
diff --git a/src/runtime/ui.config/_popperArrow.ts b/src/runtime/ui.config/_popperArrow.ts
new file mode 100644
index 0000000000..c136506d66
--- /dev/null
+++ b/src/runtime/ui.config/_popperArrow.ts
@@ -0,0 +1,8 @@
+export default {
+	base: 'before:w-2 before:h-2',
+	ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
+	rounded: 'before:rounded-sm',
+	background: 'before:bg-gray-200 dark:before:bg-gray-800',
+	shadow: 'before:shadow',
+	placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/data/table.ts b/src/runtime/ui.config/data/table.ts
new file mode 100644
index 0000000000..5bab1c290a
--- /dev/null
+++ b/src/runtime/ui.config/data/table.ts
@@ -0,0 +1,59 @@
+export default {
+  wrapper: 'relative overflow-x-auto',
+  base: 'min-w-full table-fixed',
+  divide: 'divide-y divide-gray-300 dark:divide-gray-700',
+  thead: '',
+  tbody: 'divide-y divide-gray-200 dark:divide-gray-800',
+  tr: {
+    base: '',
+    selected: 'bg-gray-50 dark:bg-gray-800/50',
+    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer'
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-3 py-3.5',
+    color: 'text-gray-900 dark:text-white',
+    font: 'font-semibold',
+    size: 'text-sm'
+  },
+  td: {
+    base: 'whitespace-nowrap',
+    padding: 'px-3 py-4',
+    color: 'text-gray-500 dark:text-gray-400',
+    font: '',
+    size: 'text-sm'
+  },
+  checkbox: {
+    padding: 'ps-4'
+  },
+  loadingState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4 animate-spin'
+  },
+  emptyState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  },
+  default: {
+    sortAscIcon: 'i-heroicons-bars-arrow-up-20-solid',
+    sortDescIcon: 'i-heroicons-bars-arrow-down-20-solid',
+    sortButton: {
+      icon: 'i-heroicons-arrows-up-down-20-solid',
+      trailing: true,
+      square: true,
+      color: 'gray',
+      variant: 'ghost',
+      class: '-m-1.5'
+    },
+    loadingState: {
+      icon: 'i-heroicons-arrow-path-20-solid',
+      label: 'Loading...'
+    },
+    emptyState: {
+      icon: 'i-heroicons-circle-stack-20-solid',
+      label: 'No items.'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/accordion.ts b/src/runtime/ui.config/elements/accordion.ts
new file mode 100644
index 0000000000..55a3788450
--- /dev/null
+++ b/src/runtime/ui.config/elements/accordion.ts
@@ -0,0 +1,20 @@
+export default {
+  wrapper: 'w-full flex flex-col',
+  item: {
+    base: '',
+    size: 'text-sm',
+    color: 'text-gray-500 dark:text-gray-400',
+    padding: 'pt-1.5 pb-3',
+    icon: 'ms-auto transform transition-transform duration-200'
+  },
+  transition: {
+    enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out',
+    leaveActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out'
+  },
+  default: {
+    openIcon: 'i-heroicons-chevron-down-20-solid',
+    closeIcon: '',
+    class: 'mb-1.5 w-full',
+    variant: 'soft'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/alert.ts b/src/runtime/ui.config/elements/alert.ts
new file mode 100644
index 0000000000..4f190bbc2b
--- /dev/null
+++ b/src/runtime/ui.config/elements/alert.ts
@@ -0,0 +1,37 @@
+export default {
+  wrapper: 'w-full relative overflow-hidden',
+  title: 'text-sm font-medium',
+  description: 'mt-1 text-sm leading-4 opacity-90',
+  shadow: '',
+  rounded: 'rounded-lg',
+  padding: 'p-3',
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5'
+  },
+  avatar: {
+    base: 'flex-shrink-0 self-center',
+    size: 'md'
+  },
+  color: {
+    white: {
+      solid: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800'
+    }
+  },
+  variant: {
+    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
+    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
+    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
+    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
+  },
+  default: {
+    color: 'white',
+    variant: 'solid',
+    icon: null,
+    closeButton: null,
+    actionButton: {
+      size: 'xs',
+      color: 'primary',
+      variant: 'link'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/avatar.ts b/src/runtime/ui.config/elements/avatar.ts
new file mode 100644
index 0000000000..46255bf740
--- /dev/null
+++ b/src/runtime/ui.config/elements/avatar.ts
@@ -0,0 +1,59 @@
+export default {
+  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  rounded: 'rounded-full',
+  text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
+  placeholder: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
+  size: {
+    '3xs': 'h-4 w-4 text-[8px]',
+    '2xs': 'h-5 w-5 text-[10px]',
+    xs: 'h-6 w-6 text-xs',
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-10 w-10 text-base',
+    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'
+  },
+  chip: {
+    base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
+    background: 'bg-{color}-500 dark:bg-{color}-400',
+    position: {
+      'top-right': 'top-0 right-0',
+      'bottom-right': 'bottom-0 right-0',
+      'top-left': 'top-0 left-0',
+      'bottom-left': 'bottom-0 left-0'
+    },
+    size: {
+      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
+    }
+  },
+  icon: {
+    base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
+    size: {
+      '3xs': 'h-2 w-2',
+      '2xs': 'h-2.5 w-2.5',
+      xs: 'h-3 w-3',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-7 w-7',
+      '2xl': 'h-8 w-8',
+      '3xl': 'h-10 w-10'
+    }
+  },
+  default: {
+    size: 'sm',
+    icon: null,
+    chipColor: null,
+    chipPosition: 'top-right'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/avatarGroup.ts b/src/runtime/ui.config/elements/avatarGroup.ts
new file mode 100644
index 0000000000..adbf421114
--- /dev/null
+++ b/src/runtime/ui.config/elements/avatarGroup.ts
@@ -0,0 +1,5 @@
+export default {
+  wrapper: 'inline-flex flex-row-reverse justify-end',
+  ring: 'ring-2 ring-white dark:ring-gray-900',
+  margin: '-me-1.5 first:me-0'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/badge.ts b/src/runtime/ui.config/elements/badge.ts
new file mode 100644
index 0000000000..8363271ab9
--- /dev/null
+++ b/src/runtime/ui.config/elements/badge.ts
@@ -0,0 +1,33 @@
+export default {
+  base: 'inline-flex items-center',
+  rounded: 'rounded-md',
+  font: 'font-medium',
+  size: {
+    xs: 'text-xs px-1.5 py-0.5',
+    sm: 'text-xs px-2 py-1',
+    md: 'text-sm px-2 py-1',
+    lg: 'text-sm px-2.5 py-1.5'
+  },
+  color: {
+    white: {
+      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
+    },
+    gray: {
+      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
+    },
+    black: {
+      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
+    }
+  },
+  variant: {
+    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
+    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
+    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
+    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
+  },
+  default: {
+    size: 'sm',
+    variant: 'solid',
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/button.ts b/src/runtime/ui.config/elements/button.ts
new file mode 100644
index 0000000000..fa284e394f
--- /dev/null
+++ b/src/runtime/ui.config/elements/button.ts
@@ -0,0 +1,76 @@
+export default {
+  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
+  font: 'font-medium',
+  rounded: 'rounded-md',
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  gap: {
+    '2xs': 'gap-x-1',
+    xs: 'gap-x-1.5',
+    sm: 'gap-x-1.5',
+    md: 'gap-x-2',
+    lg: 'gap-x-2.5',
+    xl: 'gap-x-2.5'
+  },
+  padding: {
+    '2xs': 'px-2 py-1',
+    xs: 'px-2.5 py-1.5',
+    sm: 'px-2.5 py-1.5',
+    md: 'px-3 py-2',
+    lg: 'px-3.5 py-2.5',
+    xl: 'px-3.5 py-2.5'
+  },
+  square: {
+    '2xs': 'p-1',
+    xs: 'p-1.5',
+    sm: 'p-1.5',
+    md: 'p-2',
+    lg: 'p-2.5',
+    xl: 'p-2.5'
+  },
+  color: {
+    white: {
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    },
+    gray: {
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    },
+    black: {
+      solid: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    }
+  },
+  variant: {
+    solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
+    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
+  },
+  icon: {
+    base: 'flex-shrink-0',
+    size: {
+      '2xs': 'h-4 w-4',
+      xs: 'h-4 w-4',
+      sm: 'h-5 w-5',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6'
+    }
+  },
+  default: {
+    size: 'sm',
+    variant: 'solid',
+    color: 'primary',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/buttonGroup.ts b/src/runtime/ui.config/elements/buttonGroup.ts
new file mode 100644
index 0000000000..7fe877686d
--- /dev/null
+++ b/src/runtime/ui.config/elements/buttonGroup.ts
@@ -0,0 +1,8 @@
+export default {
+  wrapper: {
+    horizontal: 'inline-flex -space-x-px',
+    vertical: 'inline-flex flex-col -space-y-px'
+  },
+  rounded: 'rounded-md',
+  shadow: 'shadow-sm'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/dropdown.ts b/src/runtime/ui.config/elements/dropdown.ts
new file mode 100644
index 0000000000..93f072279b
--- /dev/null
+++ b/src/runtime/ui.config/elements/dropdown.ts
@@ -0,0 +1,52 @@
+import _popperArrow from "../_popperArrow"
+
+export default {
+  wrapper: 'relative inline-flex text-left rtl:text-right',
+  container: 'z-20 group',
+  width: 'w-48',
+  height: '',
+  background: 'bg-white dark:bg-gray-800',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
+  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
+  divide: 'divide-y divide-gray-200 dark:divide-gray-700',
+  padding: 'p-1',
+  item: {
+    base: 'group flex items-center gap-2 w-full',
+    rounded: 'rounded-md',
+    padding: 'px-2 py-1.5',
+    size: 'text-sm',
+    active: 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white',
+    inactive: 'text-gray-700 dark:text-gray-200',
+    disabled: 'cursor-not-allowed opacity-50',
+    icon: {
+      base: 'flex-shrink-0 h-4 w-4',
+      active: 'text-gray-500 dark:text-gray-400',
+      inactive: 'text-gray-400 dark:text-gray-500'
+    },
+    avatar: {
+      base: 'flex-shrink-0',
+      size: '3xs'
+    },
+    shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition duration-100 ease-out',
+    enterFromClass: 'transform scale-95 opacity-0',
+    enterToClass: 'transform scale-100 opacity-100',
+    leaveActiveClass: 'transition duration-75 ease-in',
+    leaveFromClass: 'transform scale-100 opacity-100',
+    leaveToClass: 'transform scale-95 opacity-0'
+  },
+  popper: {
+    placement: 'bottom-end',
+    strategy: 'fixed'
+  },
+  arrow: {
+    ..._popperArrow,
+    ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
+    background: 'before:bg-white dark:before:bg-gray-700'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/kbd.ts b/src/runtime/ui.config/elements/kbd.ts
new file mode 100644
index 0000000000..fc360ff8fc
--- /dev/null
+++ b/src/runtime/ui.config/elements/kbd.ts
@@ -0,0 +1,16 @@
+export default {
+  base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
+  padding: 'px-1',
+  size: {
+    xs: 'h-4 min-w-[16px] text-[10px]',
+    sm: 'h-5 min-w-[20px] text-[11px]',
+    md: 'h-6 min-w-[24px] text-[12px]'
+  },
+  rounded: 'rounded',
+  font: 'font-medium font-sans',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
+  default: {
+    size: 'sm'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/meter.ts b/src/runtime/ui.config/elements/meter.ts
new file mode 100644
index 0000000000..4fd3e5f6b9
--- /dev/null
+++ b/src/runtime/ui.config/elements/meter.ts
@@ -0,0 +1,76 @@
+export default {
+  wrapper: 'w-full flex flex-col gap-2',
+  indicator: {
+    container: 'min-w-fit transition-all',
+    text: 'text-gray-400 dark:text-gray-500 text-end',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  meter: {
+    base: 'appearance-none block w-full bg-none overflow-y-hidden',
+    background: 'bg-gray-200 dark:bg-gray-700',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    ring: '',
+    rounded: 'rounded-full',
+    shadow: '',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-0.5',
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+      xl: 'h-4',
+      '2xl': 'h-5'
+    },
+    appearance: {
+      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
+      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
+      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
+      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
+    },
+    bar: {
+      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
+      ring: '',
+      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
+      size: {
+        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
+        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
+        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
+        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
+        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
+        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
+        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
+      }
+    }
+  },
+  label: {
+    base: 'flex gap-2 items-center',
+    text: 'truncate',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  color: {
+    white: 'text-white dark:text-black',
+    black: 'text-black dark:text-white',
+    gray: 'text-gray-500 dark:text-gray-400'
+  },
+  default: {
+    size: 'md',
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/meterGroup.ts b/src/runtime/ui.config/elements/meterGroup.ts
new file mode 100644
index 0000000000..4260aeb064
--- /dev/null
+++ b/src/runtime/ui.config/elements/meterGroup.ts
@@ -0,0 +1,11 @@
+export default {
+  wrapper: 'flex flex-col gap-2 w-full',
+  base: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
+  background: 'bg-gray-200 dark:bg-gray-700',
+  transition: 'transition-all',
+  rounded: 'rounded-full',
+  shadow: '',
+  default: {
+    size: 'md'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/elements/progress.ts b/src/runtime/ui.config/elements/progress.ts
new file mode 100644
index 0000000000..154a1bf867
--- /dev/null
+++ b/src/runtime/ui.config/elements/progress.ts
@@ -0,0 +1,74 @@
+export default {
+  wrapper: 'w-full flex flex-col gap-2',
+  indicator: {
+    container: {
+      base: 'flex flex-row justify-end',
+      width: 'min-w-fit',
+      transition: 'transition-all'
+    },
+    align: 'text-end',
+    width: 'w-fit',
+    color: 'text-gray-400 dark:text-gray-500',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  progress: {
+    base: 'block appearance-none border-none overflow-hidden',
+    width: 'w-full [&::-webkit-progress-bar]:w-full',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-0.5',
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+      xl: 'h-4',
+      '2xl': 'h-5'
+    },
+    rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
+    track: '[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700',
+    bar: '[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    background: '[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current',
+    indeterminate: {
+      base: 'indeterminate:relative',
+      rounded: 'indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full'
+    }
+  },
+  steps: {
+    base: 'grid grid-cols-1',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  step: {
+    base: 'transition-all opacity-0 truncate row-start-1 col-start-1',
+    align: 'text-end',
+    active: 'opacity-100',
+    first: 'text-gray-500 dark:text-gray-400'
+  },
+  animation: {
+    carousel: 'bar-animation-carousel',
+    'carousel-inverse': 'bar-animation-carousel-inverse',
+    swing: 'bar-animation-swing',
+    elastic: 'bar-animation-elastic'
+  },
+  default: {
+    color: 'primary',
+    size: 'md',
+    animation: 'carousel'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/checkbox.ts b/src/runtime/ui.config/forms/checkbox.ts
new file mode 100644
index 0000000000..79986ac517
--- /dev/null
+++ b/src/runtime/ui.config/forms/checkbox.ts
@@ -0,0 +1,15 @@
+export default {
+  wrapper: 'relative flex items-start',
+  base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  rounded: 'rounded',
+  color: 'text-{color}-500 dark:text-{color}-400',
+  background: 'bg-white dark:bg-gray-900',
+  border: 'border border-gray-300 dark:border-gray-700',
+  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  label: 'font-medium text-gray-700 dark:text-gray-200',
+  required: 'text-red-500 dark:text-red-400',
+  help: 'text-gray-500 dark:text-gray-400',
+  default: {
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/formGroup.ts b/src/runtime/ui.config/forms/formGroup.ts
new file mode 100644
index 0000000000..4e3e3f5a79
--- /dev/null
+++ b/src/runtime/ui.config/forms/formGroup.ts
@@ -0,0 +1,25 @@
+export default {
+  wrapper: '',
+  label: {
+    wrapper: 'flex content-center items-center justify-between',
+    base: 'block font-medium text-gray-700 dark:text-gray-200',
+    // eslint-disable-next-line quotes
+    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
+  },
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  container: 'mt-1 relative',
+  description: 'text-gray-500 dark:text-gray-400',
+  hint: 'text-gray-500 dark:text-gray-400',
+  help: 'mt-2 text-gray-500 dark:text-gray-400',
+  error: 'mt-2 text-red-500 dark:text-red-400',
+  default: {
+    size: 'sm'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/ui.config/forms/input.ts
new file mode 100644
index 0000000000..725030ee24
--- /dev/null
+++ b/src/runtime/ui.config/forms/input.ts
@@ -0,0 +1,104 @@
+export default {
+  wrapper: 'relative',
+  base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+  rounded: 'rounded-md',
+  placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  gap: {
+    '2xs': 'gap-x-1',
+    xs: 'gap-x-1.5',
+    sm: 'gap-x-1.5',
+    md: 'gap-x-2',
+    lg: 'gap-x-2.5',
+    xl: 'gap-x-2.5'
+  },
+  padding: {
+    '2xs': 'px-2 py-1',
+    xs: 'px-2.5 py-1.5',
+    sm: 'px-2.5 py-1.5',
+    md: 'px-3 py-2',
+    lg: 'px-3.5 py-2.5',
+    xl: 'px-3.5 py-2.5'
+  },
+  leading: {
+    padding: {
+      '2xs': 'ps-7',
+      xs: 'ps-8',
+      sm: 'ps-9',
+      md: 'ps-10',
+      lg: 'ps-11',
+      xl: 'ps-12'
+    }
+  },
+  trailing: {
+    padding: {
+      '2xs': 'pe-7',
+      xs: 'pe-8',
+      sm: 'pe-9',
+      md: 'pe-10',
+      lg: 'pe-11',
+      xl: 'pe-12'
+    }
+  },
+  color: {
+    white: {
+      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    },
+    gray: {
+      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    }
+  },
+  variant: {
+    outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
+    none: 'bg-transparent focus:ring-0 focus:shadow-none'
+  },
+  icon: {
+    base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    size: {
+      '2xs': 'h-4 w-4',
+      xs: 'h-4 w-4',
+      sm: 'h-5 w-5',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6'
+    },
+    leading: {
+      wrapper: 'absolute inset-y-0 start-0 flex items-center',
+      pointer: 'pointer-events-none',
+      padding: {
+        '2xs': 'ps-2',
+        xs: 'ps-2.5',
+        sm: 'ps-2.5',
+        md: 'ps-3',
+        lg: 'ps-3.5',
+        xl: 'ps-3.5'
+      }
+    },
+    trailing: {
+      wrapper: 'absolute inset-y-0 end-0 flex items-center',
+      pointer: 'pointer-events-none',
+      padding: {
+        '2xs': 'pe-2',
+        xs: 'pe-2.5',
+        sm: 'pe-2.5',
+        md: 'pe-3',
+        lg: 'pe-3.5',
+        xl: 'pe-3.5'
+      }
+    }
+  },
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/radio.ts b/src/runtime/ui.config/forms/radio.ts
new file mode 100644
index 0000000000..1b78c34ed2
--- /dev/null
+++ b/src/runtime/ui.config/forms/radio.ts
@@ -0,0 +1,14 @@
+export default {
+  wrapper: 'relative flex items-start',
+  base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  color: 'text-{color}-500 dark:text-{color}-400',
+  background: 'bg-white dark:bg-gray-900',
+  border: 'border border-gray-300 dark:border-gray-700',
+  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
+  required: 'text-sm text-red-500 dark:text-red-400',
+  help: 'text-sm text-gray-500 dark:text-gray-400',
+  default: {
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/radioGroup.ts b/src/runtime/ui.config/forms/radioGroup.ts
new file mode 100644
index 0000000000..4d93a1ba75
--- /dev/null
+++ b/src/runtime/ui.config/forms/radioGroup.ts
@@ -0,0 +1,7 @@
+export default {
+  wrapper: 'relative flex items-start',
+  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
+  default: {
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/range.ts b/src/runtime/ui.config/forms/range.ts
new file mode 100644
index 0000000000..02ef06ead1
--- /dev/null
+++ b/src/runtime/ui.config/forms/range.ts
@@ -0,0 +1,63 @@
+export default {
+  wrapper: 'relative w-full flex items-center',
+  base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
+  rounded: 'rounded-lg',
+  background: 'bg-transparent',
+  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  progress: {
+    base: 'absolute pointer-events-none peer-disabled:bg-opacity-50',
+    rounded: 'rounded-s-lg',
+    background: 'bg-{color}-500 dark:bg-{color}-400',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-0.5',
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+      xl: 'h-4',
+      '2xl': 'h-5'
+    }
+  },
+  thumb: {
+    base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    background: '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current',
+    ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
+    size: {
+      '2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
+      xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
+      sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      '2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
+    }
+  },
+  track: {
+    base: '[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50',
+    background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700',
+    rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
+    size: {
+      '2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
+      xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
+      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
+      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
+      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
+      xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
+      '2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
+    }
+  },
+  size: {
+    '2xs': 'h-1.5',
+    xs: 'h-2',
+    sm: 'h-3',
+    md: 'h-4',
+    lg: 'h-5',
+    xl: 'h-6',
+    '2xl': 'h-7'
+  },
+  default: {
+    size: 'md',
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/select.ts b/src/runtime/ui.config/forms/select.ts
new file mode 100644
index 0000000000..0ef6f2aa8d
--- /dev/null
+++ b/src/runtime/ui.config/forms/select.ts
@@ -0,0 +1,13 @@
+import input from "./input"
+
+export default {
+  ...input,
+  placeholder: 'text-gray-900 dark:text-white',
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid',
+    trailingIcon: 'i-heroicons-chevron-down-20-solid'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/selectMenu.ts b/src/runtime/ui.config/forms/selectMenu.ts
new file mode 100644
index 0000000000..9298fee9ee
--- /dev/null
+++ b/src/runtime/ui.config/forms/selectMenu.ts
@@ -0,0 +1,61 @@
+import _popperArrow from "../_popperArrow"
+
+export default {
+  container: 'z-20 group',
+  width: 'w-full',
+  height: 'max-h-60',
+  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
+  background: 'bg-white dark:bg-gray-800',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  padding: 'p-1',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
+  input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
+  option: {
+    base: 'cursor-default select-none relative flex items-center justify-between gap-1',
+    rounded: 'rounded-md',
+    padding: 'px-2 py-1.5',
+    size: 'text-sm',
+    color: 'text-gray-900 dark:text-white',
+    container: 'flex items-center gap-2 min-w-0',
+    active: 'bg-gray-100 dark:bg-gray-900',
+    inactive: '',
+    selected: 'pe-7',
+    disabled: 'cursor-not-allowed opacity-50',
+    empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
+    icon: {
+      base: 'flex-shrink-0 h-4 w-4',
+      active: 'text-gray-900 dark:text-white',
+      inactive: 'text-gray-400 dark:text-gray-500'
+    },
+    selectedIcon: {
+      wrapper: 'absolute inset-y-0 end-0 flex items-center',
+      padding: 'pe-2',
+      base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
+    },
+    avatar: {
+      base: 'flex-shrink-0',
+      size: '3xs'
+    },
+    chip: {
+      base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
+    }
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    leaveActiveClass: 'transition ease-in duration-100',
+    leaveFromClass: 'opacity-100',
+    leaveToClass: 'opacity-0'
+  },
+  popper: {
+    placement: 'bottom-end'
+  },
+  default: {
+    selectedIcon: 'i-heroicons-check-20-solid'
+  },
+  arrow: {
+    ..._popperArrow,
+    ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
+    background: 'before:bg-white dark:before:bg-gray-700'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/textarea.ts b/src/runtime/ui.config/forms/textarea.ts
new file mode 100644
index 0000000000..4748eaa8f6
--- /dev/null
+++ b/src/runtime/ui.config/forms/textarea.ts
@@ -0,0 +1,10 @@
+import input from "./input"
+
+export default {
+  ...input,
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/forms/toggle.ts b/src/runtime/ui.config/forms/toggle.ts
new file mode 100644
index 0000000000..ebebc2bbbb
--- /dev/null
+++ b/src/runtime/ui.config/forms/toggle.ts
@@ -0,0 +1,24 @@
+export default {
+  base: 'relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+  rounded: 'rounded-full',
+  ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  active: 'bg-{color}-500 dark:bg-{color}-400',
+  inactive: 'bg-gray-200 dark:bg-gray-700',
+  container: {
+    base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
+    active: 'translate-x-4 rtl:-translate-x-4',
+    inactive: 'translate-x-0 rtl:-translate-x-0'
+  },
+  icon: {
+    base: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
+    active: 'opacity-100 ease-in duration-200',
+    inactive: 'opacity-0 ease-out duration-100',
+    on: 'h-3 w-3 text-{color}-500 dark:text-{color}-400',
+    off: 'h-3 w-3 text-gray-400 dark:text-gray-500'
+  },
+  default: {
+    onIcon: null,
+    offIcon: null,
+    color: 'primary'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/index.ts b/src/runtime/ui.config/index.ts
new file mode 100644
index 0000000000..3a6dc73dd1
--- /dev/null
+++ b/src/runtime/ui.config/index.ts
@@ -0,0 +1,48 @@
+// Data
+export { default as table } from './data/table';
+
+// Elements
+export { default as avatar } from './elements/avatar';
+export { default as avatarGroup } from './elements/avatarGroup';
+export { default as badge } from './elements/badge';
+export { default as button } from './elements/button';
+export { default as buttonGroup } from './elements/buttonGroup';
+export { default as dropdown } from './elements/dropdown';
+export { default as accordion } from './elements/accordion';
+export { default as alert } from './elements/alert';
+export { default as kbd } from './elements/kbd';
+export { default as progress } from './elements/progress';
+export { default as meter } from './elements/meter';
+
+// Forms
+export { default as input } from './forms/input';
+export { default as formGroup } from './forms/formGroup';
+export { default as textarea } from './forms/textarea';
+export { default as select } from './forms/select';
+export { default as selectMenu } from './forms/selectMenu';
+export { default as radioGroup } from './forms/radioGroup';
+export { default as radio } from './forms/radio';
+export { default as checkbox } from './forms/checkbox';
+export { default as toggle } from './forms/toggle';
+export { default as range } from './forms/range';
+
+// Layout
+export { default as card } from './layout/card';
+export { default as container } from './layout/container';
+export { default as skeleton } from './layout/skeleton';
+export { default as divider } from './layout/divider';
+
+// Navigation
+export { default as verticalNavigation } from './navigation/verticalNavigation';
+export { default as commandPalette } from './navigation/commandPalette';
+export { default as pagination } from './navigation/pagination';
+export { default as tabs } from './navigation/tabs';
+
+// Overlays
+export { default as modal } from './overlays/modal'
+export { default as slideover } from './overlays/slideover'
+export { default as tooltip } from './overlays/tooltip'
+export { default as popover } from './overlays/popover'
+export { default as contextMenu } from './overlays/contextMenu'
+export { default as notification } from './overlays/notification'
+export { default as notifications } from './overlays/notifications'
diff --git a/src/runtime/ui.config/layout/card.ts b/src/runtime/ui.config/layout/card.ts
new file mode 100644
index 0000000000..eea4e6a23d
--- /dev/null
+++ b/src/runtime/ui.config/layout/card.ts
@@ -0,0 +1,23 @@
+export default {
+  base: 'overflow-hidden',
+  background: 'bg-white dark:bg-gray-900',
+  divide: 'divide-y divide-gray-200 dark:divide-gray-800',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  rounded: 'rounded-lg',
+  shadow: 'shadow',
+  body: {
+    base: '',
+    background: '',
+    padding: 'px-4 py-5 sm:p-6'
+  },
+  header: {
+    base: '',
+    background: '',
+    padding: 'px-4 py-5 sm:px-6'
+  },
+  footer: {
+    base: '',
+    background: '',
+    padding: 'px-4 py-4 sm:px-6'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/layout/container.ts b/src/runtime/ui.config/layout/container.ts
new file mode 100644
index 0000000000..d3a83581bf
--- /dev/null
+++ b/src/runtime/ui.config/layout/container.ts
@@ -0,0 +1,5 @@
+export default {
+  base: 'mx-auto',
+  padding: 'px-4 sm:px-6 lg:px-8',
+  constrained: 'max-w-7xl'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/layout/divider.ts b/src/runtime/ui.config/layout/divider.ts
new file mode 100644
index 0000000000..c2dcf6779b
--- /dev/null
+++ b/src/runtime/ui.config/layout/divider.ts
@@ -0,0 +1,29 @@
+export default {
+  wrapper: {
+    base: 'flex items-center align-center text-center w-full',
+    horizontal: 'flex-row',
+    vertical: 'flex-col'
+  },
+  container: {
+    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
+    horizontal: 'mx-3 whitespace-nowrap',
+    vertical: 'my-2'
+  },
+  border: {
+    base: 'flex border-gray-200 dark:border-gray-800',
+    horizontal: 'w-full',
+    vertical: 'h-full',
+    size: {
+      horizontal: 'border-t',
+      vertical: 'border-s'
+    }
+  },
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5'
+  },
+  avatar: {
+    base: 'flex-shrink-0',
+    size: '2xs'
+  },
+  label: 'text-sm'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/layout/skeleton.ts b/src/runtime/ui.config/layout/skeleton.ts
new file mode 100644
index 0000000000..fe12a52822
--- /dev/null
+++ b/src/runtime/ui.config/layout/skeleton.ts
@@ -0,0 +1,5 @@
+export default {
+  base: 'animate-pulse',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  rounded: 'rounded-md'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/navigation/commandPalette.ts b/src/runtime/ui.config/navigation/commandPalette.ts
new file mode 100644
index 0000000000..30c4a541ee
--- /dev/null
+++ b/src/runtime/ui.config/navigation/commandPalette.ts
@@ -0,0 +1,67 @@
+export default {
+  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
+  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
+  input: {
+    wrapper: 'relative flex items-center',
+    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
+    padding: 'px-4',
+    height: 'h-12',
+    size: 'sm:text-sm',
+    icon: {
+      base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
+      size: 'h-4 w-4',
+      padding: 'ps-10'
+    },
+    closeButton: 'absolute end-4'
+  },
+  emptyState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    queryLabel: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  },
+  group: {
+    wrapper: 'p-2',
+    label: 'px-2 my-2 text-xs font-semibold text-gray-900 dark:text-white',
+    container: 'text-sm text-gray-700 dark:text-gray-200',
+    command: {
+      base: 'flex justify-between select-none items-center rounded-md px-2 py-1.5 gap-2 relative',
+      active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
+      inactive: '',
+      label: 'flex items-center gap-1.5 min-w-0',
+      prefix: 'text-gray-400 dark:text-gray-500',
+      suffix: 'text-gray-400 dark:text-gray-500',
+      container: 'flex items-center gap-2 min-w-0',
+      icon: {
+        base: 'flex-shrink-0 w-4 h-4',
+        active: 'text-gray-900 dark:text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      },
+      selectedIcon: {
+        base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
+      },
+      avatar: {
+        base: 'flex-shrink-0',
+        size: '3xs' as const
+      },
+      chip: {
+        base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
+      },
+      disabled: 'opacity-50',
+      shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5'
+    },
+    active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
+    inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400'
+  },
+  default: {
+    icon: 'i-heroicons-magnifying-glass-20-solid',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid',
+    emptyState: {
+      icon: 'i-heroicons-magnifying-glass-20-solid',
+      label: 'We couldn\'t find any items.',
+      queryLabel: 'We couldn\'t find any items with that term. Please try again.'
+    },
+    closeButton: null,
+    selectedIcon: 'i-heroicons-check-20-solid'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/navigation/pagination.ts b/src/runtime/ui.config/navigation/pagination.ts
new file mode 100644
index 0000000000..15e03ebe0c
--- /dev/null
+++ b/src/runtime/ui.config/navigation/pagination.ts
@@ -0,0 +1,34 @@
+export default {
+  wrapper: 'flex items-center -space-x-px',
+  base: '',
+  rounded: 'first:rounded-s-md last:rounded-e-md',
+  default: {
+    size: 'sm',
+    activeButton: {
+      color: 'primary'
+    },
+    inactiveButton: {
+      color: 'white'
+    },
+    firstButton: {
+      color: 'white',
+      class: 'rtl:[&_span:first-child]:rotate-180',
+      icon: 'i-heroicons-chevron-double-left-20-solid'
+    },
+    lastButton: {
+      color: 'white',
+      class: 'rtl:[&_span:last-child]:rotate-180',
+      icon: 'i-heroicons-chevron-double-right-20-solid'
+    },
+    prevButton: {
+      color: 'white',
+      class: 'rtl:[&_span:first-child]:rotate-180',
+      icon: 'i-heroicons-chevron-left-20-solid'
+    },
+    nextButton: {
+      color: 'white',
+      class: 'rtl:[&_span:last-child]:rotate-180',
+      icon: 'i-heroicons-chevron-right-20-solid '
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/navigation/tabs.ts b/src/runtime/ui.config/navigation/tabs.ts
new file mode 100644
index 0000000000..a9e38dea3d
--- /dev/null
+++ b/src/runtime/ui.config/navigation/tabs.ts
@@ -0,0 +1,33 @@
+export default {
+  wrapper: 'relative space-y-2',
+  container: 'relative w-full',
+  base: 'focus:outline-none',
+  list: {
+    base: 'relative',
+    background: 'bg-gray-100 dark:bg-gray-800',
+    rounded: 'rounded-lg',
+    shadow: '',
+    padding: 'p-1',
+    height: 'h-10',
+    width: 'w-full',
+    marker: {
+      wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
+      base: 'w-full h-full',
+      background: 'bg-white dark:bg-gray-900',
+      rounded: 'rounded-md',
+      shadow: 'shadow-sm'
+    },
+    tab: {
+      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
+      background: '',
+      active: 'text-gray-900 dark:text-white',
+      inactive: 'text-gray-500 dark:text-gray-400',
+      height: 'h-8',
+      padding: 'px-3',
+      size: 'text-sm',
+      font: 'font-medium',
+      rounded: 'rounded-md',
+      shadow: ''
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/navigation/verticalNavigation.ts b/src/runtime/ui.config/navigation/verticalNavigation.ts
new file mode 100644
index 0000000000..0bcf2dc18f
--- /dev/null
+++ b/src/runtime/ui.config/navigation/verticalNavigation.ts
@@ -0,0 +1,27 @@
+export default {
+  wrapper: 'relative',
+  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+  padding: 'px-3 py-1.5',
+  width: 'w-full',
+  rounded: 'rounded-md',
+  font: 'font-medium',
+  size: 'text-sm',
+  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
+  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
+  label: 'truncate relative',
+  icon: {
+    base: 'flex-shrink-0 w-4 h-4',
+    active: 'text-gray-700 dark:text-gray-200',
+    inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
+  },
+  avatar: {
+    base: 'flex-shrink-0',
+    size: '3xs'
+  },
+  badge: {
+    base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
+    active: 'bg-white dark:bg-gray-900',
+    inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/contextMenu.ts b/src/runtime/ui.config/overlays/contextMenu.ts
new file mode 100644
index 0000000000..2b86b69eba
--- /dev/null
+++ b/src/runtime/ui.config/overlays/contextMenu.ts
@@ -0,0 +1,26 @@
+import arrow from "../_popperArrow"
+
+export default {
+  wrapper: 'relative',
+  container: 'z-20 group',
+  width: '',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: 'overflow-hidden focus:outline-none relative',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    placement: 'bottom-start',
+    scroll: false
+  },
+  arrow
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/modal.ts b/src/runtime/ui.config/overlays/modal.ts
new file mode 100644
index 0000000000..c6b5c70f84
--- /dev/null
+++ b/src/runtime/ui.config/overlays/modal.ts
@@ -0,0 +1,36 @@
+export default {
+  wrapper: 'relative z-50',
+  inner: 'fixed inset-0 overflow-y-auto',
+  container: 'flex min-h-full items-end sm:items-center justify-center text-center',
+  padding: 'p-4 sm:p-0',
+  margin: 'sm:my-8',
+  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: 'ease-out duration-300',
+      enterFrom: 'opacity-0',
+      enterTo: 'opacity-100',
+      leave: 'ease-in duration-200',
+      leaveFrom: 'opacity-100',
+      leaveTo: 'opacity-0'
+    }
+  },
+  background: 'bg-white dark:bg-gray-900',
+  ring: '',
+  rounded: 'rounded-lg',
+  shadow: 'shadow-xl',
+  width: 'sm:max-w-lg',
+  height: '',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+  transition: {
+    enter: 'ease-out duration-300',
+    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    leave: 'ease-in duration-200',
+    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/notification.ts b/src/runtime/ui.config/overlays/notification.ts
new file mode 100644
index 0000000000..0e5e5766d4
--- /dev/null
+++ b/src/runtime/ui.config/overlays/notification.ts
@@ -0,0 +1,46 @@
+export default {
+  wrapper: 'w-full pointer-events-auto',
+  container: 'relative overflow-hidden',
+  title: 'text-sm font-medium text-gray-900 dark:text-white',
+  description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-lg',
+  padding: 'p-4',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5',
+    color: 'text-{color}-500 dark:text-{color}-400'
+  },
+  avatar: {
+    base: 'flex-shrink-0 self-center',
+    size: 'md' as const
+  },
+  progress: {
+    base: 'absolute bottom-0 end-0 start-0 h-1',
+    background: 'bg-{color}-500 dark:bg-{color}-400'
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transform ease-out duration-300 transition',
+    enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
+    enterToClass: 'translate-y-0 opacity-100 sm:translate-x-0',
+    leaveActiveClass: 'transition ease-in duration-100',
+    leaveFromClass: 'opacity-100',
+    leaveToClass: 'opacity-0'
+  },
+  default: {
+    color: 'primary',
+    icon: null,
+    closeButton: {
+      icon: 'i-heroicons-x-mark-20-solid',
+      color: 'gray',
+      variant: 'link',
+      padded: false
+    },
+    actionButton: {
+      size: 'xs',
+      color: 'white'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/notifications.ts b/src/runtime/ui.config/overlays/notifications.ts
new file mode 100644
index 0000000000..c25dba8951
--- /dev/null
+++ b/src/runtime/ui.config/overlays/notifications.ts
@@ -0,0 +1,6 @@
+export default {
+  wrapper: 'fixed flex flex-col justify-end z-[55]',
+  position: 'bottom-0 end-0',
+  width: 'w-full sm:w-96',
+  container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/popover.ts b/src/runtime/ui.config/overlays/popover.ts
new file mode 100644
index 0000000000..c4f8cd89cc
--- /dev/null
+++ b/src/runtime/ui.config/overlays/popover.ts
@@ -0,0 +1,25 @@
+import arrow from "../_popperArrow"
+
+export default {
+  wrapper: 'relative',
+  container: 'z-20 group',
+  width: '',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: 'overflow-hidden focus:outline-none relative',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    strategy: 'fixed'
+  },
+  arrow
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/slideover.ts b/src/runtime/ui.config/overlays/slideover.ts
new file mode 100644
index 0000000000..ae5e88d64b
--- /dev/null
+++ b/src/runtime/ui.config/overlays/slideover.ts
@@ -0,0 +1,28 @@
+export default {
+  wrapper: 'fixed inset-0 flex z-50',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: 'ease-in-out duration-500',
+      enterFrom: 'opacity-0',
+      enterTo: 'opacity-100',
+      leave: 'ease-in-out duration-500',
+      leaveFrom: 'opacity-100',
+      leaveTo: 'opacity-0'
+    }
+  },
+  base: 'relative flex-1 flex flex-col w-full focus:outline-none',
+  background: 'bg-white dark:bg-gray-900',
+  ring: '',
+  rounded: '',
+  padding: '',
+  shadow: 'shadow-xl',
+  width: 'w-screen max-w-md',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+  transition: {
+    enter: 'transform transition ease-in-out duration-300',
+    leave: 'transform transition ease-in-out duration-200'
+  }
+}
\ No newline at end of file
diff --git a/src/runtime/ui.config/overlays/tooltip.ts b/src/runtime/ui.config/overlays/tooltip.ts
new file mode 100644
index 0000000000..155a6c83d7
--- /dev/null
+++ b/src/runtime/ui.config/overlays/tooltip.ts
@@ -0,0 +1,27 @@
+import arrow from "../_popperArrow"
+
+export default {
+  wrapper: 'relative inline-flex',
+  container: 'z-20 group',
+  width: 'max-w-xs',
+  background: 'bg-white dark:bg-gray-900',
+  color: 'text-gray-900 dark:text-white',
+  shadow: 'shadow',
+  rounded: 'rounded',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
+  shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    strategy: 'fixed'
+  },
+  arrow
+}
\ No newline at end of file