diff --git a/package-lock.json b/package-lock.json
index 42e40fbe..fbbd5b1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "zkapp-cli",
-  "version": "0.21.7",
+  "version": "0.21.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "zkapp-cli",
-      "version": "0.21.7",
+      "version": "0.21.8",
       "license": "Apache-2.0",
       "dependencies": {
         "acorn": "^8.12.1",
diff --git a/package.json b/package.json
index cecd704e..c98b5eb8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkapp-cli",
-  "version": "0.21.7",
+  "version": "0.21.8",
   "description": "CLI to create zkApps (zero-knowledge apps) for Mina Protocol",
   "homepage": "https://github.com/o1-labs/zkapp-cli/",
   "repository": {
diff --git a/src/lib/project.js b/src/lib/project.js
index c7683b0d..b8cf9645 100644
--- a/src/lib/project.js
+++ b/src/lib/project.js
@@ -7,8 +7,8 @@ import url from 'node:url';
 import util from 'node:util';
 import ora from 'ora';
 import shell from 'shelljs';
-import customNextPage from '../lib/ui/next/customNextPage.js';
 import customNextLayout from '../lib/ui/next/customNextLayout.js';
+import customNextPage from '../lib/ui/next/customNextPage.js';
 import customNuxtIndex from '../lib/ui/nuxt/customNuxtIndex.js';
 import nuxtGradientBackground from '../lib/ui/nuxt/nuxtGradientBackground.js';
 import customLayoutSvelte from '../lib/ui/svelte/customLayoutSvelte.js';
@@ -175,8 +175,7 @@ async function project({ name, ui }) {
 }
 
 function scaffoldSvelte() {
-  // `-y` installs the latest version of create-svelte without prompting.
-  spawnSync('npm', ['create', 'svelte@latest', '-y', 'ui'], {
+  spawnSync('npx', ['sv', 'create', 'ui'], {
     stdio: 'inherit',
     shell: true,
   });
diff --git a/src/lib/ui/svelte/customLayoutSvelte.js b/src/lib/ui/svelte/customLayoutSvelte.js
index 6780946b..15eae417 100644
--- a/src/lib/ui/svelte/customLayoutSvelte.js
+++ b/src/lib/ui/svelte/customLayoutSvelte.js
@@ -1,6 +1,13 @@
 export default `
 <script>
   import '../styles/globals.css'
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
 </script>
-<slot/>
+{@render children?.()}
 `;
diff --git a/src/lib/ui/svelte/gradientBackground.js b/src/lib/ui/svelte/gradientBackground.js
index 396fba9a..9bca7dab 100644
--- a/src/lib/ui/svelte/gradientBackground.js
+++ b/src/lib/ui/svelte/gradientBackground.js
@@ -1,6 +1,13 @@
 export default `
 <script>
   import { onMount } from 'svelte'
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
   let ctx
   let pixels = []
   let canvas
@@ -131,9 +138,9 @@ export default `
 </style>
 
 <div class="background">
-  <canvas class="background-gradients" width="6" height="6" />
+  <canvas class="background-gradients" width="6" height="6"></canvas>
 </div>
 <div class="container">
-  <slot />
+  {@render children?.()}
 </div>
 `;