diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/Navigation.svelte
index 24a37f3517f8..c66e745f6df7 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/Navigation.svelte
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/Navigation.svelte
@@ -1,37 +1,44 @@
 <script>
-	import { goto, invalidate, invalidateAll, afterNavigate, replaceState, pushState } from '$app/navigation';
+  import {
+    goto,
+    invalidate,
+    invalidateAll,
+    afterNavigate,
+    replaceState,
+    pushState,
+  } from '$app/navigation';
 
-	export let afterNavigateFn;
+  const { afterNavigateFn } = $props();
 
-	afterNavigate(afterNavigateFn);
+  afterNavigate(afterNavigateFn);
 </script>
 
 <button
-	on:click={() => {
-		goto('/storybook-goto');
-	}}>goto</button
+  on:click={() => {
+    goto('/storybook-goto');
+  }}>goto</button
 >
 
 <button
-	on:click={() => {
-		invalidate('/storybook-invalidate');
-	}}>invalidate</button
+  on:click={() => {
+    invalidate('/storybook-invalidate');
+  }}>invalidate</button
 >
 
 <button
-	on:click={() => {
-		invalidateAll();
-	}}>invalidateAll</button
+  on:click={() => {
+    invalidateAll();
+  }}>invalidateAll</button
 >
 
 <button
-	on:click={() => {
-		pushState('/storybook-push-state', {});
-	}}>pushState</button
+  on:click={() => {
+    pushState('/storybook-push-state', {});
+  }}>pushState</button
 >
 
 <button
-	on:click={() => {
-		replaceState('/storybook-replace-state', {});
-	}}>replaceState</button
+  on:click={() => {
+    replaceState('/storybook-replace-state', {});
+  }}>replaceState</button
 >