diff --git a/packages/radix-vue/src/Popper/PopperArrow.vue b/packages/radix-vue/src/Popper/PopperArrow.vue
index f9deb18b1..79d2f7197 100644
--- a/packages/radix-vue/src/Popper/PopperArrow.vue
+++ b/packages/radix-vue/src/Popper/PopperArrow.vue
@@ -68,6 +68,7 @@ const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
}"
:as="as"
:as-child="asChild"
+ :rounded="rounded"
:width="width"
:height="height"
>
diff --git a/packages/radix-vue/src/shared/component/Arrow.vue b/packages/radix-vue/src/shared/component/Arrow.vue
index 0ad14b5e4..d0c72a640 100644
--- a/packages/radix-vue/src/shared/component/Arrow.vue
+++ b/packages/radix-vue/src/shared/component/Arrow.vue
@@ -15,6 +15,12 @@ export interface ArrowProps extends PrimitiveProps {
* @defaultValue 5
*/
height?: number
+ /**
+ * When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
+ *
+ * @defaultValue false
+ */
+ rounded?: boolean
}
@@ -35,9 +41,18 @@ useForwardExpose()
v-bind="props"
:width="width"
:height="height"
- :viewBox="asChild ? undefined : '0 0 30 10'"
+ :viewBox="asChild ? undefined : '0 0 12 6'"
:preserveAspectRatio="asChild ? undefined : 'none'"
>
-
+
+
+
+