diff --git a/sites/docs/src/content/components/sidebar.md b/sites/docs/src/content/components/sidebar.md
index ad7b1041d8..31d4c37284 100644
--- a/sites/docs/src/content/components/sidebar.md
+++ b/sites/docs/src/content/components/sidebar.md
@@ -39,28 +39,26 @@ We now have a solid foundation to build on top of. Composable. Themeable. Custom
 We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
 
 ```css title="src/app.css"
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 
@@ -82,28 +80,26 @@ Copy and paste the component source files linked at the top of this page into yo
 We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
 
 ```css title="src/app.css"
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 
@@ -943,28 +939,26 @@ Use Svelte's [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bin
 We use the following CSS variables to theme the sidebar.
 
 ```css
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 0 0% 98%;
-    --sidebar-primary-foreground: 240 5.9% 10%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 
diff --git a/sites/docs/src/lib/components/docs/block-preview.svelte b/sites/docs/src/lib/components/docs/block-preview.svelte
index 5f2c8cbf8f..e526c89a49 100644
--- a/sites/docs/src/lib/components/docs/block-preview.svelte
+++ b/sites/docs/src/lib/components/docs/block-preview.svelte
@@ -49,7 +49,7 @@
 				class="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:block md:dark:hidden"
 			/>
 			<iframe
-				src={`/blocks/${block.name}`}
+				src="/blocks/{block.name}"
 				height={block.container?.height}
 				class="chunk-mode bg-background relative z-20 hidden w-full md:block"
 				onload={() => {
diff --git a/sites/docs/src/lib/components/docs/block-toolbar.svelte b/sites/docs/src/lib/components/docs/block-toolbar.svelte
index 584ff3c2e4..56a534228d 100644
--- a/sites/docs/src/lib/components/docs/block-toolbar.svelte
+++ b/sites/docs/src/lib/components/docs/block-toolbar.svelte
@@ -11,15 +11,15 @@
 	import type { Block } from "$lib/blocks.js";
 	import type { ResizablePane } from "$lib/registry/ui/resizable/index.js";
 	import { CopyToClipboard } from "$lib/utils/copy-to-clipboard.svelte.js";
-	import { getCommand, getPackageManager } from "$lib/stores/package-manager.js";
+	import { PackageManagerContext, getCommand } from "$lib/package-manager.js";
 
 	let { block, resizablePaneRef }: { block: Block; resizablePaneRef: ResizablePane } = $props();
 
 	const copier = new CopyToClipboard();
-	const selectedPackageManager = getPackageManager();
+	const pm = PackageManagerContext.get();
 
 	const addCommand = $derived(
-		getCommand($selectedPackageManager, "execute", `shadcn-svelte@next add ${block.name}`)
+		getCommand(pm.current, "execute", `shadcn-svelte@next add ${block.name}`)
 	);
 
 	const command = $derived(addCommand.command + " " + addCommand.args.join(" "));
@@ -30,7 +30,7 @@
 </script>
 
 <div class="flex items-center gap-2 md:gap-4">
-	<Button href={`#${block.name}`} variant="link" class="whitespace-normal px-1 md:px-2">
+	<Button href="#{block.name}" variant="link" class="whitespace-normal px-1 md:px-2">
 		{block.description}
 	</Button>
 	<div class="ml-auto hidden items-center gap-2 md:flex md:pr-[14px]">
@@ -87,7 +87,7 @@
 					variant="ghost"
 					class="h-[22px] w-[22px] rounded-sm p-0"
 					title="Open in New Tab"
-					href={`/blocks/${block.name}`}
+					href="/blocks/{block.name}"
 					target="_blank"
 				>
 					<span class="sr-only">Open in New Tab</span>
diff --git a/sites/docs/src/lib/components/docs/block-viewer-toolbar.svelte b/sites/docs/src/lib/components/docs/block-viewer-toolbar.svelte
index 31bc1e414a..651cb006a5 100644
--- a/sites/docs/src/lib/components/docs/block-viewer-toolbar.svelte
+++ b/sites/docs/src/lib/components/docs/block-viewer-toolbar.svelte
@@ -11,16 +11,16 @@
 	import FullscreenIcon from "@lucide/svelte/icons/fullscreen";
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import TerminalIcon from "@lucide/svelte/icons/terminal";
-	import { getCommand, getPackageManager } from "$lib/stores/package-manager.js";
+	import { getCommand, PackageManagerContext } from "$lib/package-manager.js";
 
 	const ctx = BlockViewerContext.get();
 
 	const clipboard = new UseClipboard();
 
-	const agent = getPackageManager();
+	const pm = PackageManagerContext.get();
 
 	const addCommand = $derived(
-		getCommand($agent, "execute", `shadcn-svelte@next add ${ctx.item.name}`)
+		getCommand(pm.current, "execute", `shadcn-svelte@next add ${ctx.item.name}`)
 	);
 
 	const command = $derived(addCommand.command + " " + addCommand.args.join(" "));
@@ -40,7 +40,7 @@
 		</Tabs.List>
 	</Tabs.Root>
 	<Separator orientation="vertical" class="mx-2 hidden !h-4 lg:flex" />
-	<a href={`#${ctx.item.name}`} class="text-sm font-medium underline-offset-2 hover:underline">
+	<a href="#{ctx.item.name}" class="text-sm font-medium underline-offset-2 hover:underline">
 		{ctx.item.description}
 	</a>
 	<div class="ml-auto hidden items-center gap-2 md:flex">
diff --git a/sites/docs/src/lib/components/docs/component-preview-manual.svelte b/sites/docs/src/lib/components/docs/component-preview-manual.svelte
index 5988fe9398..f7211c58de 100644
--- a/sites/docs/src/lib/components/docs/component-preview-manual.svelte
+++ b/sites/docs/src/lib/components/docs/component-preview-manual.svelte
@@ -21,21 +21,21 @@
 {#if type === "block"}
 	<div class="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
 		<img
-			src={`/images/blocks/${name}.png`}
+			src="/images/blocks/{name}.png"
 			alt={name}
 			width={1440}
 			height={900}
 			class="bg-background absolute left-0 top-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
 		/>
 		<img
-			src={`/images/blocks/${name}-dark.png`}
+			src="/images/blocks/{name}-dark.png"
 			alt={name}
 			width={1440}
 			height={900}
 			class="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
 		/>
 		<div class="bg-background absolute inset-0 hidden w-[1600px] md:block">
-			<iframe {title} src={`/blocks/${name}`} class="size-full"></iframe>
+			<iframe {title} src="/view/{name}" class="size-full"></iframe>
 		</div>
 	</div>
 {:else}
diff --git a/sites/docs/src/lib/components/docs/nav/main-nav.svelte b/sites/docs/src/lib/components/docs/nav/main-nav.svelte
index b31647b14c..03a2b50ff8 100644
--- a/sites/docs/src/lib/components/docs/nav/main-nav.svelte
+++ b/sites/docs/src/lib/components/docs/nav/main-nav.svelte
@@ -28,7 +28,7 @@
 			href="/docs/components"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				page.url.pathname?.startsWith("/docs/components") &&
+				page.url.pathname?.startsWith("/docs/components/") &&
 					!page.url.pathname?.startsWith("/docs/component/chart")
 					? "text-foreground"
 					: "text-foreground/80"
diff --git a/sites/docs/src/lib/components/docs/pm-block.svelte b/sites/docs/src/lib/components/docs/pm-block.svelte
index ca377acd79..ea51331f2a 100644
--- a/sites/docs/src/lib/components/docs/pm-block.svelte
+++ b/sites/docs/src/lib/components/docs/pm-block.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-	import {
-		getCommand,
-		getPackageManager,
-		PACKAGE_MANAGERS,
-	} from "$lib/stores/package-manager.js";
 	import type { Command } from "package-manager-detector";
 	import ClipboardIcon from "@lucide/svelte/icons/clipboard";
 	import CopyButton from "./copy-button.svelte";
+	import { getCommand, PACKAGE_MANAGERS, PackageManagerContext } from "$lib/package-manager.js";
 
 	const {
 		type,
@@ -16,9 +12,9 @@
 		command: string | string[];
 	} = $props();
 
-	const agent = getPackageManager();
+	const pm = PackageManagerContext.get();
 
-	const cmd = $derived(getCommand($agent, type, command));
+	const cmd = $derived(getCommand(pm.current, type, command));
 
 	const commandText = $derived(`${cmd.command} ${cmd.args.join(" ")}`);
 </script>
@@ -29,17 +25,17 @@
 			class="flex place-items-end justify-between rounded-lg border-b border-zinc-800 bg-zinc-900 p-2 pb-0"
 		>
 			<div class="flex place-items-center gap-1">
-				{#each PACKAGE_MANAGERS as pm (pm)}
+				{#each PACKAGE_MANAGERS as packageManager (packageManager)}
 					<button
 						type="button"
 						class={{
 							"-mb-0.5 border-b p-1 font-mono text-sm": true,
-							"border-b-zinc-50 text-zinc-50": $agent === pm,
-							"border-transparent text-zinc-400": $agent !== pm,
+							"border-b-zinc-50 text-zinc-50": pm.current === packageManager,
+							"border-transparent text-zinc-400": pm.current !== packageManager,
 						}}
-						onclick={() => ($agent = pm)}
+						onclick={() => (pm.current = packageManager)}
 					>
-						{pm}
+						{packageManager}
 					</button>
 				{/each}
 			</div>
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte b/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
index c774696b55..8a59f6c481 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <script lang="ts">
-	import { config } from "$lib/stores/index.js";
+	import { ConfigContext } from "$lib/config-state.js";
 	import ThemeWrapper from "$lib/components/docs/theme-wrapper.svelte";
 	import { UseClipboard } from "$lib/hooks/use-clipboard.svelte.js";
 	import { baseColorsOKLCH } from "$lib/registry/registry-base-colors.js";
@@ -34,9 +34,11 @@
 	import ClipboardIcon from "@lucide/svelte/icons/clipboard";
 	import { Button } from "$lib/registry/ui/button/index.js";
 
+	const config = ConfigContext.get();
+
 	const clipboard = new UseClipboard();
 	const activeThemeOKLCH = $derived(
-		baseColorsOKLCH[$config.theme as keyof typeof baseColorsOKLCH]
+		baseColorsOKLCH[config.current.theme as keyof typeof baseColorsOKLCH]
 	);
 </script>
 
@@ -45,7 +47,7 @@
 		size="sm"
 		variant="outline"
 		onclick={() => {
-			clipboard.copy(getThemeCodeOKLCH(activeThemeOKLCH, $config.radius));
+			clipboard.copy(getThemeCodeOKLCH(activeThemeOKLCH, config.current.radius));
 		}}
 		class="absolute right-0 top-0 shadow-none"
 	>
@@ -61,7 +63,7 @@
 			class="flex max-h-[450px] flex-col overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
 			<code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
 			  <span class="line text-white">&nbsp;:root &#123;</span>
-			  <span class="line text-white">&nbsp;&nbsp;&nbsp;--radius: {$config.radius}rem;</span>
+			  <span class="line text-white">&nbsp;&nbsp;&nbsp;--radius: {config.current.radius}rem;</span>
 			  {#each Object.entries(activeThemeOKLCH?.light) as [key, value] (key)}
 					<span class="line text-white">&nbsp;&nbsp;&nbsp;--{key}: {value};</span>
 				{/each}
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte b/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
index d6d846c4b5..db51fd43ab 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { mode } from "mode-watcher";
-	import { config } from "$lib/stores/index.js";
+	import { ConfigContext } from "$lib/config-state.js";
 	import { Button } from "$lib/registry/ui/button/index.js";
 	import ThemeWrapper from "$lib/components/docs/theme-wrapper.svelte";
 	import { Label } from "$lib/registry/ui/label/index.js";
@@ -12,6 +12,7 @@
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import { Skeleton } from "$lib/registry/ui/skeleton/index.js";
 
+	const config = ConfigContext.get();
 	const isMounted = new IsMounted();
 </script>
 
@@ -23,13 +24,13 @@
 			<Label class="sr-only text-xs">Color</Label>
 			<div class="flex flex-wrap gap-1 md:gap-2">
 				{#each baseColors.filter((theme) => !["slate", "stone", "gray", "neutral"].includes(theme.name)) as theme (theme.name)}
-					{@const isActive = $config.theme === theme.name}
+					{@const isActive = config.current.theme === theme.name}
 					{#if isMounted.current}
 						<Button
 							variant="outline"
 							size="sm"
 							onclick={() => {
-								config.update((c) => ({ ...c, theme: theme.name }));
+								config.current.theme = theme.name;
 							}}
 							class={cn(
 								"w-[32px] rounded-lg lg:px-2.5 xl:w-[86px]",
@@ -67,11 +68,11 @@
 						variant="outline"
 						size="sm"
 						onclick={() => {
-							config.update((c) => ({ ...c, radius: parseFloat(value) }));
+							config.current.radius = parseFloat(value);
 						}}
 						class={cn(
 							"w-[40px] rounded-lg",
-							$config.radius === parseFloat(value) &&
+							config.current.radius === parseFloat(value) &&
 								"border-primary/50 ring-primary/30 ring-[2px]"
 						)}
 					>
diff --git a/sites/docs/src/lib/components/docs/theme-wrapper.svelte b/sites/docs/src/lib/components/docs/theme-wrapper.svelte
index a9f13763fe..5b8f91e801 100644
--- a/sites/docs/src/lib/components/docs/theme-wrapper.svelte
+++ b/sites/docs/src/lib/components/docs/theme-wrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { config } from "$lib/stores/index.js";
+	import { ConfigContext } from "$lib/config-state.js";
 	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	const config = ConfigContext.get();
 
 	let {
 		class: className,
@@ -11,9 +12,9 @@
 </script>
 
 <div
-	class={cn(`theme-${defaultTheme || $config.theme}`, "w-full", className)}
+	class={cn(`theme-${defaultTheme || config.current.theme}`, "w-full", className)}
 	data-style="default"
-	style="--radius: {defaultTheme ? 0.5 : $config.radius}rem"
+	style="--radius: {defaultTheme ? 0.5 : config.current.radius}rem"
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/config-state.ts b/sites/docs/src/lib/config-state.ts
new file mode 100644
index 0000000000..9bf93c94d5
--- /dev/null
+++ b/sites/docs/src/lib/config-state.ts
@@ -0,0 +1,44 @@
+import type { Theme } from "$lib/registry/themes.js";
+import type { Cookies } from "@sveltejs/kit";
+import { PersistedState, Context, watch } from "runed";
+import { useCookie } from "./hooks/use-cookie.svelte.js";
+
+type Config = {
+	theme: Theme["name"];
+	radius: number;
+};
+
+const DEFAULT_CONFIG: Config = {
+	theme: "zinc",
+	radius: 0.5,
+};
+
+export const ConfigContext = new Context<PersistedState<Config>>("ConfigContext");
+
+export function parseConfigCookie(cookies: Cookies) {
+	const config = cookies.get("scn_config");
+	if (!config) return DEFAULT_CONFIG;
+	try {
+		return JSON.parse(config) as Config;
+	} catch {
+		return DEFAULT_CONFIG;
+	}
+}
+
+export function setConfigContext(config: () => Config) {
+	const configState = ConfigContext.set(new PersistedState<Config>("scn-config", config()));
+
+	watch.pre(
+		() => config(),
+		() => {
+			configState.current = config();
+		}
+	);
+
+	useCookie({
+		value: () => configState.current,
+		name: "scn_config",
+	});
+
+	return configState;
+}
diff --git a/sites/docs/src/lib/hooks/use-cookie.svelte.ts b/sites/docs/src/lib/hooks/use-cookie.svelte.ts
new file mode 100644
index 0000000000..6d8fd5c92f
--- /dev/null
+++ b/sites/docs/src/lib/hooks/use-cookie.svelte.ts
@@ -0,0 +1,22 @@
+import { watch } from "runed";
+
+type UseCookieOptions<T> = {
+	value: () => T;
+	name: string;
+	serialize?: (value: T) => string;
+};
+
+const defaultOptions = {
+	serialize: (value: unknown) => (typeof value === "string" ? value : JSON.stringify(value)),
+};
+export function useCookie<T>(_options: UseCookieOptions<T>) {
+	const options = { ...defaultOptions, ..._options };
+	const value = $derived(options.serialize(_options.value()));
+
+	watch.pre(
+		() => value,
+		() => {
+			document.cookie = `${options.name}=${value}; path=/; max-age=31536000; SameSite=Lax; ${window.location.protocol === "https:" ? "Secure;" : ""}`;
+		}
+	);
+}
diff --git a/sites/docs/src/lib/package-manager.ts b/sites/docs/src/lib/package-manager.ts
new file mode 100644
index 0000000000..28f8b0f7b2
--- /dev/null
+++ b/sites/docs/src/lib/package-manager.ts
@@ -0,0 +1,60 @@
+import type { Cookies } from "@sveltejs/kit";
+import { type Agent, type Command, type ResolvedCommand } from "package-manager-detector";
+import { resolveCommand } from "package-manager-detector/commands";
+import { Context, PersistedState, watch } from "runed";
+import { useCookie } from "./hooks/use-cookie.svelte.js";
+
+export const PACKAGE_MANAGERS: Agent[] = ["pnpm", "npm", "bun", "yarn"] as const;
+
+export const PackageManagerContext = new Context<PersistedState<Agent>>("PackageManagerContext");
+
+export type PackageManagerCommand = Command | "create";
+
+export function getCommand(
+	pm: Agent,
+	type: PackageManagerCommand,
+	command: string | string[]
+): ResolvedCommand {
+	let args = [];
+	if (typeof command === "string") {
+		args = command.split(" ");
+	} else {
+		args = command;
+	}
+
+	// special handling for create
+	if (type === "create") return { command: pm, args: ["create", ...args] };
+
+	const cmd = resolveCommand(pm, type, args);
+
+	// since docs are static any unresolved command is a code error
+	if (cmd === null) throw new Error("Could not resolve command!");
+
+	return cmd;
+}
+
+export function parsePackageManagerCookie(cookies: Cookies): Agent {
+	const pm = cookies.get("scn_package_manager");
+	if (!pm) return "npm";
+	return pm as Agent;
+}
+
+export function setPackageManagerContext(pm: () => Agent) {
+	const packageManager = PackageManagerContext.set(
+		new PersistedState<Agent>("scn-package-manager", pm())
+	);
+
+	watch.pre(
+		() => pm(),
+		() => {
+			packageManager.current = pm();
+		}
+	);
+
+	useCookie({
+		value: () => packageManager.current,
+		name: "scn_package_manager",
+	});
+
+	return packageManager;
+}
diff --git a/sites/docs/src/lib/registry/examples/scroll-area-horizontal.svelte b/sites/docs/src/lib/registry/examples/scroll-area-horizontal.svelte
index acd2077102..279710e97c 100644
--- a/sites/docs/src/lib/registry/examples/scroll-area-horizontal.svelte
+++ b/sites/docs/src/lib/registry/examples/scroll-area-horizontal.svelte
@@ -29,7 +29,7 @@
 				<div class="overflow-hidden rounded-md">
 					<img
 						src={artwork.art}
-						alt={`Photo by ${artwork.artist}`}
+						alt="Photo by {artwork.artist}"
 						class="aspect-[3/4] h-fit w-fit object-cover"
 						width={300}
 						height={400}
diff --git a/sites/docs/src/lib/registry/ui/progress/progress.svelte b/sites/docs/src/lib/registry/ui/progress/progress.svelte
index a3c20ca481..68330136a8 100644
--- a/sites/docs/src/lib/registry/ui/progress/progress.svelte
+++ b/sites/docs/src/lib/registry/ui/progress/progress.svelte
@@ -22,6 +22,6 @@
 	<div
 		data-slot="progress-indicator"
 		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>
diff --git a/sites/docs/src/lib/stores/config.ts b/sites/docs/src/lib/stores/config.ts
deleted file mode 100644
index 429f2a7d74..0000000000
--- a/sites/docs/src/lib/stores/config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { persisted } from "svelte-persisted-store";
-
-import type { Theme } from "$lib/registry/themes.js";
-
-type Config = {
-	theme: Theme["name"];
-	radius: number;
-};
-
-export const config = persisted<Config>("config", {
-	theme: "zinc",
-	radius: 0.5,
-});
diff --git a/sites/docs/src/lib/stores/index.ts b/sites/docs/src/lib/stores/index.ts
deleted file mode 100644
index d1bc97e809..0000000000
--- a/sites/docs/src/lib/stores/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./config.js";
diff --git a/sites/docs/src/lib/stores/package-manager.ts b/sites/docs/src/lib/stores/package-manager.ts
deleted file mode 100644
index 1a880d00f5..0000000000
--- a/sites/docs/src/lib/stores/package-manager.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { getContext, setContext } from "svelte";
-import { persisted } from "svelte-persisted-store";
-import type { Agent, Command, ResolvedCommand } from "package-manager-detector";
-import { resolveCommand } from "package-manager-detector/commands";
-
-export const PACKAGE_MANAGERS: Agent[] = ["pnpm", "npm", "bun", "yarn"] as const;
-
-const PACKAGE_MANAGER = Symbol("packageManager");
-
-export function setPackageManager(initialValue: Agent = "npm") {
-	const packageManager = createPackageManagerStore("packageManager", initialValue);
-	setContext(PACKAGE_MANAGER, packageManager);
-	return packageManager;
-}
-
-export function getPackageManager(): ReturnType<typeof setPackageManager> {
-	return getContext(PACKAGE_MANAGER);
-}
-
-function createPackageManagerStore(key: string, initialValue: Agent) {
-	const store = persisted(key, initialValue);
-	return store;
-}
-
-export type PackageManagerCommand = Command | "create";
-
-export function getCommand(
-	pm: Agent,
-	type: PackageManagerCommand,
-	command: string | string[]
-): ResolvedCommand {
-	let args = [];
-	if (typeof command === "string") {
-		args = command.split(" ");
-	} else {
-		args = command;
-	}
-
-	// special handling for create
-	if (type === "create") return { command: pm, args: ["create", ...args] };
-
-	const cmd = resolveCommand(pm, type, args);
-
-	// since docs are static any unresolved command is a code error
-	if (cmd === null) throw new Error("Could not resolve command!");
-
-	return cmd;
-}
diff --git a/sites/docs/src/routes/+layout.server.ts b/sites/docs/src/routes/+layout.server.ts
new file mode 100644
index 0000000000..3ab63ba110
--- /dev/null
+++ b/sites/docs/src/routes/+layout.server.ts
@@ -0,0 +1,12 @@
+import { parseConfigCookie } from "$lib/config-state.js";
+import { parsePackageManagerCookie } from "$lib/package-manager.js";
+
+export async function load({ cookies }) {
+	const config = parseConfigCookie(cookies);
+	const packageManager = parsePackageManagerCookie(cookies);
+
+	return {
+		config,
+		packageManager,
+	};
+}
diff --git a/sites/docs/src/routes/+layout.svelte b/sites/docs/src/routes/+layout.svelte
index 2091b4fc4b..3f66726df8 100644
--- a/sites/docs/src/routes/+layout.svelte
+++ b/sites/docs/src/routes/+layout.svelte
@@ -5,19 +5,20 @@
 	import { updateTheme } from "$lib/utils.js";
 	import "../styles/globals.css";
 	import "../styles/carbon.css";
-	import { config } from "$lib/stores/index.js";
+	import { setConfigContext } from "$lib/config-state.js";
 	import { Toaster } from "$lib/registry/ui/sonner/index.js";
-	import { setPackageManager } from "$lib/stores/package-manager.js";
 	import * as Tooltip from "$lib/registry/ui/tooltip/index.js";
 	import { dev } from "$app/environment";
 	import TailwindIndicator from "$lib/components/docs/tailwind-indicator.svelte";
+	import { setPackageManagerContext } from "$lib/package-manager.js";
 
-	let { children } = $props();
+	let { children, data } = $props();
 
-	setPackageManager();
+	const config = setConfigContext(() => data.config);
+	setPackageManagerContext(() => data.packageManager);
 
 	$effect(() => {
-		updateTheme($config.theme, page.url.pathname);
+		updateTheme(config.current.theme, page.url.pathname);
 	});
 </script>
 
diff --git a/v4/src/lib/components/app-sidebar.svelte b/v4/src/lib/components/app-sidebar.svelte
index ab92f11fc8..be8c7f9f72 100644
--- a/v4/src/lib/components/app-sidebar.svelte
+++ b/v4/src/lib/components/app-sidebar.svelte
@@ -210,7 +210,7 @@
 					<Sidebar.MenuItem>
 						<Sidebar.MenuButton>
 							{#snippet child({ props })}
-								<a href={`/#${item.name}`} {...props}>
+								<a href="/#{item.name}" {...props}>
 									<span>{getComponentName(item.name)}</span>
 								</a>
 							{/snippet}
diff --git a/v4/src/lib/components/scroll-area-horizontal.svelte b/v4/src/lib/components/scroll-area-horizontal.svelte
index 6ce9e5f617..51ca85ba7a 100644
--- a/v4/src/lib/components/scroll-area-horizontal.svelte
+++ b/v4/src/lib/components/scroll-area-horizontal.svelte
@@ -23,7 +23,7 @@
 				<div class="overflow-hidden rounded-md">
 					<img
 						src={artwork.art}
-						alt={`Photo by ${artwork.artist}`}
+						alt="Photo by {artwork.artist}"
 						class="aspect-[3/4] h-fit w-fit object-cover"
 						width={300}
 						height={400}
diff --git a/v4/src/lib/registry/examples/cards/activity-goal.svelte b/v4/src/lib/registry/examples/cards/activity-goal.svelte
deleted file mode 100644
index e9832966a5..0000000000
--- a/v4/src/lib/registry/examples/cards/activity-goal.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import PlusIcon from "@lucide/svelte/icons/plus";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import { Activity } from "$lib/components/docs/charts/index.js";
-
-	let goal = $state(350);
-	function updateGoal(adjustment: number) {
-		goal = Math.max(200, Math.min(400, goal + adjustment));
-	}
-</script>
-
-<Card.Root>
-	<Card.Header class="pb-4">
-		<Card.Title class="text-base">Move Goal</Card.Title>
-		<Card.Description>Set your daily activity goal.</Card.Description>
-	</Card.Header>
-	<Card.Content class="pb-2">
-		<div class="flex items-center justify-center space-x-2">
-			<Button
-				variant="outline"
-				size="icon"
-				class="size-8 shrink-0 rounded-full"
-				onclick={() => updateGoal(-10)}
-				disabled={goal <= 200}
-			>
-				<MinusIcon class="size-4" />
-				<span class="sr-only">Decrease</span>
-			</Button>
-			<div class="flex-1 text-center">
-				<div class="text-5xl font-bold tracking-tighter">{goal}</div>
-				<div class="text-muted-foreground text-[0.70rem] uppercase">Calories/day</div>
-			</div>
-
-			<Button
-				variant="outline"
-				size="icon"
-				class="size-8 shrink-0 rounded-full"
-				onclick={() => updateGoal(10)}
-				disabled={goal >= 400}
-			>
-				<PlusIcon class="size-4" />
-				<span class="sr-only">Increase</span>
-			</Button>
-		</div>
-		<div class="my-3 h-[60px]">
-			<Activity />
-		</div>
-	</Card.Content>
-	<Card.Footer>
-		<Button class="w-full">Set Goal</Button>
-	</Card.Footer>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/all.svelte b/v4/src/lib/registry/examples/cards/all.svelte
deleted file mode 100644
index 14dfa56dfe..0000000000
--- a/v4/src/lib/registry/examples/cards/all.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import CardsCookieSettings from "./cookie-settings.svelte";
-	import CardsPaymentMethod from "./payment-method.svelte";
-	import CardsCreateAccount from "./create-account.svelte";
-	import CardsReportIssue from "./report-issue.svelte";
-	import CardsShare from "./share.svelte";
-	import CardsCalendar from "./calendar.svelte";
-	// import CardsDataTable from "./data-table.svelte";
-	import CardsTeamMembers from "./team-members.svelte";
-	import CardsChat from "./chat.svelte";
-</script>
-
-<div class="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-	<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-		<!-- <CardsStats /> -->
-		<div class="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
-			<CardsCalendar />
-			<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-				<!-- <CardsActivityGoal /> -->
-			</div>
-			<div class="pt-3 sm:col-span-2 xl:pt-4">
-				<!-- <CardsMetric /> -->
-			</div>
-		</div>
-		<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-			<div class="space-y-4 xl:space-y-4">
-				<CardsTeamMembers />
-				<CardsCookieSettings />
-				<CardsPaymentMethod />
-			</div>
-			<div class="space-y-4 xl:space-y-4">
-				<CardsChat />
-				<CardsCreateAccount />
-				<div class="hidden xl:block">
-					<CardsReportIssue />
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-		<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
-			<CardsCalendar />
-			<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-				<!-- <CardsActivityGoal /> -->
-			</div>
-			<div class="pt-3 sm:col-span-2 xl:pt-3">
-				<!-- <CardsMetric /> -->
-			</div>
-		</div>
-		<div class="hidden md:block">
-			<!-- <CardsDataTable /> -->
-		</div>
-		<CardsShare />
-		<div class="xl:hidden">
-			<CardsReportIssue />
-		</div>
-	</div>
-</div>
diff --git a/v4/src/lib/registry/examples/cards/calendar.svelte b/v4/src/lib/registry/examples/cards/calendar.svelte
deleted file mode 100644
index 2fdc977bb8..0000000000
--- a/v4/src/lib/registry/examples/cards/calendar.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { getLocalTimeZone, today } from "@internationalized/date";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { RangeCalendar } from "$lib/registry/ui/range-calendar/index.js";
-
-	const start = today(getLocalTimeZone());
-	const end = start.add({ days: 8 });
-
-	let value = $state({
-		start,
-		end,
-	});
-</script>
-
-<Card.Root class="max-w-[280px] ">
-	<Card.Content class="p-0">
-		<RangeCalendar bind:value />
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/chat.svelte b/v4/src/lib/registry/examples/cards/chat.svelte
deleted file mode 100644
index 7342482e42..0000000000
--- a/v4/src/lib/registry/examples/cards/chat.svelte
+++ /dev/null
@@ -1,207 +0,0 @@
-<script lang="ts">
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import SendIcon from "@lucide/svelte/icons/send";
-	import PlusIcon from "@lucide/svelte/icons/plus";
-	import { cn } from "$lib/utils.js";
-	import * as Avatar from "$lib/registry/ui/avatar/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import * as Command from "$lib/registry/ui/command/index.js";
-	import * as Dialog from "$lib/registry/ui/dialog/index.js";
-	import * as Tooltip from "$lib/registry/ui/tooltip/index.js";
-	import { Button, buttonVariants } from "$lib/registry/ui/button/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-
-	const users = [
-		{
-			name: "Olivia Martin",
-			email: "m@example.com",
-			avatar: "/avatars/01.png",
-		},
-		{
-			name: "Isabella Nguyen",
-			email: "isabella.nguyen@email.com",
-			avatar: "/avatars/03.png",
-		},
-		{
-			name: "Emma Wilson",
-			email: "emma@example.com",
-			avatar: "/avatars/05.png",
-		},
-		{
-			name: "Jackson Lee",
-			email: "lee@example.com",
-			avatar: "/avatars/02.png",
-		},
-		{
-			name: "William Kim",
-			email: "will@email.com",
-			avatar: "/avatars/04.png",
-		},
-	] as const;
-
-	type User = (typeof users)[number];
-
-	let open = $state(false);
-	let selectedUsers = $state<User[]>([]);
-
-	let messages = $state([
-		{
-			role: "agent",
-			content: "Hi, how can I help you today?",
-		},
-		{
-			role: "user",
-			content: "Hey, I'm having trouble with my account.",
-		},
-		{
-			role: "agent",
-			content: "What seems to be the problem?",
-		},
-		{
-			role: "user",
-			content: "I can't log in.",
-		},
-	]);
-
-	let input = $state("");
-
-	const inputLength = $derived(input.trim().length);
-</script>
-
-<Card.Root>
-	<Card.Header class="flex flex-row items-center">
-		<div class="flex items-center space-x-4">
-			<Avatar.Root>
-				<Avatar.Image src="/avatars/01.png" alt="Image" />
-				<Avatar.Fallback>OM</Avatar.Fallback>
-			</Avatar.Root>
-			<div>
-				<p class="text-sm font-medium leading-none">Sofia Davis</p>
-				<p class="text-muted-foreground text-sm">m@example.com</p>
-			</div>
-		</div>
-		<Tooltip.Root delayDuration={0}>
-			<Tooltip.Trigger
-				class={buttonVariants({
-					variant: "outline",
-					size: "icon",
-					class: "ml-auto rounded-full",
-				})}
-				onclick={() => (open = true)}
-			>
-				<PlusIcon class="size-4" />
-				<span class="sr-only">New message</span>
-			</Tooltip.Trigger>
-			<Tooltip.Content sideOffset={10}>New message</Tooltip.Content>
-		</Tooltip.Root>
-	</Card.Header>
-	<Card.Content>
-		<div class="space-y-4">
-			{#each messages as message (message)}
-				<div
-					class={cn(
-						"flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
-						message.role === "user"
-							? "bg-primary text-primary-foreground ml-auto"
-							: "bg-muted"
-					)}
-				>
-					{message.content}
-				</div>
-			{/each}
-		</div>
-	</Card.Content>
-	<Card.Footer>
-		<form
-			onsubmit={(event) => {
-				event.preventDefault();
-				if (inputLength === 0) return;
-				messages.push({
-					role: "user",
-					content: input,
-				});
-				input = "";
-			}}
-			class="flex w-full items-center space-x-2"
-		>
-			<Input
-				id="message"
-				placeholder="Type your message..."
-				class="flex-1"
-				autocomplete="off"
-				bind:value={input}
-			/>
-			<Button type="submit" size="icon" disabled={inputLength === 0}>
-				<SendIcon class="size-4" />
-				<span class="sr-only">Send</span>
-			</Button>
-		</form>
-	</Card.Footer>
-</Card.Root>
-<Dialog.Root bind:open>
-	<Dialog.Content class="gap-0 p-0 outline-none">
-		<Dialog.Header class="px-4 pb-4 pt-5">
-			<Dialog.Title>New message</Dialog.Title>
-			<Dialog.Description>
-				Invite a user to this thread. This will create a new group message.
-			</Dialog.Description>
-		</Dialog.Header>
-		<Command.Root class="overflow-hidden rounded-t-none border-t bg-transparent">
-			<Command.Input placeholder="Search user..." />
-			<Command.List>
-				<Command.Empty>No users found.</Command.Empty>
-				<Command.Group class="p-2">
-					{#each users as user (user.email)}
-						<Command.Item
-							class="flex items-center px-2"
-							onSelect={() => {
-								if (selectedUsers.includes(user)) {
-									selectedUsers = selectedUsers.filter(
-										(selectedUser) => selectedUser !== user
-									);
-								} else {
-									selectedUsers = [...users].filter((u) =>
-										[...selectedUsers, user].includes(u)
-									);
-								}
-							}}
-						>
-							<Avatar.Root>
-								<Avatar.Image src={user.avatar} alt="Image" />
-								<Avatar.Fallback>{user.name[0]}</Avatar.Fallback>
-							</Avatar.Root>
-							<div class="ml-2">
-								<p class="text-sm font-medium leading-none">
-									{user.name}
-								</p>
-								<p class="text-muted-foreground text-sm">
-									{user.email}
-								</p>
-							</div>
-							{#if selectedUsers.includes(user)}
-								<CheckIcon class="text-primary ml-auto flex size-5" />
-							{/if}
-						</Command.Item>
-					{/each}
-				</Command.Group>
-			</Command.List>
-		</Command.Root>
-		<Dialog.Footer class="flex items-center border-t p-4 sm:justify-between">
-			{#if selectedUsers.length}
-				<div class="flex -space-x-2 overflow-hidden">
-					{#each selectedUsers as user (user.email)}
-						<Avatar.Root class="border-background inline-block border-2">
-							<Avatar.Image src={user.avatar} />
-							<Avatar.Fallback>{user.name[0]}</Avatar.Fallback>
-						</Avatar.Root>
-					{/each}
-				</div>
-			{:else}
-				<p class="text-muted-foreground text-sm">Select users to add to this thread.</p>
-			{/if}
-			<Button disabled={selectedUsers.length < 2} onclick={() => (open = false)}>
-				Continue
-			</Button>
-		</Dialog.Footer>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/v4/src/lib/registry/examples/cards/cookie-settings.svelte b/v4/src/lib/registry/examples/cards/cookie-settings.svelte
deleted file mode 100644
index 0a6c6bdf78..0000000000
--- a/v4/src/lib/registry/examples/cards/cookie-settings.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Label } from "$lib/registry/ui/label/index.js";
-	import { Switch } from "$lib/registry/ui/switch/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Cookie Settings</Card.Title>
-		<Card.Description>Manage your cookie settings here.</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-6">
-		<div class="flex items-center justify-between space-x-4">
-			<Label for="necessary" class="flex flex-col space-y-1">
-				<span>Strictly Necessary</span>
-				<span class="text-muted-foreground text-xs font-normal leading-snug">
-					These cookies are essential in order to use the website and use its features.
-				</span>
-			</Label>
-			<Switch id="necessary" checked aria-label="Necessary" />
-		</div>
-		<div class="flex items-center justify-between space-x-4">
-			<Label for="functional" class="flex flex-col space-y-1">
-				<span>Functional Cookies</span>
-				<span class="text-muted-foreground text-xs font-normal leading-snug">
-					These cookies allow the website to provide personalized functionality.
-				</span>
-			</Label>
-			<Switch id="functional" aria-label="Functional" />
-		</div>
-		<div class="flex items-center justify-between space-x-4">
-			<Label for="performance" class="flex flex-col space-y-1">
-				<span>Performance Cookies</span>
-				<span class="text-muted-foreground text-xs font-normal leading-snug">
-					These cookies help to improve the performance of the website.
-				</span>
-			</Label>
-			<Switch id="performance" aria-label="Performance" />
-		</div>
-	</Card.Content>
-	<Card.Footer>
-		<Button variant="outline" class="w-full">Save preferences</Button>
-	</Card.Footer>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/create-account.svelte b/v4/src/lib/registry/examples/cards/create-account.svelte
deleted file mode 100644
index 6be03edbd7..0000000000
--- a/v4/src/lib/registry/examples/cards/create-account.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import * as Icon from "$lib/components/docs/icons/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Label } from "$lib/registry/ui/label/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header class="space-y-1">
-		<Card.Title class="text-2xl">Create an account</Card.Title>
-		<Card.Description>Enter your email below to create your account</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-4">
-		<div class="grid grid-cols-2 gap-6">
-			<Button variant="outline">
-				<Icon.GitHub class="mr-2 size-4" />
-				GitHub
-			</Button>
-			<Button variant="outline">
-				<Icon.Google class="mr-2 size-4" />
-				Google
-			</Button>
-		</div>
-		<div class="relative">
-			<div class="absolute inset-0 flex items-center">
-				<span class="w-full border-t"></span>
-			</div>
-			<div class="relative flex justify-center text-xs uppercase">
-				<span class="bg-card text-muted-foreground px-2"> Or continue with </span>
-			</div>
-		</div>
-		<div class="grid gap-2">
-			<Label for="email">Email</Label>
-			<Input id="email" type="email" placeholder="m@example.com" />
-		</div>
-		<div class="grid gap-2">
-			<Label for="password">Password</Label>
-			<Input id="password" type="password" />
-		</div>
-	</Card.Content>
-	<Card.Footer>
-		<Button class="w-full">Create account</Button>
-	</Card.Footer>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/data-table.svelte b/v4/src/lib/registry/examples/cards/data-table.svelte
deleted file mode 100644
index 18f56d51d7..0000000000
--- a/v4/src/lib/registry/examples/cards/data-table.svelte
+++ /dev/null
@@ -1,319 +0,0 @@
-<script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import {
-		type ColumnDef,
-		type ColumnFiltersState,
-		type RowSelectionState,
-		type SortingState,
-		type VisibilityState,
-		getCoreRowModel,
-		getFilteredRowModel,
-		getPaginationRowModel,
-		getSortedRowModel,
-	} from "@tanstack/table-core";
-	import { createRawSnippet } from "svelte";
-	import DataTableCheckbox from "../data-table/data-table-checkbox.svelte";
-	import DataTableEmailButton from "../data-table/data-table-email-button.svelte";
-	import DataTableActions from "../data-table/data-table-actions.svelte";
-	import * as Table from "$lib/registry/ui/table/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import * as DropdownMenu from "$lib/registry/ui/dropdown-menu/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import {
-		FlexRender,
-		createSvelteTable,
-		renderComponent,
-		renderSnippet,
-	} from "$lib/registry/ui/data-table/index.js";
-
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
-	const data: Payment[] = [
-		{
-			id: "m5gr84i9",
-			amount: 316,
-			status: "Success",
-			email: "ken99@yahoo.com",
-		},
-		{
-			id: "3u1reuv4",
-			amount: 242,
-			status: "Success",
-			email: "Abe45@gmail.com",
-		},
-		{
-			id: "derv1ws0",
-			amount: 837,
-			status: "Processing",
-			email: "Monserrat44@gmail.com",
-		},
-		{
-			id: "5kma53ae",
-			amount: 874,
-			status: "Success",
-			email: "Silas22@gmail.com",
-		},
-		{
-			id: "bhqecj4p",
-			amount: 721,
-			status: "Failed",
-			email: "carmella@hotmail.com",
-		},
-	];
-
-	const columns: ColumnDef<Payment>[] = [
-		{
-			id: "select",
-			header: ({ table }) =>
-				renderComponent(DataTableCheckbox, {
-					checked: table.getIsAllPageRowsSelected(),
-					indeterminate:
-						table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
-					onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
-					"aria-label": "Select all",
-				}),
-			cell: ({ row }) =>
-				renderComponent(DataTableCheckbox, {
-					checked: row.getIsSelected(),
-					onCheckedChange: (value) => row.toggleSelected(!!value),
-					"aria-label": "Select row",
-				}),
-			enableSorting: false,
-			enableHiding: false,
-		},
-		{
-			accessorKey: "status",
-			header: "Status",
-			cell: ({ row }) => {
-				const statusSnippet = createRawSnippet<[string]>((getStatus) => {
-					const status = getStatus();
-					return {
-						render: () => `<div class="capitalize">${status}</div>`,
-					};
-				});
-				return renderSnippet(statusSnippet, row.getValue("status"));
-			},
-		},
-		{
-			accessorKey: "email",
-			header: ({ column }) =>
-				renderComponent(DataTableEmailButton, {
-					onclick: column.getToggleSortingHandler(),
-				}),
-			cell: ({ row }) => {
-				const emailSnippet = createRawSnippet<[string]>((getEmail) => {
-					const email = getEmail();
-					return {
-						render: () => `<div class="lowercase">${email}</div>`,
-					};
-				});
-
-				return renderSnippet(emailSnippet, row.getValue("email"));
-			},
-		},
-		{
-			accessorKey: "amount",
-			header: () => {
-				const amountHeaderSnippet = createRawSnippet(() => {
-					return {
-						render: () => `<div class="text-right">Amount</div>`,
-					};
-				});
-				return renderSnippet(amountHeaderSnippet, "");
-			},
-			cell: ({ row }) => {
-				const amountCellSnippet = createRawSnippet<[string]>((getAmount) => {
-					const amount = getAmount();
-					return {
-						render: () => `<div class="text-right font-medium">${amount}</div>`,
-					};
-				});
-				const formatter = new Intl.NumberFormat("en-US", {
-					style: "currency",
-					currency: "USD",
-				});
-
-				return renderSnippet(
-					amountCellSnippet,
-					formatter.format(Number.parseFloat(row.getValue("amount")))
-				);
-			},
-		},
-		{
-			id: "actions",
-			enableHiding: false,
-			cell: ({ row }) => renderComponent(DataTableActions, { id: row.original.id }),
-		},
-	];
-
-	let sorting = $state<SortingState>([]);
-	let columnFilters = $state<ColumnFiltersState>([]);
-	let rowSelection = $state<RowSelectionState>({});
-	let columnVisibility = $state<VisibilityState>({});
-
-	const table = createSvelteTable({
-		get data() {
-			return data;
-		},
-		columns,
-		state: {
-			get sorting() {
-				return sorting;
-			},
-			get columnVisibility() {
-				return columnVisibility;
-			},
-			get rowSelection() {
-				return rowSelection;
-			},
-			get columnFilters() {
-				return columnFilters;
-			},
-		},
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onSortingChange: (updater) => {
-			if (typeof updater === "function") {
-				sorting = updater(sorting);
-			} else {
-				sorting = updater;
-			}
-		},
-		onColumnFiltersChange: (updater) => {
-			if (typeof updater === "function") {
-				columnFilters = updater(columnFilters);
-			} else {
-				columnFilters = updater;
-			}
-		},
-		onColumnVisibilityChange: (updater) => {
-			if (typeof updater === "function") {
-				columnVisibility = updater(columnVisibility);
-			} else {
-				columnVisibility = updater;
-			}
-		},
-		onRowSelectionChange: (updater) => {
-			if (typeof updater === "function") {
-				rowSelection = updater(rowSelection);
-			} else {
-				rowSelection = updater;
-			}
-		},
-	});
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Payments</Card.Title>
-		<Card.Description>Manage your payments.</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<div class="mb-4 flex items-center gap-4">
-			<Input
-				placeholder="Filter emails..."
-				value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-				oninput={(e) => table.getColumn("email")?.setFilterValue(e.currentTarget.value)}
-				onchange={(e) => {
-					table.getColumn("email")?.setFilterValue(e.currentTarget.value);
-				}}
-				class="max-w-sm"
-			/>
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} variant="outline" class="ml-auto">
-							Columns <ChevronDownIcon class="ml-2 size-4" />
-						</Button>
-					{/snippet}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content align="end">
-					{#each table
-						.getAllColumns()
-						.filter((col) => col.getCanHide()) as column (column)}
-						<DropdownMenu.CheckboxItem
-							class="capitalize"
-							bind:checked={
-								() => column.getIsVisible(), (v) => column.toggleVisibility(!!v)
-							}
-						>
-							{column.id}
-						</DropdownMenu.CheckboxItem>
-					{/each}
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-		</div>
-		<div class="rounded-md border">
-			<Table.Root>
-				<Table.Header>
-					{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-						<Table.Row>
-							{#each headerGroup.headers as header (header.id)}
-								<Table.Head class="[&:has([role=checkbox])]:pl-3">
-									{#if !header.isPlaceholder}
-										<FlexRender
-											content={header.column.columnDef.header}
-											context={header.getContext()}
-										/>
-									{/if}
-								</Table.Head>
-							{/each}
-						</Table.Row>
-					{/each}
-				</Table.Header>
-				<Table.Body>
-					{#each table.getRowModel().rows as row (row.id)}
-						<Table.Row data-state={row.getIsSelected() && "selected"}>
-							{#each row.getVisibleCells() as cell (cell.id)}
-								<Table.Cell class="[&:has([role=checkbox])]:pl-3">
-									<FlexRender
-										content={cell.column.columnDef.cell}
-										context={cell.getContext()}
-									/>
-								</Table.Cell>
-							{/each}
-						</Table.Row>
-					{:else}
-						<Table.Row>
-							<Table.Cell colspan={columns.length} class="h-24 text-center">
-								No results.
-							</Table.Cell>
-						</Table.Row>
-					{/each}
-				</Table.Body>
-			</Table.Root>
-		</div>
-		<div class="flex items-center justify-end space-x-2 pt-4">
-			<div class="text-muted-foreground flex-1 text-sm">
-				{table.getFilteredSelectedRowModel().rows.length} of
-				{table.getFilteredRowModel().rows.length} row(s) selected.
-			</div>
-			<div class="space-x-2">
-				<Button
-					variant="outline"
-					size="sm"
-					onclick={() => table.previousPage()}
-					disabled={!table.getCanPreviousPage()}
-				>
-					Previous
-				</Button>
-				<Button
-					variant="outline"
-					size="sm"
-					onclick={() => table.nextPage()}
-					disabled={!table.getCanNextPage()}
-				>
-					Next
-				</Button>
-			</div>
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/github.svelte b/v4/src/lib/registry/examples/cards/github.svelte
deleted file mode 100644
index e68d815edd..0000000000
--- a/v4/src/lib/registry/examples/cards/github.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import CircleIcon from "@lucide/svelte/icons/circle";
-	import PlusIcon from "@lucide/svelte/icons/plus";
-	import StarIcon from "@lucide/svelte/icons/star";
-	import { Button, buttonVariants } from "$lib/registry/ui/button/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import * as DropdownMenu from "$lib/registry/ui/dropdown-menu/index.js";
-	import { Separator } from "$lib/registry/ui/separator/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
-		<div class="space-y-1">
-			<Card.Title>shadcn-svelte</Card.Title>
-			<Card.Description>
-				Beautifully designed components built with Melt UI and Tailwind CSS.
-			</Card.Description>
-		</div>
-		<div class="bg-secondary text-secondary-foreground flex items-center space-x-1 rounded-md">
-			<Button variant="secondary" class="px-3 shadow-none">
-				<StarIcon class="mr-2 size-4" />
-				Star
-			</Button>
-			<Separator orientation="vertical" class="h-[20px]" />
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger
-					class={buttonVariants({ variant: "secondary", class: "px-2 shadow-none" })}
-				>
-					<ChevronDownIcon class="text-secondary-foreground size-4" />
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content class="w-[200px]" align="end">
-					<DropdownMenu.Group>
-						<DropdownMenu.Label>Suggested Lists</DropdownMenu.Label>
-						<DropdownMenu.Separator />
-						<DropdownMenu.CheckboxItem checked>Future Ideas</DropdownMenu.CheckboxItem>
-						<DropdownMenu.CheckboxItem>My Stack</DropdownMenu.CheckboxItem>
-						<DropdownMenu.CheckboxItem>Inspiration</DropdownMenu.CheckboxItem>
-						<DropdownMenu.Separator />
-						<DropdownMenu.Item>
-							<PlusIcon class="mr-2 size-4" /> Create List
-						</DropdownMenu.Item>
-					</DropdownMenu.Group>
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-		</div>
-	</Card.Header>
-	<Card.Content>
-		<div class="text-muted-foreground flex space-x-4 text-sm">
-			<div class="flex items-center">
-				<CircleIcon class="mr-1 size-3 fill-sky-400 text-sky-400" />
-				TypeScript
-			</div>
-			<div class="flex items-center">
-				<StarIcon class="mr-1 size-3" />
-				1k
-			</div>
-			<div>Updated April 2023</div>
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/index.ts b/v4/src/lib/registry/examples/cards/index.ts
deleted file mode 100644
index 041c6cf04e..0000000000
--- a/v4/src/lib/registry/examples/cards/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { default as CardsActivityGoal } from "./activity-goal.svelte";
-export { default as CardsCalendar } from "./calendar.svelte";
-export { default as CardsCookieSettings } from "./cookie-settings.svelte";
-export { default as CardsCreateAccount } from "./create-account.svelte";
-export { default as CardsDataTable } from "./data-table.svelte";
-export { default as CardsGithub } from "./github.svelte";
-export { default as CardsMetric } from "./metric.svelte";
-export { default as CardsNotifications } from "./notifications.svelte";
-export { default as CardsPaymentMethod } from "./payment-method.svelte";
-export { default as CardsReportIssue } from "./report-issue.svelte";
-export { default as CardsShare } from "./share.svelte";
-export { default as CardsStats } from "./stats.svelte";
-export { default as CardsDefault } from "./all.svelte";
-export { default as CardsChat } from "./chat.svelte";
diff --git a/v4/src/lib/registry/examples/cards/metric.svelte b/v4/src/lib/registry/examples/cards/metric.svelte
deleted file mode 100644
index 6b2a7f37e5..0000000000
--- a/v4/src/lib/registry/examples/cards/metric.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Metric } from "$lib/components/docs/charts/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Exercise Minutes</Card.Title>
-		<Card.Description
-			>Your excercise minutes are ahead of where you normally are.</Card.Description
-		>
-	</Card.Header>
-	<Card.Content class="pb-4">
-		<div class="h-[200px]">
-			<Metric />
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/notifications.svelte b/v4/src/lib/registry/examples/cards/notifications.svelte
deleted file mode 100644
index f7c5d26845..0000000000
--- a/v4/src/lib/registry/examples/cards/notifications.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import AtSignIcon from "@lucide/svelte/icons/at-sign";
-	import BellIcon from "@lucide/svelte/icons/bell";
-	import BellOffIcon from "@lucide/svelte/icons/bell-off";
-	import * as Card from "$lib/registry/ui/card/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Notifications</Card.Title>
-		<Card.Description>Choose what you want to be notified about.</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-1 p-1.5">
-		<div
-			class="hover:bg-accent hover:text-accent-foreground flex items-center space-x-4 rounded-md p-2"
-		>
-			<BellIcon class="size-5" />
-			<div class="space-y-1">
-				<p class="text-sm font-medium leading-none">Everything</p>
-				<p class="text-muted-foreground text-sm">Email digest, mentions & all activity.</p>
-			</div>
-		</div>
-		<div class="bg-accent text-accent-foreground flex items-center space-x-4 rounded-md p-2">
-			<AtSignIcon class="size-5" />
-			<div class="space-y-1">
-				<p class="text-sm font-medium leading-none">Available</p>
-				<p class="text-muted-foreground text-sm">Only mentions and comments.</p>
-			</div>
-		</div>
-		<div
-			class="hover:bg-accent hover:text-accent-foreground flex items-center space-x-4 rounded-md p-2"
-		>
-			<BellOffIcon class="size-5" />
-			<div class="space-y-1">
-				<p class="text-sm font-medium leading-none">Ignoring</p>
-				<p class="text-muted-foreground text-sm">Turn off all notifications.</p>
-			</div>
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/payment-method.svelte b/v4/src/lib/registry/examples/cards/payment-method.svelte
deleted file mode 100644
index 4ca84e86b0..0000000000
--- a/v4/src/lib/registry/examples/cards/payment-method.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import * as Icon from "$lib/components/docs/icons/index.js";
-	import { Label } from "$lib/registry/ui/label/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-	import * as RadioGroup from "$lib/registry/ui/radio-group/index.js";
-	import * as Select from "$lib/registry/ui/select/index.js";
-
-	const months = [
-		{
-			label: "January",
-			value: "1",
-		},
-		{
-			label: "February",
-			value: "2",
-		},
-		{
-			label: "March",
-			value: "3",
-		},
-		{
-			label: "April",
-			value: "4",
-		},
-		{
-			label: "May",
-			value: "5",
-		},
-		{
-			label: "June",
-			value: "6",
-		},
-		{
-			label: "July",
-			value: "7",
-		},
-		{
-			label: "August",
-			value: "8",
-		},
-		{
-			label: "September",
-			value: "9",
-		},
-		{
-			label: "October",
-			value: "10",
-		},
-		{
-			label: "November",
-			value: "11",
-		},
-		{
-			label: "December",
-			value: "12",
-		},
-	];
-
-	let month = $state("");
-	let monthLabel = $derived(months.find((m) => m.value === month)?.label ?? "Month");
-	let year = $state("");
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Payment Method</Card.Title>
-		<Card.Description>Add a new payment method to your account.</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-6">
-		<RadioGroup.Root value="card" class="grid grid-cols-3 gap-4">
-			<Label
-				for="card"
-				class="border-muted hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-			>
-				<RadioGroup.Item value="card" id="card" class="sr-only" aria-label="Card" />
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					class="mb-3 size-6"
-				>
-					<rect width="20" height="14" x="2" y="5" rx="2" />
-					<path d="M2 10h20" />
-				</svg>
-				Card
-			</Label>
-			<Label
-				for="paypal"
-				class="border-muted hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-			>
-				<RadioGroup.Item value="paypal" id="paypal" class="sr-only" aria-label="Paypal" />
-				<Icon.PayPal class="mb-3 size-6" />
-				Paypal
-			</Label>
-			<Label
-				for="apple"
-				class="border-muted hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 bg-transparent p-4"
-			>
-				<RadioGroup.Item value="apple" id="apple" class="sr-only" aria-label="Apple" />
-				<Icon.Apple class="mb-3 size-6" />
-				Apple
-			</Label>
-		</RadioGroup.Root>
-		<div class="grid gap-2">
-			<Label for="name">Name</Label>
-			<Input id="name" placeholder="First Last" />
-		</div>
-		<div class="grid gap-2">
-			<Label for="city">City</Label>
-			<Input id="city" placeholder="" />
-		</div>
-		<div class="grid gap-2">
-			<Label for="number">Card number</Label>
-			<Input id="number" placeholder="" />
-		</div>
-		<div class="grid grid-cols-3 gap-4">
-			<div class="grid gap-2">
-				<Label for="month">Expires</Label>
-				<Select.Root bind:value={month} type="single">
-					<Select.Trigger id="month" aria-label="Month">
-						{monthLabel}
-					</Select.Trigger>
-					<Select.Content>
-						{#each months as { value, label } (value)}
-							<Select.Item {value} {label} />
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="grid gap-2">
-				<Label for="year">Year</Label>
-				<Select.Root type="single" bind:value={year}>
-					<Select.Trigger id="year" aria-label="Year">
-						{year ?? "Year"}
-					</Select.Trigger>
-					<Select.Content>
-						{#each { length: 10 } as _, i (i)}
-							<Select.Item
-								value={`${new Date().getFullYear() + i}`}
-								label={`${new Date().getFullYear() + i}`}
-							/>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="grid gap-2">
-				<Label for="cvc">CVC</Label>
-				<Input id="cvc" placeholder="CVC" />
-			</div>
-		</div>
-	</Card.Content>
-	<Card.Footer>
-		<Button class="w-full">Continue</Button>
-	</Card.Footer>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/report-issue.svelte b/v4/src/lib/registry/examples/cards/report-issue.svelte
deleted file mode 100644
index 0a1281f22c..0000000000
--- a/v4/src/lib/registry/examples/cards/report-issue.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { useId } from "bits-ui";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import * as Select from "$lib/registry/ui/select/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-	import { Label } from "$lib/registry/ui/label/index.js";
-	import { Textarea } from "$lib/registry/ui/textarea/index.js";
-
-	const areas = [
-		{
-			value: "team",
-			label: "Team",
-		},
-		{
-			value: "billing",
-			label: "Billing",
-		},
-		{
-			value: "account",
-			label: "Account",
-		},
-		{
-			value: "deployments",
-			label: "Deployments",
-		},
-		{
-			value: "support",
-			label: "Support",
-		},
-	];
-
-	const securityLevels = [
-		{
-			value: "1",
-			label: "Severity 1 (Highest)",
-		},
-		{
-			value: "2",
-			label: "Severity 2",
-		},
-		{
-			value: "3",
-			label: "Severity 3",
-		},
-		{
-			value: "4",
-			label: "Severity 4 (Lowest)",
-		},
-	];
-
-	const id = useId("report-issue");
-	let securityLevel = $state(securityLevels[1].value);
-	const securityLevelLabel = $derived(
-		securityLevels.find((l) => l.value === securityLevel)?.label ?? "Select level"
-	);
-	let area = $state(areas[1].value);
-	const areaLabel = $derived(areas.find((a) => a.value === area)?.label ?? "Select");
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Report an issue</Card.Title>
-		<Card.Description>What area are you having problems with?</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-6">
-		<div class="grid gap-4 sm:grid-cols-2">
-			<div class="grid gap-2">
-				<Label for="aria-{id}">Area</Label>
-				<Select.Root type="single" bind:value={area}>
-					<Select.Trigger id="aria-{id}">
-						{areaLabel}
-					</Select.Trigger>
-					<Select.Content>
-						{#each areas as { value, label } (value)}
-							<Select.Item {value} {label} />
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="grid gap-2">
-				<Label for="security-level-{id}">Security Level</Label>
-				<Select.Root type="single" bind:value={securityLevel}>
-					<Select.Trigger id="security-level-{id}" class="w-full truncate">
-						{securityLevelLabel}
-					</Select.Trigger>
-					<Select.Content>
-						{#each securityLevels as { value, label } (value)}
-							<Select.Item {value} {label} />
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-		</div>
-		<div class="grid gap-2">
-			<Label for="subject-{id}">Subject</Label>
-			<Input id="subject-{id}" name="subject-{id}" placeholder="I need help with..." />
-		</div>
-		<div class="grid gap-2">
-			<Label for="description-{id}">Description</Label>
-			<Textarea
-				id="description-{id}"
-				name="description-{id}"
-				placeholder="Please include all information relevant to your issue."
-			/>
-		</div>
-	</Card.Content>
-	<Card.Footer class="justify-between space-x-2">
-		<Button variant="ghost">Cancel</Button>
-		<Button>Submit</Button>
-	</Card.Footer>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/share.svelte b/v4/src/lib/registry/examples/cards/share.svelte
deleted file mode 100644
index a2e37b0a31..0000000000
--- a/v4/src/lib/registry/examples/cards/share.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import * as Avatar from "$lib/registry/ui/avatar/index.js";
-	import { Button } from "$lib/registry/ui/button/index.js";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Input } from "$lib/registry/ui/input/index.js";
-	import * as Select from "$lib/registry/ui/select/index.js";
-	import { Separator } from "$lib/registry/ui/separator/index.js";
-
-	const permissions = [
-		{
-			value: "view",
-			label: "Can view",
-		},
-		{
-			value: "edit",
-			label: "Can edit",
-		},
-	];
-
-	const people = [
-		{
-			name: "Olivia Martin",
-			email: "m@example.com",
-			avatar: "/avatars/03.png",
-			permission: permissions[1],
-		},
-		{
-			name: "Isabella Nguyen",
-			email: "b@example.com",
-			avatar: "/avatars/05.png",
-			permission: permissions[0],
-		},
-		{
-			name: "Sofia Davis",
-			email: "p@example.com",
-			avatar: "/avatars/01.png",
-			permission: permissions[0],
-		},
-	];
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Share this document</Card.Title>
-		<Card.Description>Anyone with the link can view this document.</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<div class="flex space-x-2">
-			<Input value="http://example.com/link/to/document" readonly />
-			<Button variant="secondary" class="shrink-0">Copy Link</Button>
-		</div>
-		<Separator class="my-4" />
-		<div class="space-y-4">
-			<h4 class="text-sm font-medium">People with access</h4>
-			<div class="grid gap-6">
-				{#each people as person (person.email)}
-					{@const name = person.name.split(" ")}
-					<div class="flex items-center justify-between space-x-4">
-						<div class="flex items-center space-x-4">
-							<Avatar.Root>
-								<Avatar.Image src={person.avatar} />
-								<Avatar.Fallback>{name[0][0] + name[1][0]}</Avatar.Fallback>
-							</Avatar.Root>
-							<div>
-								<p class="text-sm font-medium leading-none">
-									{person.name}
-								</p>
-								<p class="text-muted-foreground text-sm">
-									{person.email}
-								</p>
-							</div>
-						</div>
-						<Select.Root type="single" value={person.permission.value}>
-							<Select.Trigger class="ml-auto w-[110px]">
-								{person.permission.label}
-							</Select.Trigger>
-							<Select.Content>
-								{#each permissions as { value, label } (value)}
-									<Select.Item {value} {label} />
-								{/each}
-							</Select.Content>
-						</Select.Root>
-					</div>
-				{/each}
-			</div>
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/cards/stats.svelte b/v4/src/lib/registry/examples/cards/stats.svelte
deleted file mode 100644
index 126b3f21ee..0000000000
--- a/v4/src/lib/registry/examples/cards/stats.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { Revenue, Subscription } from "$lib/components/docs/charts/index.js";
-</script>
-
-<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
-	<Card.Root>
-		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-			<Card.Title class="text-base font-normal">Total Revenue</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<div class="text-2xl font-bold">$15,231.89</div>
-			<p class="text-muted-foreground text-xs">+20.1% from last month</p>
-			<div class="h-[80px]">
-				<Revenue />
-			</div>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-			<Card.Title class="text-base font-normal">Subscriptions</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<div class="text-2xl font-bold">+2350</div>
-			<p class="text-muted-foreground text-xs">+180.1% from last month</p>
-			<div class="mt-4 h-[80px]">
-				<Subscription />
-			</div>
-		</Card.Content>
-	</Card.Root>
-</div>
diff --git a/v4/src/lib/registry/examples/cards/team-members.svelte b/v4/src/lib/registry/examples/cards/team-members.svelte
deleted file mode 100644
index 19fd4bb117..0000000000
--- a/v4/src/lib/registry/examples/cards/team-members.svelte
+++ /dev/null
@@ -1,203 +0,0 @@
-<script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import * as Avatar from "$lib/registry/ui/avatar/index.js";
-	import * as Popover from "$lib/registry/ui/popover/index.js";
-	import * as Command from "$lib/registry/ui/command/index.js";
-	import { buttonVariants } from "$lib/registry/ui/button/index.js";
-</script>
-
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Team Members</Card.Title>
-		<Card.Description>Invite your team members to collaborate.</Card.Description>
-	</Card.Header>
-	<Card.Content class="grid gap-6">
-		<div class="flex items-center justify-between space-x-4">
-			<div class="flex items-center space-x-4">
-				<Avatar.Root class="size-8">
-					<Avatar.Image src="/avatars/01.png" alt="Image" />
-					<Avatar.Fallback>OM</Avatar.Fallback>
-				</Avatar.Root>
-				<div>
-					<p class="text-sm font-medium leading-none">Sofia Davis</p>
-					<p class="text-muted-foreground text-sm">m@example.com</p>
-				</div>
-			</div>
-			<Popover.Root>
-				<Popover.Trigger
-					class={buttonVariants({ variant: "outline", size: "sm", class: "ml-auto" })}
-				>
-					Owner
-					<ChevronDownIcon class="text-muted-foreground ml-2 size-4" />
-				</Popover.Trigger>
-				<Popover.Content class="p-0" align="end">
-					<Command.Root>
-						<Command.Input placeholder="Select new role..." />
-						<Command.List>
-							<Command.Empty>No roles found.</Command.Empty>
-							<Command.Group>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Viewer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view and comment.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Developer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and edit.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Billing</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and manage billing.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Owner</p>
-									<p class="text-muted-foreground text-sm">
-										Admin-level access to all resources.
-									</p>
-								</Command.Item>
-							</Command.Group>
-						</Command.List>
-					</Command.Root>
-				</Popover.Content>
-			</Popover.Root>
-		</div>
-		<div class="flex items-center justify-between space-x-4">
-			<div class="flex items-center space-x-4">
-				<Avatar.Root class="size-8">
-					<Avatar.Image src="/avatars/02.png" alt="Image" />
-					<Avatar.Fallback>JL</Avatar.Fallback>
-				</Avatar.Root>
-				<div>
-					<p class="text-sm font-medium leading-none">Jackson Lee</p>
-					<p class="text-muted-foreground text-sm">p@example.com</p>
-				</div>
-			</div>
-			<Popover.Root>
-				<Popover.Trigger
-					class={buttonVariants({ variant: "outline", size: "sm", class: "ml-auto" })}
-				>
-					Member
-					<ChevronDownIcon class="text-muted-foreground ml-2 size-4" />
-				</Popover.Trigger>
-				<Popover.Content class="p-0" align="end">
-					<Command.Root>
-						<Command.Input placeholder="Select new role..." />
-						<Command.List>
-							<Command.Empty>No roles found.</Command.Empty>
-							<Command.Group class="p-1.5">
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Viewer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view and comment.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Developer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and edit.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Billing</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and manage billing.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Owner</p>
-									<p class="text-muted-foreground text-sm">
-										Admin-level access to all resources.
-									</p>
-								</Command.Item>
-							</Command.Group>
-						</Command.List>
-					</Command.Root>
-				</Popover.Content>
-			</Popover.Root>
-		</div>
-		<div class="flex items-center justify-between space-x-4">
-			<div class="flex items-center space-x-4">
-				<Avatar.Root class="size-8">
-					<Avatar.Image src="/avatars/03.png" alt="Image" />
-					<Avatar.Fallback>IN</Avatar.Fallback>
-				</Avatar.Root>
-				<div>
-					<p class="text-sm font-medium leading-none">Isabella Nguyen</p>
-					<p class="text-muted-foreground text-sm">i@example.com</p>
-				</div>
-			</div>
-			<Popover.Root>
-				<Popover.Trigger
-					class={buttonVariants({ variant: "outline", size: "sm", class: "ml-auto" })}
-				>
-					Member
-					<ChevronDownIcon class="text-muted-foreground ml-2 size-4" />
-				</Popover.Trigger>
-				<Popover.Content class="p-0" align="end">
-					<Command.Root>
-						<Command.Input placeholder="Select new role..." />
-						<Command.List>
-							<Command.Empty>No roles found.</Command.Empty>
-							<Command.Group class="p-1.5">
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Viewer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view and comment.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Developer</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and edit.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Billing</p>
-									<p class="text-muted-foreground text-sm">
-										Can view, comment and manage billing.
-									</p>
-								</Command.Item>
-								<Command.Item
-									class="teamaspace-y-1 flex flex-col items-start px-4 py-2"
-								>
-									<p>Owner</p>
-									<p class="text-muted-foreground text-sm">
-										Admin-level access to all resources.
-									</p>
-								</Command.Item>
-							</Command.Group>
-						</Command.List>
-					</Command.Root>
-				</Popover.Content>
-			</Popover.Root>
-		</div>
-	</Card.Content>
-</Card.Root>
diff --git a/v4/src/lib/registry/examples/scroll-area-horizontal.svelte b/v4/src/lib/registry/examples/scroll-area-horizontal.svelte
index acd2077102..279710e97c 100644
--- a/v4/src/lib/registry/examples/scroll-area-horizontal.svelte
+++ b/v4/src/lib/registry/examples/scroll-area-horizontal.svelte
@@ -29,7 +29,7 @@
 				<div class="overflow-hidden rounded-md">
 					<img
 						src={artwork.art}
-						alt={`Photo by ${artwork.artist}`}
+						alt="Photo by {artwork.artist}"
 						class="aspect-[3/4] h-fit w-fit object-cover"
 						width={300}
 						height={400}
diff --git a/v4/src/lib/registry/ui/progress/progress.svelte b/v4/src/lib/registry/ui/progress/progress.svelte
index 9642c96cb6..64992f1caf 100644
--- a/v4/src/lib/registry/ui/progress/progress.svelte
+++ b/v4/src/lib/registry/ui/progress/progress.svelte
@@ -22,6 +22,6 @@
 	<div
 		data-slot="progress-indicator"
 		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>
diff --git a/v4/src/lib/registry/ui/sidebar/context.svelte.ts b/v4/src/lib/registry/ui/sidebar/context.svelte.ts
index 6afd80fb50..3000c1532e 100644
--- a/v4/src/lib/registry/ui/sidebar/context.svelte.ts
+++ b/v4/src/lib/registry/ui/sidebar/context.svelte.ts
@@ -1,5 +1,5 @@
 import { IsMobile } from "$lib/registry/hooks/is-mobile.svelte.js";
-import { getContext, setContext } from "svelte";
+import { getContext, hasContext, setContext } from "svelte";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
 
 type Getter<T> = () => T;
@@ -34,13 +34,17 @@ class SidebarState {
 		this.props = props;
 	}
 
-	// Convenience getter for checking if the sidebar is mobile
-	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	/**
+	 * Whether the sidebar is currently mobile
+	 */
 	get isMobile() {
 		return this.#isMobile.current;
 	}
 
-	// Event handler to apply to the `<svelte:window>`
+	/**
+	 * An event handler to apply to an element that should trigger the sidebar
+	 * to toggle when the keyboard shortcut is pressed.
+	 */
 	handleShortcutKeydown = (e: KeyboardEvent) => {
 		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
 			e.preventDefault();
@@ -72,10 +76,35 @@ export function setSidebar(props: SidebarStateProps): SidebarState {
 }
 
 /**
- * Retrieves the `SidebarState` instance from the context. This is a class instance,
- * so you cannot destructure it.
+ * Retrieves the `SidebarState` instance from the context, meaning it must be called
+ * during the component lifecycle, and cannot be called programatically after the
+ * component has been mounted.
+ *
+ * This is a class instance, so you cannot destructure it.
+ *
+ * The component calling this function must be a descendant of the `Sidebar.Provider` component.
+ *
+ * @example
+ * ```svelte
+ * <Sidebar.Provider>
+ * <!--
+ *  I can call useSidebar() in this component, because it's a descendant of Sidebar.Provider
+ * -->
+ * 	<SomeComponent />
+ * </Sidebar.Provider>
+ *
+ * <!--
+ * I cannot call useSidebar() in this component, because it's not a descendant of Sidebar.Provider
+ * -->
+ * <SomeComponent />
+ * ```
+ *
  * @returns The `SidebarState` instance.
  */
 export function useSidebar(): SidebarState {
+	if (!hasContext(Symbol.for(SYMBOL_KEY))) {
+		throw new Error("useSidebar() must be called within a Sidebar.Provider component");
+	}
+
 	return getContext(Symbol.for(SYMBOL_KEY));
 }