diff --git a/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte b/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
index 163c33195a9..4eed88756a4 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/+layout.svelte
@@ -2,14 +2,12 @@
 <script lang="ts">
 	import '../styles.css'
 	import { invalidate } from '$app/navigation'
-	import { createRender } from 'svelte'
+	import { $state, $effect, $props } from 'svelte/internal'
 
-	export let data
+	let { data } = $props()
 	let { supabase, session } = data
 
-	const render = createRender()
-
-	effect(() => {
+	$effect(() => {
 		const { data: authData } = supabase.auth.onAuthStateChange((event, _session) => {
 			if (_session?.expires_at !== session?.expires_at) {
 				invalidate('supabase:auth')
diff --git a/examples/user-management/sveltekit-user-management/src/routes/+page.svelte b/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
index 8327a45ef6a..88709c52a06 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/+page.svelte
@@ -1,9 +1,10 @@
 <!-- src/routes/+page.svelte -->
 <script lang="ts">
 	import { enhance } from '$app/forms'
+	import { $state, $props } from 'svelte/internal'
 	import type { ActionData, SubmitFunction } from './$types.js'
 
-	export let form: ActionData
+	let { form } = $props<{ form: ActionData }>()
 	let $loading = $state(false)
 
 	const handleSubmit: SubmitFunction = () => {
diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
index 22aa3c806d5..c27f71a9cd8 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte
@@ -1,12 +1,11 @@
 <!-- src/routes/account/+page.svelte -->
 <script lang="ts">
 	import { enhance } from '$app/forms'
+	import { $state, $props } from 'svelte/internal'
 	import type { SubmitFunction } from '@sveltejs/kit'
 	import Avatar from './Avatar.svelte'
 
-	export let data
-	export let form
-
+	let { data, form } = $props()
 	let { session, supabase, profile } = data
 
 	let $profileForm = $state<HTMLFormElement | null>(null)
diff --git a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte b/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
index 105ef407157..d582bb79f49 100644
--- a/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
+++ b/examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte
@@ -2,10 +2,13 @@
 <script lang="ts">
 	import type { SupabaseClient } from '@supabase/supabase-js'
 	import { createEventDispatcher } from 'svelte'
+	import { $state, $effect, $props } from 'svelte/internal'
 
-	export let size = 10
-	export let url = ''
-	export let supabase: SupabaseClient
+	let { size = 10, url = '', supabase } = $props<{
+		size?: number
+		url: string
+		supabase: SupabaseClient
+	}>()
 
 	let $avatarUrl = $state<string | null>(null)
 	let $uploading = $state(false)