diff --git a/test/components/Popover.spec.ts b/test/components/Popover.spec.ts
index b98e22e6..941d466b 100644
--- a/test/components/Popover.spec.ts
+++ b/test/components/Popover.spec.ts
@@ -9,6 +9,8 @@ describe('Popover', () => {
     // Props
     ['with open', { props }],
     ['with arrow', { props: { ...props, arrow: true } }],
+    ['with class', { props: { ...props, class: 'shadow-xl' } }],
+    ['with ui', { props: { ...props, ui: { content: 'shadow-xl' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }]
diff --git a/test/components/Tooltip.spec.ts b/test/components/Tooltip.spec.ts
index ae5887c8..f2c2a123 100644
--- a/test/components/Tooltip.spec.ts
+++ b/test/components/Tooltip.spec.ts
@@ -27,6 +27,8 @@ describe('Tooltip', () => {
     ['with text', { props }],
     ['with arrow', { props: { ...props, arrow: true } }],
     ['with kbds', { props: { ...props, kbds: ['meta', 'K'] } }],
+    ['with class', { props: { ...props, class: 'text-sm' } }],
+    ['with ui', { props: { ...props, ui: { content: 'text-sm' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }]
diff --git a/test/components/__snapshots__/Popover-vue.spec.ts.snap b/test/components/__snapshots__/Popover-vue.spec.ts.snap
index f3cd1bfe..d54927ac 100644
--- a/test/components/__snapshots__/Popover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Popover-vue.spec.ts.snap
@@ -10,6 +10,19 @@ exports[`Popover > renders with arrow correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none shadow-xl" data-side="bottom" data-align="center"></div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -51,5 +64,18 @@ exports[`Popover > renders with open correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none shadow-xl" data-side="bottom" data-align="center"></div>
+</div>
+
+
 <!--teleport end-->"
 `;
diff --git a/test/components/__snapshots__/Popover.spec.ts.snap b/test/components/__snapshots__/Popover.spec.ts.snap
index 80cd10d2..61b5d0a6 100644
--- a/test/components/__snapshots__/Popover.spec.ts.snap
+++ b/test/components/__snapshots__/Popover.spec.ts.snap
@@ -10,6 +10,19 @@ exports[`Popover > renders with arrow correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none shadow-xl" data-side="bottom" data-align="center"></div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -51,5 +64,18 @@ exports[`Popover > renders with open correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none shadow-xl" data-side="bottom" data-align="center"></div>
+</div>
+
+
 <!--teleport end-->"
 `;
diff --git a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
index 2c608e65..e2fd45c4 100644
--- a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
@@ -12,6 +12,22 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] text-sm" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if-->
+    <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -74,5 +90,21 @@ exports[`Tooltip > renders with text correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] text-sm" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if-->
+    <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
diff --git a/test/components/__snapshots__/Tooltip.spec.ts.snap b/test/components/__snapshots__/Tooltip.spec.ts.snap
index 9019a052..d7db38c1 100644
--- a/test/components/__snapshots__/Tooltip.spec.ts.snap
+++ b/test/components/__snapshots__/Tooltip.spec.ts.snap
@@ -12,6 +12,22 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] text-sm" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if-->
+    <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -74,5 +90,21 @@ exports[`Tooltip > renders with text correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] text-sm" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if-->
+    <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;