diff --git a/.histoire/package.json b/.histoire/package.json
index 0dc04ce1b..4c2c0ac19 100644
--- a/.histoire/package.json
+++ b/.histoire/package.json
@@ -20,7 +20,8 @@
     "eslint": "^8.56.0",
     "histoire": "^0.17.14",
     "postcss": "^8.4.33",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "1.0.7"
   },
   "peerDependencies": {
     "@vitejs/plugin-vue": "*",
diff --git a/.histoire/tailwind.config.js b/.histoire/tailwind.config.js
index 81dc2e9cf..768a06f3c 100644
--- a/.histoire/tailwind.config.js
+++ b/.histoire/tailwind.config.js
@@ -1,5 +1,6 @@
-const { blackA, green, grass, mauve, slate, violet, red, indigo, purple, teal } = require("@radix-ui/colors");
-const plugin = require("tailwindcss/plugin");
+import { blackA, green, grass, mauve, slate, violet, red, indigo, purple, teal } from "@radix-ui/colors";
+import plugin from "tailwindcss/plugin";
+import animate from "tailwindcss-animate";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -158,6 +159,7 @@ export default {
     },
   },
   plugins: [
+    animate,
     plugin(({ matchUtilities }) => {
       matchUtilities({
         perspective: (value) => ({
diff --git a/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue b/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue
index bc934d63d..6ee4ea102 100644
--- a/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue
+++ b/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue
@@ -20,19 +20,23 @@ import {
 } from '../'
 
 const toggleState = ref(false)
-const toggleState2 = ref(false)
 const checkboxOne = ref(false)
 const checkboxTwo = ref(false)
 const person = ref('pedro')
 
-function handleClick() {
-  // alert("hello!");
-}
+const content = 'relative min-w-32 bg-white will-change-[opacity,transform] z-50 rounded-md border p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
 
-function handleCheck(ev: any) {
-  // checkboxOne.value = ev;
-  console.log(ev)
-}
+const item = 'group w-full text-sm leading-none text-violet11 flex items-center h-7 relative pl-7 pr-2 select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1 cursor-default rounded'
+
+const subContent = 'bg-white rounded-md shadow-md will-change-[opacity,transform] min-w-32 z-50 overflow-hidden p-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-left-right-1 data-[side=right]:slide-in-from-right-1 data-[side=top]:slide-in-from-bottom-2'
+
+const separator = '-mx-1 my-1 h-px bg-mauve5'
+
+const shortcut = 'ml-auto pl-5 text-[13px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8'
+
+const checkboxItem = 'group w-full text-sm leading-none text-violet11 flex items-center h-7 relative pl-7 pr-2 select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1 cursor-default rounded'
+
+const radioItem = 'group w-full text-sm leading-none text-violet11 flex items-center h-7 relative pl-7 pr-2 select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1 cursor-default rounded'
 </script>
 
 <template>
@@ -40,234 +44,141 @@ function handleCheck(ev: any) {
     <Variant title="default">
       <DropdownMenuRoot v-model:open="toggleState">
         <DropdownMenuTrigger
-
-          class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+          class="rounded-full size-10 inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           aria-label="Customise options"
         >
-          <Icon icon="radix-icons:hamburger-menu" />
+          <Icon icon="radix-icons:hamburger-menu" class="size-4" />
         </DropdownMenuTrigger>
 
         <DropdownMenuPortal>
-          <DropdownMenuContent
-            class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-          >
-            <DropdownMenuItem
-              value="New Tab"
-              class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-              @click="handleClick"
-            >
+          <DropdownMenuContent :class="content" :side-offset="4">
+            <DropdownMenuItem value="New Tab" :class="item">
               New Tab
-              <div
-                class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
+              <div :class="shortcut">
                 ⌘+T
               </div>
             </DropdownMenuItem>
             <DropdownMenuSub>
-              <DropdownMenuSubTrigger
-                disabled
-                value="more toolsz"
-                class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
-              >
+              <DropdownMenuSubTrigger value="more tools" :class="item">
                 More Tools
                 <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                  class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                 >
-                  <Icon icon="radix-icons:chevron-right" />
+                  <Icon icon="tabler:chevron-right" class="size-3.5" />
                 </div>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <DropdownMenuSubContent
-                  class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                  :side-offset="2"
-                  :align-offset="-5"
-                >
-                  <DropdownMenuItem
-                    class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                <DropdownMenuSubContent :class="subContent" :side-offset="2" :align-offset="-4">
+                  <DropdownMenuItem :class="item">
                     Save Page As…
-                    <div
-                      class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                    >
+                    <div :class="shortcut">
                       ⌘+S
                     </div>
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuItem :class="item">
                     Create Shortcut…
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuItem :class="item">
                     Name Window…
                   </DropdownMenuItem>
-                  <DropdownMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuSeparator :class="separator" />
+                  <DropdownMenuItem :class="item">
                     Developer Tools
                   </DropdownMenuItem>
                 </DropdownMenuSubContent>
               </DropdownMenuPortal>
             </DropdownMenuSub>
-            <DropdownMenuItem
-              value="New Window"
-              class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-            >
+            <DropdownMenuItem value="New Window" :class="item">
               New Window
-              <div
-                class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
+              <div :class="shortcut">
                 ⌘+N
               </div>
             </DropdownMenuItem>
-            <DropdownMenuItem
-              value="New Private Window"
-              class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-              disabled
-            >
+            <DropdownMenuItem value="New Private Window" :class="item" disabled>
               New Private Window
-              <div
-                class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
+              <div :class="shortcut">
                 ⇧+⌘+N
               </div>
             </DropdownMenuItem>
             <DropdownMenuSub>
-              <DropdownMenuSubTrigger
-                value="more tools"
-                class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
-              >
+              <DropdownMenuSubTrigger value="more tools" :class="item">
                 More Tools
                 <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                  class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                 >
-                  <Icon icon="radix-icons:chevron-right" />
+                  <Icon icon="tabler:chevron-right" class="size-3.5" />
                 </div>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <DropdownMenuSubContent
-                  class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                  :side-offset="2"
-                  :align-offset="-5"
-                >
-                  <DropdownMenuItem
-                    class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                <DropdownMenuSubContent :class="subContent" :side-offset="2" :align-offset="-4">
+                  <DropdownMenuItem :class="item">
                     Save Page As…
-                    <div
-                      class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                    >
+                    <div :class="shortcut">
                       ⌘+S
                     </div>
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuItem :class="item">
                     Create Shortcut…
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuItem :class="item">
                     Name Window…
                   </DropdownMenuItem>
-                  <DropdownMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuSeparator :class="separator" />
+                  <DropdownMenuItem :class="item">
                     Developer Tools
                   </DropdownMenuItem>
                   <DropdownMenuSub>
-                    <DropdownMenuSubTrigger
-                      value="more toolsz"
-                      class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
-                    >
+                    <DropdownMenuSubTrigger value="more tools" :class="item">
                       More Tools
                       <div
-                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                        class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                       >
-                        <Icon icon="radix-icons:chevron-right" />
+                        <Icon icon="tabler:chevron-right" class="size-3.5" />
                       </div>
                     </DropdownMenuSubTrigger>
                     <DropdownMenuPortal>
-                      <DropdownMenuSubContent
-                        class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                        :side-offset="2"
-                        :align-offset="-5"
-                      >
-                        <DropdownMenuItem
-                          class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                        >
+                      <DropdownMenuSubContent :class="subContent" :side-offset="2" :align-offset="-4">
+                        <DropdownMenuItem :class="item">
                           Save Page As…
-                          <div
-                            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                          >
+                          <div :class="shortcut">
                             ⌘+S
                           </div>
                         </DropdownMenuItem>
-                        <DropdownMenuItem
-                          class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                        >
+                        <DropdownMenuItem :class="item">
                           Create Shortcut…
                         </DropdownMenuItem>
-                        <DropdownMenuItem
-                          class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                        >
+                        <DropdownMenuItem :class="item">
                           Name Window…
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator
-                          class="h-[1px] bg-violet6 m-[5px]"
-                        />
-                        <DropdownMenuItem
-                          class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                        >
+                        <DropdownMenuSeparator :class="separator" />
+                        <DropdownMenuItem :class="item">
                           Developer Tools
                         </DropdownMenuItem>
                         <DropdownMenuSub>
-                          <DropdownMenuSubTrigger
-                            value="more toolsz"
-                            class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
-                          >
+                          <DropdownMenuSubTrigger value="more tools" :class="item">
                             More Tools
                             <div
-                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                              class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                             >
-                              <Icon icon="radix-icons:chevron-right" />
+                              <Icon icon="tabler:chevron-right" class="size-3.5" />
                             </div>
                           </DropdownMenuSubTrigger>
                           <DropdownMenuPortal>
-                            <DropdownMenuSubContent
-                              class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                              :side-offset="2"
-                              :align-offset="-5"
-                            >
-                              <DropdownMenuItem
-                                class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                              >
+                            <DropdownMenuSubContent :class="subContent" :side-offset="2" :align-offset="-4">
+                              <DropdownMenuItem :class="item">
                                 Save Page As…
-                                <div
-                                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                                >
+                                <div :class="shortcut">
                                   ⌘+S
                                 </div>
                               </DropdownMenuItem>
-                              <DropdownMenuItem
-                                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                              >
+                              <DropdownMenuItem :class="item">
                                 Create Shortcut…
                               </DropdownMenuItem>
-                              <DropdownMenuItem
-                                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                              >
+                              <DropdownMenuItem :class="item">
                                 Name Window…
                               </DropdownMenuItem>
-                              <DropdownMenuSeparator
-                                class="h-[1px] bg-violet6 m-[5px]"
-                              />
-                              <DropdownMenuItem
-                                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                              >
+                              <DropdownMenuSeparator :class="separator" />
+                              <DropdownMenuItem :class="item">
                                 Developer Tools
                               </DropdownMenuItem>
                             </DropdownMenuSubContent>
@@ -276,75 +187,48 @@ function handleCheck(ev: any) {
                       </DropdownMenuSubContent>
                     </DropdownMenuPortal>
                   </DropdownMenuSub>
-                  <DropdownMenuItem
-                    class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                  >
+                  <DropdownMenuItem :class="item">
                     Developer Tools
                   </DropdownMenuItem>
                 </DropdownMenuSubContent>
               </DropdownMenuPortal>
             </DropdownMenuSub>
-            <DropdownMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
-            <DropdownMenuCheckboxItem
-              v-model:checked="checkboxOne"
-              class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-              @select="handleCheck"
-            >
-              <DropdownMenuItemIndicator
-                class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-              >
-                <Icon icon="radix-icons:check" />
+            <DropdownMenuSeparator :class="separator" />
+            <DropdownMenuCheckboxItem v-model:checked="checkboxOne" :class="checkboxItem" @select.prevent>
+              <DropdownMenuItemIndicator class="absolute left-0 w-7 inline-flex items-center justify-center">
+                <Icon icon="tabler:check" />
               </DropdownMenuItemIndicator>
               Show Bookmarks
-              <div
-                class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
+              <div :class="shortcut">
                 ⌘+B
               </div>
             </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-              v-model:checked="checkboxTwo"
-              class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-            >
-              <DropdownMenuItemIndicator
-                class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-              >
-                <Icon icon="radix-icons:check" />
+            <DropdownMenuCheckboxItem v-model:checked="checkboxTwo" :class="checkboxItem" @select.prevent>
+              <DropdownMenuItemIndicator class="absolute left-0 w-7 inline-flex items-center justify-center">
+                <Icon icon="tabler:check" />
               </DropdownMenuItemIndicator>
               Show Full URLs
             </DropdownMenuCheckboxItem>
-            <DropdownMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
+            <DropdownMenuSeparator :class="separator" />
 
-            <DropdownMenuLabel
-              class="pl-[25px] text-xs leading-[25px] text-mauve11"
-            >
+            <DropdownMenuLabel class="pl-6 text-xs leading-6 text-mauve11">
               People
             </DropdownMenuLabel>
             <DropdownMenuRadioGroup v-model="person">
-              <DropdownMenuRadioItem
-                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                value="pedro"
-              >
-                <DropdownMenuItemIndicator
-                  class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-                >
+              <DropdownMenuRadioItem :class="radioItem" value="pedro" @select.prevent>
+                <DropdownMenuItemIndicator class="absolute left-0 w-7 inline-flex items-center justify-center">
                   <Icon icon="radix-icons:dot-filled" />
                 </DropdownMenuItemIndicator>
                 Pedro Duarte
               </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem
-                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-                value="colm"
-              >
-                <DropdownMenuItemIndicator
-                  class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-                >
+              <DropdownMenuRadioItem :class="radioItem" value="colm" @select.prevent>
+                <DropdownMenuItemIndicator class="absolute left-0 w-7 inline-flex items-center justify-center">
                   <Icon icon="radix-icons:dot-filled" />
                 </DropdownMenuItemIndicator>
                 Colm Tuite
               </DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
-            <DropdownMenuArrow class="fill-white" />
+            <DropdownMenuArrow class="fill-mauve5" :width="12" />
           </DropdownMenuContent>
         </DropdownMenuPortal>
       </DropdownMenuRoot>
diff --git a/packages/radix-vue/src/Primitive/Slot.ts b/packages/radix-vue/src/Primitive/Slot.ts
index 049b88491..872af8768 100644
--- a/packages/radix-vue/src/Primitive/Slot.ts
+++ b/packages/radix-vue/src/Primitive/Slot.ts
@@ -1,27 +1,6 @@
-import { type VNode, cloneVNode, defineComponent, mergeProps } from 'vue'
+import { Comment, cloneVNode, defineComponent, mergeProps } from 'vue'
 import { renderSlotFragments } from '@/shared'
 
-function groupChildren(children: VNode[]) {
-  let firstChildren: VNode | undefined
-  const commentChildrenBeforeFirst: VNode[] = []
-  const otherChildren: VNode[] = []
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    if (!firstChildren) {
-      if (child.type === Symbol.for('v-cmt')) { // check if the vnode is comment type (https://github.com/vuejs/core/blob/caeb8a68811a1b0f799632582289fcf169fb673c/packages/runtime-core/src/vnode.ts#L66)
-        commentChildrenBeforeFirst.push(child)
-        continue
-      }
-      firstChildren = child
-    }
-    else {
-      otherChildren.push(child)
-    }
-  }
-  return { firstChildren, otherChildren, commentChildrenBeforeFirst }
-}
-
 export const Slot = defineComponent({
   name: 'PrimitiveSlot',
   inheritAttrs: false,
@@ -29,35 +8,40 @@ export const Slot = defineComponent({
     return () => {
       if (!slots.default)
         return null
-      const children = renderSlotFragments(slots.default())
-      const { firstChildren, otherChildren, commentChildrenBeforeFirst } = groupChildren(children)
-
-      if (firstChildren) {
-        // remove props ref from being inferred
-        delete firstChildren.props?.ref
-        const mergedProps = mergeProps(attrs, firstChildren.props ?? {})
-        // remove class to prevent duplicated
-        if (attrs.class && firstChildren.props?.class)
-          delete firstChildren.props.class
-
-        const cloned = cloneVNode(firstChildren, mergedProps)
-        // Explicitly override props starting with `on`.
-        // It seems cloneVNode from Vue doesn't like overriding `onXXX` props. So
-        // we have to do it manually.
-        for (const prop in mergedProps) {
-          if (prop.startsWith('on')) {
-            cloned.props ||= {}
-            cloned.props[prop] = mergedProps[prop]
-          }
-        }
-
-        if (commentChildrenBeforeFirst.length)
-          return [...commentChildrenBeforeFirst, cloned, ...otherChildren]
 
-        return [cloned, ...otherChildren]
+      const childrens = renderSlotFragments(slots.default())
+      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)
+      if (firstNonCommentChildrenIndex === -1)
+        return childrens
+
+      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]
+
+      // remove props ref from being inferred
+      delete firstNonCommentChildren.props?.ref
+
+      const mergedProps = firstNonCommentChildren.props
+        ? mergeProps(attrs, firstNonCommentChildren.props)
+        : attrs
+      // remove class to prevent duplicated
+      if (attrs.class && firstNonCommentChildren.props?.class)
+        delete firstNonCommentChildren.props.class
+      const cloned = cloneVNode(firstNonCommentChildren, mergedProps)
+
+      // Explicitly override props starting with `on`.
+      // It seems cloneVNode from Vue doesn't like overriding `onXXX` props.
+      // So we have to do it manually.
+      for (const prop in mergedProps) {
+        if (prop.startsWith('on')) {
+          cloned.props ||= {}
+          cloned.props[prop] = mergedProps[prop]
+        }
       }
 
-      return children
+      if (childrens.length === 1)
+        return cloned
+
+      childrens[firstNonCommentChildrenIndex] = cloned
+      return childrens
     }
   },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5c2c74d4..0e1733a63 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.1(ts-node@10.9.2)
+      tailwindcss-animate:
+        specifier: 1.0.7
+        version: 1.0.7(tailwindcss@3.4.1)
 
   docs:
     dependencies:
@@ -9417,6 +9420,14 @@ packages:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
 
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.1(ts-node@10.9.2)
+    dev: true
+
   /tailwindcss@3.4.1(ts-node@10.9.2):
     resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
     engines: {node: '>=14.0.0'}