diff --git a/sites/docs/src/lib/registry/default/block/demo-sidebar-footer.svelte b/sites/docs/src/lib/registry/default/block/demo-sidebar-footer.svelte
index 191adf589..9fe9dadd8 100644
--- a/sites/docs/src/lib/registry/default/block/demo-sidebar-footer.svelte
+++ b/sites/docs/src/lib/registry/default/block/demo-sidebar-footer.svelte
@@ -25,7 +25,7 @@
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content
 							side="top"
-							class="w-[--bits-dropdown-menu-anchor-width]"
+							class="w-[var(--bits-dropdown-menu-anchor-width)]"
 						>
 							<DropdownMenu.Item>
 								<span>Account</span>
diff --git a/sites/docs/src/lib/registry/default/block/demo-sidebar-header.svelte b/sites/docs/src/lib/registry/default/block/demo-sidebar-header.svelte
index 3dcd1cf8e..a81f656d6 100644
--- a/sites/docs/src/lib/registry/default/block/demo-sidebar-header.svelte
+++ b/sites/docs/src/lib/registry/default/block/demo-sidebar-header.svelte
@@ -21,7 +21,7 @@
 								</Sidebar.MenuButton>
 							{/snippet}
 						</DropdownMenu.Trigger>
-						<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]">
+						<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]">
 							<DropdownMenu.Item>
 								<span>Acme Inc</span>
 							</DropdownMenu.Item>
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-01/components/version-switcher.svelte b/sites/docs/src/lib/registry/default/block/sidebar-01/components/version-switcher.svelte
index e8c580d7b..691b8d5ff 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-01/components/version-switcher.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-01/components/version-switcher.svelte
@@ -33,7 +33,7 @@
 					</Sidebar.MenuButton>
 				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]" align="start">
+			<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]" align="start">
 				{#each versions as version (version)}
 					<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
 						v{version}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-02/components/version-switcher.svelte b/sites/docs/src/lib/registry/default/block/sidebar-02/components/version-switcher.svelte
index e8c580d7b..691b8d5ff 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-02/components/version-switcher.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-02/components/version-switcher.svelte
@@ -33,7 +33,7 @@
 					</Sidebar.MenuButton>
 				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]" align="start">
+			<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]" align="start">
 				{#each versions as version (version)}
 					<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
 						v{version}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-07/components/nav-user.svelte b/sites/docs/src/lib/registry/default/block/sidebar-07/components/nav-user.svelte
index e2da32886..2780811d1 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-07/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-07/components/nav-user.svelte
@@ -37,7 +37,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-07/components/team-switcher.svelte b/sites/docs/src/lib/registry/default/block/sidebar-07/components/team-switcher.svelte
index 609b8284a..4375f22f1 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-07/components/team-switcher.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-07/components/team-switcher.svelte
@@ -39,7 +39,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				align="start"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-08/components/nav-user.svelte b/sites/docs/src/lib/registry/default/block/sidebar-08/components/nav-user.svelte
index 13720e15e..45e07cf43 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-08/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-08/components/nav-user.svelte
@@ -47,7 +47,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-09/components/nav-user.svelte b/sites/docs/src/lib/registry/default/block/sidebar-09/components/nav-user.svelte
index 537c8608d..000c1e923 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-09/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-09/components/nav-user.svelte
@@ -39,7 +39,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-12/components/nav-user.svelte b/sites/docs/src/lib/registry/default/block/sidebar-12/components/nav-user.svelte
index 22695ddf7..85b7c376c 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-12/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-12/components/nav-user.svelte
@@ -38,7 +38,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="start"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/block/sidebar-15/components/nav-user.svelte b/sites/docs/src/lib/registry/default/block/sidebar-15/components/nav-user.svelte
index 75ad45a67..d8320c5cd 100644
--- a/sites/docs/src/lib/registry/default/block/sidebar-15/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/default/block/sidebar-15/components/nav-user.svelte
@@ -38,7 +38,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="start"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/default/ui/sidebar/sidebar-menu-skeleton.svelte b/sites/docs/src/lib/registry/default/ui/sidebar/sidebar-menu-skeleton.svelte
index f96202079..65e5565d1 100644
--- a/sites/docs/src/lib/registry/default/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/sites/docs/src/lib/registry/default/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -28,7 +28,7 @@
 		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 	{/if}
 	<Skeleton
-		class="h-4 max-w-[--skeleton-width] flex-1"
+		class="h-4 max-w-[var(--skeleton-width)] flex-1"
 		data-sidebar="menu-skeleton-text"
 		style="--skeleton-width: {width};"
 	/>
diff --git a/sites/docs/src/lib/registry/default/ui/sidebar/sidebar.svelte b/sites/docs/src/lib/registry/default/ui/sidebar/sidebar.svelte
index bf084dcb3..280466448 100644
--- a/sites/docs/src/lib/registry/default/ui/sidebar/sidebar.svelte
+++ b/sites/docs/src/lib/registry/default/ui/sidebar/sidebar.svelte
@@ -26,7 +26,7 @@
 {#if collapsible === "none"}
 	<div
 		class={cn(
-			"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+			"bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
 			className
 		)}
 		bind:this={ref}
@@ -42,7 +42,7 @@
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-mobile="true"
-			class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+			class="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -63,24 +63,24 @@
 		<!-- This is what handles the sidebar gap on desktop -->
 		<div
 			class={cn(
-				"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+				"relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
 				"group-data-[collapsible=offcanvas]:w-0",
 				"group-data-[side=right]:rotate-180",
 				variant === "floating" || variant === "inset"
 					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
 			)}
 		></div>
 		<div
 			class={cn(
-				"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+				"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
 				side === "left"
 					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
 				// Adjust the padding for floating and inset variants.
 				variant === "floating" || variant === "inset"
 					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
 				className
 			)}
 			{...restProps}
diff --git a/sites/docs/src/lib/registry/new-york/block/demo-sidebar-footer.svelte b/sites/docs/src/lib/registry/new-york/block/demo-sidebar-footer.svelte
index 897b95b97..73868ba32 100644
--- a/sites/docs/src/lib/registry/new-york/block/demo-sidebar-footer.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/demo-sidebar-footer.svelte
@@ -25,7 +25,7 @@
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content
 							side="top"
-							class="w-[--bits-dropdown-menu-anchor-width]"
+							class="w-[var(--bits-dropdown-menu-anchor-width)]"
 						>
 							<DropdownMenu.Item>
 								<span>Account</span>
diff --git a/sites/docs/src/lib/registry/new-york/block/demo-sidebar-header.svelte b/sites/docs/src/lib/registry/new-york/block/demo-sidebar-header.svelte
index b10fb7374..97e03a7c6 100644
--- a/sites/docs/src/lib/registry/new-york/block/demo-sidebar-header.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/demo-sidebar-header.svelte
@@ -21,7 +21,7 @@
 								</Sidebar.MenuButton>
 							{/snippet}
 						</DropdownMenu.Trigger>
-						<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]">
+						<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]">
 							<DropdownMenu.Item>
 								<span>Acme Inc</span>
 							</DropdownMenu.Item>
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-01/components/version-switcher.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-01/components/version-switcher.svelte
index 3d2f2d0aa..6d602c839 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-01/components/version-switcher.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-01/components/version-switcher.svelte
@@ -33,7 +33,7 @@
 					</Sidebar.MenuButton>
 				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]" align="start">
+			<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]" align="start">
 				{#each versions as version (version)}
 					<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
 						v{version}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-02/components/version-switcher.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-02/components/version-switcher.svelte
index 3d2f2d0aa..6d602c839 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-02/components/version-switcher.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-02/components/version-switcher.svelte
@@ -33,7 +33,7 @@
 					</Sidebar.MenuButton>
 				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-[--bits-dropdown-menu-anchor-width]" align="start">
+			<DropdownMenu.Content class="w-[var(--bits-dropdown-menu-anchor-width)]" align="start">
 				{#each versions as version (version)}
 					<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
 						v{version}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/nav-user.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/nav-user.svelte
index 61fab83a6..0c52b44ac 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/nav-user.svelte
@@ -37,7 +37,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/team-switcher.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/team-switcher.svelte
index 3c000f4b3..2caab9b5f 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/team-switcher.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-07/components/team-switcher.svelte
@@ -39,7 +39,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				align="start"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-08/components/nav-user.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-08/components/nav-user.svelte
index 75ffeb5ff..b7efaab72 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-08/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-08/components/nav-user.svelte
@@ -47,7 +47,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-09/components/nav-user.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-09/components/nav-user.svelte
index 78eceac02..1601abcc0 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-09/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-09/components/nav-user.svelte
@@ -39,7 +39,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="end"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-12/components/nav-user.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-12/components/nav-user.svelte
index 2e22647a2..a9b7555e4 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-12/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-12/components/nav-user.svelte
@@ -38,7 +38,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="start"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/block/sidebar-15/components/nav-user.svelte b/sites/docs/src/lib/registry/new-york/block/sidebar-15/components/nav-user.svelte
index 640ae4c86..6cdddb5d5 100644
--- a/sites/docs/src/lib/registry/new-york/block/sidebar-15/components/nav-user.svelte
+++ b/sites/docs/src/lib/registry/new-york/block/sidebar-15/components/nav-user.svelte
@@ -38,7 +38,7 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 				side={sidebar.isMobile ? "bottom" : "right"}
 				align="start"
 				sideOffset={4}
diff --git a/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar-menu-skeleton.svelte b/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar-menu-skeleton.svelte
index 5374af933..6b34cc244 100644
--- a/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -28,7 +28,7 @@
 		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 	{/if}
 	<Skeleton
-		class="h-4 max-w-[--skeleton-width] flex-1"
+		class="h-4 max-w-[var(--skeleton-width)] flex-1"
 		data-sidebar="menu-skeleton-text"
 		style="--skeleton-width: {width};"
 	/>
diff --git a/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar.svelte b/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar.svelte
index 59013b0db..e5e395dbf 100644
--- a/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar.svelte
+++ b/sites/docs/src/lib/registry/new-york/ui/sidebar/sidebar.svelte
@@ -26,7 +26,7 @@
 {#if collapsible === "none"}
 	<div
 		class={cn(
-			"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+			"bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
 			className
 		)}
 		bind:this={ref}
@@ -42,7 +42,7 @@
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-mobile="true"
-			class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+			class="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -63,24 +63,24 @@
 		<!-- This is what handles the sidebar gap on desktop -->
 		<div
 			class={cn(
-				"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+				"relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
 				"group-data-[collapsible=offcanvas]:w-0",
 				"group-data-[side=right]:rotate-180",
 				variant === "floating" || variant === "inset"
 					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
 			)}
 		></div>
 		<div
 			class={cn(
-				"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+				"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
 				side === "left"
 					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
 				// Adjust the padding for floating and inset variants.
 				variant === "floating" || variant === "inset"
 					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
 				className
 			)}
 			{...restProps}