diff --git a/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
index 1859d4af..24cca015 100644
--- a/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
@@ -32,7 +32,7 @@ const items = computed(() => [{
 </script>
 
 <template>
-  <UContextMenu :items="items" class="w-48">
+  <UContextMenu :items="items" :ui="{ content: 'w-48' }">
     <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
       Right click here
     </div>
diff --git a/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
index 197b81ae..4693bde7 100644
--- a/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
@@ -25,7 +25,7 @@ const items = [
 </script>
 
 <template>
-  <UContextMenu :items="items" class="w-48">
+  <UContextMenu :items="items" :ui="{ content: 'w-48' }">
     <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
       Right click here
     </div>
diff --git a/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
index 0bfe11cf..f4ae3cab 100644
--- a/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
+++ b/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
@@ -12,7 +12,7 @@ const items = [{
 </script>
 
 <template>
-  <UContextMenu :items="items" class="w-48">
+  <UContextMenu :items="items" :ui="{ content: 'w-48' }">
     <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
       Right click here
     </div>
diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
index fc20119e..34755c96 100644
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
@@ -40,7 +40,7 @@ const items = computed(() => [{
 </script>
 
 <template>
-  <UDropdownMenu :items="items" :content="{ align: 'start' }" class="w-48">
+  <UDropdownMenu :items="items" :content="{ align: 'start' }" :ui="{ content: 'w-48' }">
     <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
   </UDropdownMenu>
 </template>
diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
index aadbefd8..8314ea2b 100644
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
@@ -25,7 +25,7 @@ const items = [
 </script>
 
 <template>
-  <UDropdownMenu :items="items" class="w-48">
+  <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
     <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
     <template #profile-trailing>
diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
index afebfcb2..62611b23 100644
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
@@ -13,7 +13,7 @@ const items = [{
 </script>
 
 <template>
-  <UDropdownMenu :items="items" class="w-48">
+  <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
     <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
     <template #profile-trailing>
diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
index 1986df25..280fec4a 100644
--- a/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
+++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
@@ -18,7 +18,7 @@ const items = [{
 </script>
 
 <template>
-  <UDropdownMenu v-model:open="open" :items="items" class="w-48">
+  <UDropdownMenu v-model:open="open" :items="items" :ui="{ content: 'w-48' }">
     <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
   </UDropdownMenu>
 </template>
diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md
index ffe404a5..3a227c5a 100644
--- a/docs/content/3.components/context-menu.md
+++ b/docs/content/3.components/context-menu.md
@@ -40,7 +40,7 @@ prettier: true
 collapse: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -90,7 +90,8 @@ props:
                 - option
                 - meta
                 - j
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -119,7 +120,7 @@ Use the `size` prop to change the size of the ContextMenu.
 prettier: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -131,7 +132,8 @@ props:
       icon: i-lucide-sun
     - label: Dark
       icon: i-lucide-moon
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -152,7 +154,7 @@ Use the `disabled` prop to disable the ContextMenu.
 prettier: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -164,7 +166,8 @@ props:
       icon: i-lucide-sun
     - label: Dark
       icon: i-lucide-moon
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index 8c62ff5a..4c37c9c2 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -40,7 +40,7 @@ prettier: true
 collapse: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -91,7 +91,8 @@ props:
           - shift
           - meta
           - q
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -118,7 +119,7 @@ Use the `content` prop to control how the DropdownMenu content is rendered, like
 prettier: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 items:
@@ -143,7 +144,8 @@ props:
     align: start
     side: bottom
     sideOffset: 8
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -163,7 +165,7 @@ prettier: true
 ignore:
   - arrow
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -175,7 +177,8 @@ props:
       icon: i-lucide-credit-card
     - label: Settings
       icon: i-lucide-cog
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -194,8 +197,8 @@ Use the `size` prop to control the size of the DropdownMenu.
 prettier: true
 ignore:
   - items
-  - class
   - content.align
+  - ui.content
 external:
   - items
 props:
@@ -209,7 +212,8 @@ props:
       icon: i-lucide-cog
   content:
     align: start
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
@@ -236,7 +240,7 @@ Use the `disabled` prop to disable the DropdownMenu.
 prettier: true
 ignore:
   - items
-  - class
+  - ui.content
 external:
   - items
 props:
@@ -248,7 +252,8 @@ props:
       icon: i-lucide-credit-card
     - label: Settings
       icon: i-lucide-cog
-  class: 'w-48'
+  ui:
+    content: 'w-48'
 slots:
   default: |
 
diff --git a/playground/app/pages/components/context-menu.vue b/playground/app/pages/components/context-menu.vue
index 35b09e57..c9875f48 100644
--- a/playground/app/pages/components/context-menu.vue
+++ b/playground/app/pages/components/context-menu.vue
@@ -105,13 +105,13 @@ defineShortcuts(extractShortcuts(items.value))
       <USelect v-model="size" :items="sizes" placeholder="Size" />
     </div>
 
-    <UContextMenu :items="items" class="min-w-48" :size="size">
+    <UContextMenu :items="items" :ui="{ content: 'w-48' }" :size="size">
       <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
         Right click here
       </div>
     </UContextMenu>
 
-    <UContextMenu :items="itemsWithColor" class="min-w-48" :size="size">
+    <UContextMenu :items="itemsWithColor" :ui="{ content: 'w-48' }" :size="size">
       <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
         Color right click here
       </div>
diff --git a/playground/app/pages/components/dropdown-menu.vue b/playground/app/pages/components/dropdown-menu.vue
index da95dac3..5758b074 100644
--- a/playground/app/pages/components/dropdown-menu.vue
+++ b/playground/app/pages/components/dropdown-menu.vue
@@ -140,7 +140,7 @@ defineShortcuts(extractShortcuts(items.value))
     <div class="flex flex-col items-center gap-8">
       <USelectMenu v-model="size" :items="sizes" placeholder="Size" />
 
-      <UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
+      <UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" :ui="{ content: 'w-48' }">
         <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
         <template #custom-trailing>
@@ -148,7 +148,7 @@ defineShortcuts(extractShortcuts(items.value))
         </template>
       </UDropdownMenu>
 
-      <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
+      <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" :ui="{ content: 'w-48' }">
         <UButton label="Color" color="neutral" variant="outline" icon="i-lucide-menu" />
 
         <template #custom-trailing>