diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
index 88bc8a6bd..bde7c9cdb 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
@@ -3,7 +3,6 @@
 	import { setPopoverContentState } from "../popover.svelte.js";
 	import { PopperLayer } from "$lib/bits/utilities/popper-layer/index.js";
 	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
-	import Portal from "$lib/bits/utilities/portal/portal.svelte";
 
 	let {
 		asChild,
@@ -23,25 +22,23 @@
 	});
 </script>
 
-<Portal>
-	<PopperLayer
-		{...restProps}
-		present={state.root.open.value || forceMount}
-		{id}
-		{style}
-		onInteractOutside={state.root.close}
-		onEscape={state.root.close}
-	>
-		{#snippet popper({ props })}
-			{@const mergedProps = mergeProps(restProps, state.props, props)}
-			{mergedProps.hidden}
-			{#if asChild}
-				{@render child?.({ props: mergedProps })}
-			{:else}
-				<div {...mergedProps} bind:this={el}>
-					{@render children?.()}
-				</div>
-			{/if}
-		{/snippet}
-	</PopperLayer>
-</Portal>
+<PopperLayer
+	{...restProps}
+	present={state.root.open.value || forceMount}
+	{id}
+	{style}
+	onInteractOutside={state.root.close}
+	onEscape={state.root.close}
+>
+	{#snippet popper({ props })}
+		{@const mergedProps = mergeProps(restProps, state.props, props)}
+		{mergedProps.hidden}
+		{#if asChild}
+			{@render child?.({ props: mergedProps })}
+		{:else}
+			<div {...mergedProps} bind:this={el}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>
diff --git a/packages/bits-ui/src/lib/bits/popover/index.ts b/packages/bits-ui/src/lib/bits/popover/index.ts
index e2fabcc02..bc11ccdb3 100644
--- a/packages/bits-ui/src/lib/bits/popover/index.ts
+++ b/packages/bits-ui/src/lib/bits/popover/index.ts
@@ -3,6 +3,7 @@ export { default as Arrow } from "./components/popover-arrow.svelte";
 export { default as Content } from "./components/popover-content.svelte";
 export { default as Trigger } from "./components/popover-trigger.svelte";
 export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 
 export type {
 	PopoverRootProps as RootProps,
@@ -13,3 +14,5 @@ export type {
 	PopoverTriggerEvents as TriggerEvents,
 	PopoverCloseEvents as CloseEvents,
 } from "./types.js";
+
+export type { PortalProps } from "$lib/bits/utilities/portal/types.js";
diff --git a/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte b/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
index e051434fc..fb00248d5 100644
--- a/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
@@ -4,7 +4,7 @@
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "$lib/internal/is.js";
 
-	let { to = "body", children }: PortalProps = $props();
+	let { to = "body", children, disabled }: PortalProps = $props();
 
 	const context = getAllContexts();
 
@@ -34,7 +34,7 @@
 	let instance: any;
 
 	$effect(() => {
-		if (!target) {
+		if (!target || disabled) {
 			return unmount(instance);
 		}
 		instance = mount(PortalConsumer, { target, props: { children }, context });
@@ -44,3 +44,7 @@
 		};
 	});
 </script>
+
+{#if disabled}
+	{@render children?.()}
+{/if}
diff --git a/sites/docs/src/lib/components/demos/popover-demo.svelte b/sites/docs/src/lib/components/demos/popover-demo.svelte
index 7e41e136b..86c6b0feb 100644
--- a/sites/docs/src/lib/components/demos/popover-demo.svelte
+++ b/sites/docs/src/lib/components/demos/popover-demo.svelte
@@ -13,52 +13,60 @@
 	>
 		Resize
 	</Popover.Trigger>
-	<Popover.Content
-		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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"
-		sideOffset={8}
-	>
-		<Popover.Arrow class="text-white" />
-		<div class="flex items-center">
-			<div class="mr-3 flex size-12 items-center justify-center rounded-full bg-muted">
-				<ImageSquare class="size-6" />
-			</div>
-			<div class="flex flex-col">
-				<h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">Resize image</h4>
-				<p class="text-sm font-medium text-muted-foreground">Resize your photos easily</p>
-			</div>
-		</div>
-		<Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
-		<div class="flex items-center pb-2">
-			<div class="mr-2 flex items-center">
-				<div class="relative mr-2">
-					<span class="sr-only">Width</span>
-					<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
-						>W</span
-					>
-					<input
-						type="number"
-						class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
-						bind:value={width}
-					/>
+	<Popover.Portal>
+		<Popover.Content
+			class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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"
+			sideOffset={8}
+		>
+			<Popover.Arrow class="text-white" />
+			<div class="flex items-center">
+				<div class="mr-3 flex size-12 items-center justify-center rounded-full bg-muted">
+					<ImageSquare class="size-6" />
 				</div>
-				<div class="relative">
-					<span class="sr-only">Height</span>
-					<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
-						>H</span
-					>
-					<input
-						type="number"
-						class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
-						bind:value={height}
-					/>
+				<div class="flex flex-col">
+					<h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">
+						Resize image
+					</h4>
+					<p class="text-sm font-medium text-muted-foreground">
+						Resize your photos easily
+					</p>
+				</div>
+			</div>
+			<Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
+			<div class="flex items-center pb-2">
+				<div class="mr-2 flex items-center">
+					<div class="relative mr-2">
+						<span class="sr-only">Width</span>
+						<span
+							aria-hidden
+							class="absolute left-5 top-4 text-xxs text-muted-foreground">W</span
+						>
+						<input
+							type="number"
+							class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
+							bind:value={width}
+						/>
+					</div>
+					<div class="relative">
+						<span class="sr-only">Height</span>
+						<span
+							aria-hidden
+							class="absolute left-5 top-4 text-xxs text-muted-foreground">H</span
+						>
+						<input
+							type="number"
+							class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
+							bind:value={height}
+						/>
+					</div>
 				</div>
+				<Toggle.Root
+					aria-label="toggle constrain portions"
+					class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
+				>
+					<LinkSimpleHorizontalBreak class="size-6" />
+				</Toggle.Root>
 			</div>
-			<Toggle.Root
-				aria-label="toggle constrain portions"
-				class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
-			>
-				<LinkSimpleHorizontalBreak class="size-6" />
-			</Toggle.Root>
-		</div>
-	</Popover.Content>
+		</Popover.Content>
+	</Popover.Portal>
 </Popover.Root>