diff --git a/cli/templates.mjs b/cli/templates.mjs
index 76553dbc..b20ff845 100644
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -65,7 +65,7 @@ const ui = ${camelName}()
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <slot />
   </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = ${camelName}()
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: props.class })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
 </template>
 `
   }
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index bb35e8b9..ea766227 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -71,7 +71,7 @@ const ui = computed(() => accordion({
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AccordionItem
       v-for="(item, index) in items"
       v-slot="{ open }"
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 6667446d..b627b1b6 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -80,7 +80,7 @@ const ui = computed(() => alert({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: props.class, multiline })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
     <slot name="leading">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 88b3e3da..041660a1 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -51,7 +51,7 @@ const ui = computed(() => avatar({
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: props.class })">
+  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
       :as="as"
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index f9088f7c..992fa694 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -91,7 +91,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 503e97d0..5981e2fe 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -63,7 +63,7 @@ const ui = breadcrumb()
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <ol :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in items" :key="index">
         <li :class="ui.item({ class: props.ui?.item })">
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index 2c63ce5e..c0b44d86 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -36,7 +36,7 @@ const ui = card()
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index cb45da05..e6b1aab4 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -93,7 +93,7 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index 46438207..652ad97e 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -64,7 +64,7 @@ const ui = computed(() => chip({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <slot />
 
     <span v-if="show" :class="ui.base({ class: props.ui?.base })">
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index ddc30d5b..94daf056 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -42,7 +42,7 @@ const ui = collapsible()
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 183c0cf4..83e0023b 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -207,7 +207,7 @@ const groups = computed(() => {
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: props.class })">
+  <ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: [props.class, props.ui?.root] })">
     <ComboboxInput as-child>
       <UInput
         variant="none"
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 6920347a..a912b266 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -72,7 +72,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
         <Label :for="id" :class="ui.label({ class: props.ui?.label })">
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 355defd6..cbcded4f 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -145,7 +145,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <input
       :id="id"
       ref="inputRef"
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index b14ba928..635bad48 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -244,7 +244,7 @@ defineExpose({
     :disabled="disabled"
     :display-value="displayValue"
     :filter-function="filterFunction"
-    :class="ui.root({ class: props.class })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     :as-child="!!multiple"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 3c22e500..a5c709bd 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -109,7 +109,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 </script>
 
 <template>
-  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
         <NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.item({ class: props.ui?.item })">
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 28043244..bde7ff80 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -123,7 +123,7 @@ const ui = pagination()
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
       <PaginationFirst v-if="showControls || !!slots.first" as-child>
         <slot name="first">
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index ed42c9e6..64d6fb9b 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -142,7 +142,7 @@ const ui = computed(() => progress({
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div v-if="!isIndeterminate && (status || $slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index ba81d577..a5773898 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -123,7 +123,7 @@ function onUpdate(value: any) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: props.class })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })">
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index d4a6e57b..6424f3c0 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -64,7 +64,7 @@ const ui = computed(() => separator({
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.border({ class: props.ui?.border })" />
 
     <template v-if="label || icon || avatar || !!slots.default">
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 85fc0753..b0ea20c2 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -99,7 +99,7 @@ function onChange(value: any) {
     v-model="sliderValue"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: props.class })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index d0b71226..bd756d67 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -87,7 +87,7 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 576cc7df..20c50b83 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -85,7 +85,7 @@ const ui = computed(() => tabs({
 </script>
 
 <template>
-  <TabsRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <TabsList :class="ui.list({ class: props.ui?.list })">
       <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
 
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 8145b1d5..63cf188e 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -163,7 +163,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="ui.root({ class: props.class })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <textarea
       :id="id"
       ref="textareaRef"
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 2b21caf8..d7259b02 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -101,7 +101,7 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
-    :class="ui.root({ class: props.class, multiline })"
+    :class="ui.root({ class: [props.class, props.ui?.root], multiline })"
     :style="{ '--height': height }"
   >
     <slot name="leading">