diff --git a/lib/cli/src/frameworks/svelte/Button.stories.js b/lib/cli/src/frameworks/svelte/Button.stories.js
new file mode 100644
index 00000000000..d700639dba2
--- /dev/null
+++ b/lib/cli/src/frameworks/svelte/Button.stories.js
@@ -0,0 +1,51 @@
+import Button from './Button.svelte';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    label: { control: 'text' },
+    onClick: { action: 'onClick' },
+    primary: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+const Template = (args) => ({
+  Component: Button,
+  props: args,
+  on: {
+    click: args.onClick,
+  },
+});
+
+// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};
diff --git a/lib/cli/src/frameworks/svelte/Button.stories.svelte b/lib/cli/src/frameworks/svelte/Button.stories.svelte
deleted file mode 100644
index 046635b93fd..00000000000
--- a/lib/cli/src/frameworks/svelte/Button.stories.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Button from "./Button.svelte";
-</script>
-
-<!-- More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -->
-<!-- More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes -->
-<Meta
-  title="Example/Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: { control: "color" },
-    label: { control: "text" },
-    onClick: { action: "onClick" },
-    primary: { control: "boolean" },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  }}
-/>
-
-<!-- More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args -->
-<Template let:args>
-  <Button {...args} on:click={args.onClick} />
-</Template>
-
-<!-- More on args: https://storybook.js.org/docs/svelte/writing-stories/args -->
-<Story
-  name="Primary"
-  args={{
-    primary: true,
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Secondary"
-  args={{
-    label: "Button",
-  }}
-/>
-<Story
-  name="Large"
-  args={{
-    size: "large",
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Small"
-  args={{
-    size: "small",
-    label: "Button",
-  }}
-/>
diff --git a/lib/cli/src/frameworks/svelte/Header.stories.js b/lib/cli/src/frameworks/svelte/Header.stories.js
new file mode 100644
index 00000000000..41497d78558
--- /dev/null
+++ b/lib/cli/src/frameworks/svelte/Header.stories.js
@@ -0,0 +1,29 @@
+import Header from './Header.svelte';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  argTypes: {
+    onLogin: { action: 'onLogin' },
+    onLogout: { action: 'onLogout' },
+    onCreateAccount: { action: 'onCreateAccount' },
+  },
+};
+
+const Template = (args) => ({
+  Component: Header,
+  props: args,
+  on: {
+    login: args.onLogin,
+    logout: args.onLogout,
+    createAccount: args.onCreateAccount,
+  },
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
diff --git a/lib/cli/src/frameworks/svelte/Header.stories.svelte b/lib/cli/src/frameworks/svelte/Header.stories.svelte
deleted file mode 100644
index edd67627b1f..00000000000
--- a/lib/cli/src/frameworks/svelte/Header.stories.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Header from "./Header.svelte";
-</script>
-
-<Meta
-  title="Example/Header"
-  component={Header}
-  argTypes={{
-    onLogin: { action: "onLogin" },
-    onLogout: { action: "onLogout" },
-    onCreateAccount: { action: "onCreateAccount" },
-  }}
-/>
-
-<Template let:args>
-  <Header
-    {...args}
-    on:login={args.onLogin}
-    on:logout={args.onLogout}
-    on:createAccount={args.onCreateAccount}
-  />
-</Template>
-
-<Story
-  name="LoggedIn"
-  args={{
-    user: {},
-  }}
-/>
-
-<Story name="LoggedOut" args={{}} />
diff --git a/lib/cli/src/frameworks/svelte/Page.stories.js b/lib/cli/src/frameworks/svelte/Page.stories.js
new file mode 100644
index 00000000000..809c66be70c
--- /dev/null
+++ b/lib/cli/src/frameworks/svelte/Page.stories.js
@@ -0,0 +1,29 @@
+import Page from './Page.svelte';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  argTypes: {
+    onLogin: { action: 'onLogin' },
+    onLogout: { action: 'onLogout' },
+    onCreateAccount: { action: 'onCreateAccount' },
+  },
+};
+
+const Template = (args) => ({
+  Component: Page,
+  props: args,
+  on: {
+    login: args.onLogin,
+    logout: args.onLogout,
+    createAccount: args.onCreateAccount,
+  },
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
diff --git a/lib/cli/src/frameworks/svelte/Page.stories.svelte b/lib/cli/src/frameworks/svelte/Page.stories.svelte
deleted file mode 100644
index 336a64ac62e..00000000000
--- a/lib/cli/src/frameworks/svelte/Page.stories.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Page from "./Page.svelte";
-</script>
-
-<Meta
-  title="Example/Page"
-  component={Page}
-  argTypes={{
-    onLogin: { action: "onLogin" },
-    onLogout: { action: "onLogout" },
-    onCreateAccount: { action: "onCreateAccount" },
-  }}
-/>
-
-<Template let:args>
-  <Page
-    {...args}
-    on:login={args.onLogin}
-    on:logout={args.onLogout}
-    on:createAccount={args.onCreateAccount}
-  />
-</Template>
-
-<Story
-  name="LoggedIn"
-  args={{
-    user: {},
-  }}
-/>
-
-<Story name="LoggedOut" args={{}} />
diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
index f4f380870f4..a5b5c9c0879 100644
--- a/lib/cli/src/generators/SVELTE/index.ts
+++ b/lib/cli/src/generators/SVELTE/index.ts
@@ -35,7 +35,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
 
   await baseGenerator(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
-    extraAddons: ['@storybook/addon-svelte-csf'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
     extraMain,
     commonJs,