diff --git a/e2e-projects/next/package.json b/e2e-projects/next/package.json
index f8c2ff2f91..621570a244 100644
--- a/e2e-projects/next/package.json
+++ b/e2e-projects/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cimsirp",
-  "version": "1.11.0",
+  "version": "1.11.1-dev-next-release.7",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/e2e-projects/sveltekit/package.json b/e2e-projects/sveltekit/package.json
index 338d38e493..177a4cc75a 100644
--- a/e2e-projects/sveltekit/package.json
+++ b/e2e-projects/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sveltekit",
-	"version": "1.11.0",
+	"version": "1.11.1-dev-next-release.7",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
diff --git a/package.json b/package.json
index f5efafefb0..b4fba75e8d 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "prettier:fix": "prettier --write .",
     "prettier:check": "prettier --check .",
     "test": "yarn workspaces foreach --parallel --topological-dev --verbose run test",
-    "test:e2e": "yarn cypress-setup && start-server-and-test 'npm run dev --prefix e2e-projects/cypress-next-app' http://localhost:3000 'SM_ENV=development ENABLE_SENTRY=false npm run slicemachine --prefix e2e-projects/cypress-next-app' http://localhost:9999 'cypress run'",
-    "test:e2e:dev": "yarn cypress-setup && start-server-and-test 'npm run dev --prefix e2e-projects/cypress-next-app' http://localhost:3000 'SM_ENV=staging ENABLE_SENTRY=false npm run slicemachine --prefix e2e-projects/cypress-next-app' http://localhost:9999 'cypress open'",
+    "test:e2e": "yarn cypress-setup && start-server-and-test 'npm run dev --prefix e2e-projects/cypress-next-app' http://localhost:3000 'SM_ENV=development VITE_ENABLE_SENTRY=false npm run slicemachine --prefix e2e-projects/cypress-next-app' http://localhost:9999 'cypress run'",
+    "test:e2e:dev": "yarn cypress-setup && start-server-and-test 'npm run dev --prefix e2e-projects/cypress-next-app' http://localhost:3000 'SM_ENV=staging VITE_ENABLE_SENTRY=false npm run slicemachine --prefix e2e-projects/cypress-next-app' http://localhost:9999 'cypress open'",
     "cy:open": "cypress open",
     "bump:interactive": "lerna version prerelease --preid alpha --no-push --exact",
     "bump:alpha": "lerna version prerelease --preid $npm_config_preid --no-changelog --exact --yes",
diff --git a/packages/adapter-next/package.json b/packages/adapter-next/package.json
index 9f33410247..8429a5716e 100644
--- a/packages/adapter-next/package.json
+++ b/packages/adapter-next/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-next",
-	"version": "0.3.13",
+	"version": "0.3.14-dev-next-release.7",
 	"description": "Slice Machine adapter for Next.js.",
 	"keywords": [
 		"typescript",
diff --git a/packages/adapter-next/public/CallToAction/screenshot-alignLeft.png b/packages/adapter-next/public/CallToAction/screenshot-alignLeft.png
new file mode 100644
index 0000000000..18dfd18966
Binary files /dev/null and b/packages/adapter-next/public/CallToAction/screenshot-alignLeft.png differ
diff --git a/packages/adapter-next/public/CallToAction/screenshot-default.png b/packages/adapter-next/public/CallToAction/screenshot-default.png
new file mode 100644
index 0000000000..e5c139b610
Binary files /dev/null and b/packages/adapter-next/public/CallToAction/screenshot-default.png differ
diff --git a/packages/adapter-next/src/hooks/slice-create.ts b/packages/adapter-next/src/hooks/slice-create.ts
index d0e3f27fce..3012d09d62 100644
--- a/packages/adapter-next/src/hooks/slice-create.ts
+++ b/packages/adapter-next/src/hooks/slice-create.ts
@@ -39,7 +39,9 @@ const createComponentFile = async ({
 		options,
 	});
 
-	if (isTypeScriptProject) {
+	if (data.componentContents) {
+		contents = data.componentContents;
+	} else if (isTypeScriptProject) {
 		contents = stripIndent`
 			import { Content } from "@prismicio/client";
 			import { SliceComponentProps } from "@prismicio/react";
diff --git a/packages/adapter-next/src/hooks/sliceTemplateLibrary-read.ts b/packages/adapter-next/src/hooks/sliceTemplateLibrary-read.ts
new file mode 100644
index 0000000000..a87c0c0cd8
--- /dev/null
+++ b/packages/adapter-next/src/hooks/sliceTemplateLibrary-read.ts
@@ -0,0 +1,55 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import type { SliceTemplateLibraryReadHook } from "@slicemachine/plugin-kit";
+
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+
+import * as CallToAction from "../sliceTemplates/CallToAction";
+import type { PluginOptions } from "../types";
+
+const initialTemplates = [CallToAction];
+
+export const sliceTemplateLibraryRead: SliceTemplateLibraryReadHook<
+	PluginOptions
+> = async ({ templateIDs }, { helpers, options }) => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+	const templates =
+		templateIDs && templateIDs.length
+			? initialTemplates.filter((t) => templateIDs?.includes(t.model.id))
+			: initialTemplates;
+
+	const templatesPromises = templates.map(async (t) => {
+		const { mocks, model, createComponentContents, screenshotPaths } = t;
+
+		const screenshotEntries = Object.entries(screenshotPaths);
+		const screenshotPromises = screenshotEntries.map(([key, filePath]) => {
+			return fs
+				.readFile(
+					fileURLToPath(new URL(path.join("..", filePath), import.meta.url)),
+				)
+				.then((data) => [key, data]);
+		});
+		const readScreenshots = await Promise.all(screenshotPromises);
+		const screenshots = Object.fromEntries(readScreenshots);
+
+		return {
+			mocks,
+			model,
+			createComponentContents: (model: SharedSlice) =>
+				createComponentContents(model, isTypeScriptProject),
+			screenshots,
+		};
+	});
+
+	const resolvedTemplates = await Promise.all(templatesPromises);
+
+	return {
+		templates: resolvedTemplates,
+	};
+};
diff --git a/packages/adapter-next/src/plugin.ts b/packages/adapter-next/src/plugin.ts
index 8e6df3b3ec..7604c0d4dc 100644
--- a/packages/adapter-next/src/plugin.ts
+++ b/packages/adapter-next/src/plugin.ts
@@ -29,6 +29,7 @@ import { documentationRead } from "./hooks/documentation-read";
 import { projectInit } from "./hooks/project-init";
 import { sliceCreate } from "./hooks/slice-create";
 import { sliceSimulatorSetupRead } from "./hooks/sliceSimulator-setup-read";
+import { sliceTemplateLibraryRead } from "./hooks/sliceTemplateLibrary-read";
 import { snippetRead } from "./hooks/snippet-read";
 
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
@@ -155,6 +156,12 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 			});
 		});
 
+		////////////////////////////////////////////////////////////////
+		// slice-template-library:*
+		////////////////////////////////////////////////////////////////
+
+		hook("slice-template-library:read", sliceTemplateLibraryRead);
+
 		////////////////////////////////////////////////////////////////
 		// custom-type:*
 		////////////////////////////////////////////////////////////////
diff --git a/packages/adapter-next/src/sliceTemplates/CallToAction/index.ts b/packages/adapter-next/src/sliceTemplates/CallToAction/index.ts
new file mode 100644
index 0000000000..6235dd5dc7
--- /dev/null
+++ b/packages/adapter-next/src/sliceTemplates/CallToAction/index.ts
@@ -0,0 +1,561 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
+import { pascalCase } from "../../lib/pascalCase";
+
+import { stripIndent } from "common-tags";
+
+export const mocks: SharedSliceContent[] = [
+	{
+		__TYPE__: "SharedSliceContent",
+		variation: "default",
+		primary: {
+			title: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "heading1",
+						content: {
+							text: "Collector Slices kit",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			paragraph: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "paragraph",
+						content: {
+							text: "It’s very easy to create stylish and beautiful prototypes for your future projects, both graphical and dynamic.",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			buttonLink: {
+				__TYPE__: "LinkContent",
+				value: {
+					__TYPE__: "ExternalLink",
+					url: "https://twitter.com/prismicio",
+				},
+			},
+			buttonlabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Click here",
+			},
+			image: {
+				origin: {
+					id: "9aOswReDKPo",
+					url: "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwxOXx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+					width: 8040,
+					height: 6024,
+				},
+				url: "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwxOXx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+				width: 8040,
+				height: 6024,
+				edit: {
+					background: "transparent",
+					zoom: 1,
+					crop: {
+						x: 0,
+						y: 0,
+					},
+				},
+				credits: null,
+				alt: "Example Image",
+				__TYPE__: "ImageContent",
+				thumbnails: {},
+			},
+			buttonLabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Learn more",
+			},
+		},
+		items: [],
+	},
+	{
+		__TYPE__: "SharedSliceContent",
+		variation: "alignLeft",
+		primary: {
+			image: {
+				origin: {
+					id: "euqiHwS38Rw",
+					url: "https://images.unsplash.com/photo-1595475207225-428b62bda831?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMHx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+					width: 2500,
+					height: 2500,
+				},
+				url: "https://images.unsplash.com/photo-1595475207225-428b62bda831?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMHx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+				width: 2500,
+				height: 2500,
+				edit: {
+					background: "transparent",
+					zoom: 1,
+					crop: {
+						x: 0,
+						y: 0,
+					},
+				},
+				credits: null,
+				alt: "Example Image",
+				__TYPE__: "ImageContent",
+				thumbnails: {},
+			},
+			title: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "heading1",
+						content: {
+							text: "Collector Slices kit",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			paragraph: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "paragraph",
+						content: {
+							text: "It’s very easy to create stylish and beautiful prototypes for your future projects, both graphical and dynamic.",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			buttonLink: {
+				__TYPE__: "LinkContent",
+				value: {
+					__TYPE__: "ExternalLink",
+					url: "https://prismic.io",
+				},
+			},
+			buttonLabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Learn more!",
+			},
+		},
+		items: [
+			{
+				__TYPE__: "GroupItemContent",
+				value: [],
+			},
+		],
+	},
+];
+
+export const createComponentContents = (
+	model: SharedSlice,
+	isTypeScriptProject: boolean,
+): string => {
+	const pascalName = pascalCase(model.name);
+
+	if (isTypeScriptProject) {
+		return stripIndent`
+			import { Content, isFilled } from "@prismicio/client";	
+			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+			import {
+				PrismicRichText,
+				PrismicText,
+				SliceComponentProps
+			} from "@prismicio/react";
+			
+			/**
+			 * Props for \`${pascalName}\`.
+			 */
+			export type ${pascalName}Props = SliceComponentProps<Content.${pascalName}Slice>;
+			
+			/**
+			 * Component for "${model.name}" Slices.
+			 */
+			const ${pascalName} = ({ slice }: ${pascalName}Props): JSX.Element => {
+				const alignment = slice.variation === "alignLeft" ? "left" : "center";
+			
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+						className="es-bounded es-call-to-action"
+					>
+						<div className="es-bounded__content es-call-to-action__content">
+							{isFilled.image(slice.primary.image) && (
+								<PrismicNextImage
+									className="es-call-to-action__image"
+									field={slice.primary.image}
+								/>
+							)}
+							<div className="es-call-to-action__content">
+								{isFilled.richText(slice.primary.title) && (
+									<h2 className="es-call-to-action__content__heading">
+										<PrismicText field={slice.primary.title} />
+									</h2>
+								)}
+								{isFilled.richText(slice.primary.paragraph) && (
+									<div className="es-call-to-action__content__paragraph">
+										<PrismicRichText field={slice.primary.paragraph} />
+									</div>
+								)}
+							</div>
+							{isFilled.link(slice.primary.buttonLink) && (
+								<PrismicNextLink
+									className="es-call-to-action__button"
+									field={slice.primary.buttonLink}
+								>
+									{slice.primary.buttonLabel || "Learn more…"}
+								</PrismicNextLink>
+							)}
+						</div>
+						<style>
+							{\`
+						.es-bounded {
+							padding: 8vw 2rem;
+						}
+						
+						.es-bounded__content {
+							margin-left: auto;
+							margin-right: auto;
+						}
+						
+						@media screen and (min-width: 640px) {
+							.es-bounded__content {
+								max-width: 90%;
+							}
+						}
+						
+						@media screen and (min-width: 896px) {
+							.es-bounded__content {
+								max-width: 80%;
+							}
+						}
+						
+						@media screen and (min-width: 1280px) {
+							.es-bounded__content {
+								max-width: 75%;
+							}
+						}
+						
+						.es-call-to-action {
+							background-color: #fff;
+							color: #333;
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 2rem;
+						}
+						
+						.es-call-to-action__image {
+							max-width: 14rem;
+							height: auto;
+							width: auto;
+							justify-self: \${alignment};
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 1rem;
+							justify-items: \${alignment};
+						}
+						
+						.es-call-to-action__content__heading {
+							font-size: 2rem;
+							font-weight: 700;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__content__paragraph {
+							font-size: 1.15rem;
+							max-width: 38rem;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__button {
+							justify-self: \${alignment};
+							border-radius: 0.25rem;
+							display: inline-block;
+							font-size: 0.875rem;
+							line-height: 1.3;
+							padding: 1rem 2.625rem;
+							text-align: \${alignment};
+							transition: background-color 100ms linear;
+							background-color: #16745f;
+							color: #fff;
+						}
+						
+						.es-call-to-action__button:hover {
+							background-color: #0d5e4c;
+						}
+					\`}
+						</style>
+					</section>
+				);
+			};
+			
+			export default ${pascalName};
+		`;
+	}
+
+	return stripIndent`
+			import { isFilled } from "@prismicio/client";
+			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+			import {
+				PrismicRichText,
+				PrismicText,
+				SliceComponentProps
+			} from "@prismicio/react";
+			
+			/**
+			 * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
+			 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
+			 * @param {${pascalName}Props}
+			 */
+			const ${pascalName} = ({ slice }) => {
+				const alignment = slice.variation === "alignLeft" ? "left" : "center";
+			
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+						className="es-bounded es-call-to-action"
+					>
+						<div className="es-bounded__content es-call-to-action__content">
+							{isFilled.image(slice.primary.image) && (
+								<PrismicNextImage
+									className="es-call-to-action__image"
+									field={slice.primary.image}
+								/>
+							)}
+							<div className="es-call-to-action__content">
+								{isFilled.richText(slice.primary.title) && (
+									<h2 className="es-call-to-action__content__heading">
+										<PrismicText field={slice.primary.title} />
+									</h2>
+								)}
+								{isFilled.richText(slice.primary.paragraph) && (
+									<div className="es-call-to-action__content__paragraph">
+										<PrismicRichText field={slice.primary.paragraph} />
+									</div>
+								)}
+							</div>
+							{isFilled.link(slice.primary.buttonLink) && (
+								<PrismicNextLink
+									className="es-call-to-action__button"
+									field={slice.primary.buttonLink}
+								>
+									{slice.primary.buttonLabel || "Learn more…"}
+								</PrismicNextLink>
+							)}
+						</div>
+						<style>
+							{\`
+						.es-bounded {
+							padding: 8vw 2rem;
+						}
+						
+						.es-bounded__content {
+							margin-left: auto;
+							margin-right: auto;
+						}
+						
+						@media screen and (min-width: 640px) {
+							.es-bounded__content {
+								max-width: 90%;
+							}
+						}
+						
+						@media screen and (min-width: 896px) {
+							.es-bounded__content {
+								max-width: 80%;
+							}
+						}
+						
+						@media screen and (min-width: 1280px) {
+							.es-bounded__content {
+								max-width: 75%;
+							}
+						}
+						
+						.es-call-to-action {
+							background-color: #fff;
+							color: #333;
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 2rem;
+						}
+						
+						.es-call-to-action__image {
+							max-width: 14rem;
+							height: auto;
+							width: auto;
+							justify-self: \${alignment};
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 1rem;
+							justify-items: \${alignment};
+						}
+						
+						.es-call-to-action__content__heading {
+							font-size: 2rem;
+							font-weight: 700;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__content__paragraph {
+							font-size: 1.15rem;
+							max-width: 38rem;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__button {
+							justify-self: \${alignment};
+							border-radius: 0.25rem;
+							display: inline-block;
+							font-size: 0.875rem;
+							line-height: 1.3;
+							padding: 1rem 2.625rem;
+							text-align: \${alignment};
+							transition: background-color 100ms linear;
+							background-color: #16745f;
+							color: #fff;
+						}
+						
+						.es-call-to-action__button:hover {
+							background-color: #0d5e4c;
+						}
+					\`}
+						</style>
+					</section>
+				);
+			};
+			
+			export default ${pascalName};
+		`;
+};
+
+export const model: SharedSlice = {
+	id: "call_to_action",
+	type: "SharedSlice",
+	name: "CallToAction",
+	description: "CallToAction",
+	variations: [
+		{
+			id: "default",
+			name: "Default",
+			docURL: "...",
+			version: "initial",
+			description: "Default",
+			imageUrl: "",
+			primary: {
+				image: {
+					type: "Image",
+					config: { label: "Image", constraint: {}, thumbnails: [] },
+				},
+				title: {
+					type: "StructuredText",
+					config: {
+						label: "title",
+						placeholder: "",
+						allowTargetBlank: true,
+						single: "heading1,heading2,heading3,heading4,heading5,heading6",
+					},
+				},
+				paragraph: {
+					type: "StructuredText",
+					config: {
+						label: "paragraph",
+						placeholder: "",
+						allowTargetBlank: true,
+						single:
+							"paragraph,preformatted,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
+					},
+				},
+				buttonLink: {
+					type: "Link",
+					config: {
+						label: "buttonLink",
+						placeholder: "Redirect URL for CTA button",
+						allowTargetBlank: true,
+						select: null,
+					},
+				},
+				buttonLabel: {
+					type: "Text",
+					config: {
+						label: "buttonLabel",
+						placeholder: "Label for CTA button",
+					},
+				},
+			},
+			items: {},
+		},
+		{
+			id: "alignLeft",
+			name: "AlignLeft",
+			docURL: "...",
+			version: "initial",
+			description: "Default",
+			imageUrl: "",
+			primary: {
+				image: {
+					type: "Image",
+					config: { label: "Image", constraint: {}, thumbnails: [] },
+				},
+				title: {
+					type: "StructuredText",
+					config: {
+						label: "title",
+						placeholder: "",
+						allowTargetBlank: true,
+						single: "heading1,heading2,heading3,heading4,heading5,heading6",
+					},
+				},
+				paragraph: {
+					type: "StructuredText",
+					config: {
+						label: "paragraph",
+						placeholder: "",
+						allowTargetBlank: true,
+						single:
+							"paragraph,preformatted,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
+					},
+				},
+				buttonLink: {
+					type: "Link",
+					config: {
+						label: "buttonLink",
+						placeholder: "Redirect URL for CTA button",
+						allowTargetBlank: true,
+						select: null,
+					},
+				},
+				buttonLabel: {
+					type: "Text",
+					config: {
+						label: "buttonLabel",
+						placeholder: "Label for CTA button",
+					},
+				},
+			},
+			items: {},
+		},
+	],
+};
+
+export const screenshotPaths = {
+	default: "CallToAction/screenshot-default.png",
+	alignLeft: "CallToAction/screenshot-alignLeft.png",
+};
diff --git a/packages/adapter-next/test/plugin-slice-create.test.ts b/packages/adapter-next/test/plugin-slice-create.test.ts
index 8e2cbb3644..b74a2f6c0b 100644
--- a/packages/adapter-next/test/plugin-slice-create.test.ts
+++ b/packages/adapter-next/test/plugin-slice-create.test.ts
@@ -392,3 +392,26 @@ testGlobalContentTypes({
 		await pluginRunner.callHook("slice:create", { libraryID: "slices", model });
 	},
 });
+
+test("component file contains given contents instead of default one", async (ctx) => {
+	await ctx.pluginRunner.callHook("slice:create", {
+		libraryID: "slices",
+		model,
+		componentContents: `
+			export default function TestSliceCreate() {
+				return (
+					<div>Custom contents</div>
+				);
+			}
+		`,
+	});
+
+	const componentContents = await fs.readFile(
+		path.join(ctx.project.root, "slices", "QuxQuux", "index.js"),
+		"utf8",
+	);
+
+	expect(componentContents).toContain(
+		"export default function TestSliceCreate()",
+	);
+});
diff --git a/packages/adapter-nuxt/package.json b/packages/adapter-nuxt/package.json
index 58e0bb858e..c05588bc7b 100644
--- a/packages/adapter-nuxt/package.json
+++ b/packages/adapter-nuxt/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt",
-	"version": "0.3.13",
+	"version": "0.3.14-dev-next-release.7",
 	"description": "Slice Machine adapter for Nuxt 3.",
 	"keywords": [
 		"typescript",
diff --git a/packages/adapter-nuxt/src/hooks/project-init.ts b/packages/adapter-nuxt/src/hooks/project-init.ts
index 7ad6df1790..90bd531ae7 100644
--- a/packages/adapter-nuxt/src/hooks/project-init.ts
+++ b/packages/adapter-nuxt/src/hooks/project-init.ts
@@ -6,6 +6,8 @@ import type {
 } from "@slicemachine/plugin-kit";
 import {
 	checkHasProjectFile,
+	deleteProjectFile,
+	readProjectFile,
 	writeProjectFile,
 } from "@slicemachine/plugin-kit/fs";
 import { stripIndent } from "common-tags";
@@ -154,6 +156,60 @@ const createSliceSimulatorPage = async ({
 	});
 };
 
+const moveOrDeleteAppVue = async ({
+	helpers,
+	options,
+}: CreateSliceSimulatorPageArgs) => {
+	const srcDirectoryExists = await checkHasProjectFile({
+		filename: "src",
+		helpers,
+	});
+
+	const filenameAppVue = path.join(srcDirectoryExists ? "src" : "", "app.vue");
+
+	// If there's not `app.vue`, there's nothing to do.
+	if (!(await checkHasProjectFile({ filename: filenameAppVue, helpers }))) {
+		return;
+	}
+
+	const filecontentAppVue = await readProjectFile({
+		filename: filenameAppVue,
+		helpers,
+		encoding: "utf-8",
+	});
+
+	// We check for app.vue to contain Nuxt default welcome component to determine if we need to consider it as the default one or not.
+	if (!filecontentAppVue.includes("<NuxtWelcome")) {
+		return;
+	}
+
+	const srcPagesDirectoryExists = await checkHasProjectFile({
+		filename: "src/pages",
+		helpers,
+	});
+
+	const filenameIndexVue = path.join(
+		srcPagesDirectoryExists ? "src/pages" : "pages",
+		"index.vue",
+	);
+
+	// If we don't have an `index.vue` we create one with the content of `app.vue`
+	if (!(await checkHasProjectFile({ filename: filenameIndexVue, helpers }))) {
+		await writeProjectFile({
+			filename: filenameIndexVue,
+			contents: filecontentAppVue,
+			format: options.format,
+			helpers,
+		});
+	}
+
+	// Delete `app.vue`
+	await deleteProjectFile({
+		filename: filenameAppVue,
+		helpers,
+	});
+};
+
 const modifySliceMachineConfig = async ({
 	helpers,
 	options,
@@ -196,6 +252,7 @@ export const projectInit: ProjectInitHook<PluginOptions> = async (
 			installDependencies({ installDependencies: _installDependencies }),
 			configurePrismicModule(context),
 			createSliceSimulatorPage(context),
+			moveOrDeleteAppVue(context),
 			modifySliceMachineConfig(context),
 		]),
 	);
diff --git a/packages/adapter-nuxt/src/hooks/slice-create.ts b/packages/adapter-nuxt/src/hooks/slice-create.ts
index 3c8edbd3f7..3694d2be86 100644
--- a/packages/adapter-nuxt/src/hooks/slice-create.ts
+++ b/packages/adapter-nuxt/src/hooks/slice-create.ts
@@ -36,7 +36,9 @@ const createComponentFile = async ({
 		options,
 	});
 
-	if (isTypeScriptProject) {
+	if (data.componentContents) {
+		contents = data.componentContents;
+	} else if (isTypeScriptProject) {
 		contents = stripIndent`
 			<script setup lang="ts">
 			import { Content } from "@prismicio/client";
diff --git a/packages/adapter-nuxt/test/plugin-project-init.test.ts b/packages/adapter-nuxt/test/plugin-project-init.test.ts
index bae4c77e72..4950ea2471 100644
--- a/packages/adapter-nuxt/test/plugin-project-init.test.ts
+++ b/packages/adapter-nuxt/test/plugin-project-init.test.ts
@@ -232,6 +232,87 @@ describe("Slice Simulator page", () => {
 	});
 });
 
+describe("app.vue", () => {
+	const NUXT_DEFAULT_APP_VUE = /* html */ `<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>
+`;
+
+	test("deletes default app.vue and creates a new index page if non-existent", async (ctx) => {
+		const log = vi.fn();
+		const installDependencies = vi.fn();
+
+		const filePathAppVue = path.join(ctx.project.root, "app.vue");
+
+		await fs.mkdir(path.dirname(filePathAppVue), { recursive: true });
+		await fs.writeFile(filePathAppVue, NUXT_DEFAULT_APP_VUE);
+
+		await ctx.pluginRunner.callHook("project:init", {
+			log,
+			installDependencies,
+		});
+
+		const contents = await fs.readFile(
+			path.join(ctx.project.root, "pages", "index.vue"),
+			"utf8",
+		);
+
+		await expect(() => fs.access(filePathAppVue)).rejects.toThrowError(
+			/no such file or directory/,
+		);
+		expect(contents).toBe(NUXT_DEFAULT_APP_VUE);
+	});
+
+	test("deletes default app.vue and doesn't create a new index page if existent", async (ctx) => {
+		const log = vi.fn();
+		const installDependencies = vi.fn();
+
+		const filePathAppVue = path.join(ctx.project.root, "app.vue");
+
+		await fs.mkdir(path.dirname(filePathAppVue), { recursive: true });
+		await fs.writeFile(filePathAppVue, NUXT_DEFAULT_APP_VUE);
+
+		const filePathIndexVue = path.join(ctx.project.root, "pages", "index.vue");
+		const contents = "foo";
+
+		await fs.mkdir(path.dirname(filePathIndexVue), { recursive: true });
+		await fs.writeFile(filePathIndexVue, contents);
+
+		await ctx.pluginRunner.callHook("project:init", {
+			log,
+			installDependencies,
+		});
+
+		const postHookContents = await fs.readFile(filePathIndexVue, "utf8");
+
+		await expect(() => fs.access(filePathAppVue)).rejects.toThrowError(
+			/no such file or directory/,
+		);
+		expect(postHookContents).toBe(contents);
+	});
+
+	test("doesn't delete app.vue is it's not the default one", async (ctx) => {
+		const log = vi.fn();
+		const installDependencies = vi.fn();
+
+		const filePathAppVue = path.join(ctx.project.root, "app.vue");
+		const contents = "foo";
+
+		await fs.mkdir(path.dirname(filePathAppVue), { recursive: true });
+		await fs.writeFile(filePathAppVue, contents);
+
+		await ctx.pluginRunner.callHook("project:init", {
+			log,
+			installDependencies,
+		});
+
+		const postHookContents = await fs.readFile(filePathAppVue, "utf8");
+		expect(postHookContents).toBe(contents);
+	});
+});
+
 describe("modify slicemachine.config.json", () => {
 	test("adds default localSliceSimulatorURL", async (ctx) => {
 		const log = vi.fn();
diff --git a/packages/adapter-nuxt/test/plugin-slice-create.test.ts b/packages/adapter-nuxt/test/plugin-slice-create.test.ts
index 9118cde694..f866fafd00 100644
--- a/packages/adapter-nuxt/test/plugin-slice-create.test.ts
+++ b/packages/adapter-nuxt/test/plugin-slice-create.test.ts
@@ -243,3 +243,22 @@ testGlobalContentTypes({
 		await pluginRunner.callHook("slice:create", { libraryID: "slices", model });
 	},
 });
+
+test("component file contains given contents instead of default one", async (ctx) => {
+	await ctx.pluginRunner.callHook("slice:create", {
+		libraryID: "slices",
+		model,
+		componentContents: `
+			<template>
+				<div>TestSliceCreate</div>
+			</template>
+		`,
+	});
+
+	const componentContents = await fs.readFile(
+		path.join(ctx.project.root, "slices", "QuxQuux", "index.vue"),
+		"utf8",
+	);
+
+	expect(componentContents).toContain("<div>TestSliceCreate</div>");
+});
diff --git a/packages/adapter-nuxt2/package.json b/packages/adapter-nuxt2/package.json
index d3e45d7735..0be37a6cb8 100644
--- a/packages/adapter-nuxt2/package.json
+++ b/packages/adapter-nuxt2/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt2",
-	"version": "0.3.13",
+	"version": "0.3.14-dev-next-release.7",
 	"description": "Slice Machine adapter for Nuxt 2.",
 	"keywords": [
 		"typescript",
diff --git a/packages/adapter-nuxt2/src/hooks/slice-create.ts b/packages/adapter-nuxt2/src/hooks/slice-create.ts
index 69fa77bf0f..293da5441e 100644
--- a/packages/adapter-nuxt2/src/hooks/slice-create.ts
+++ b/packages/adapter-nuxt2/src/hooks/slice-create.ts
@@ -25,26 +25,28 @@ const createComponentFile = async ({
 	actions,
 	options,
 }: CreateComponentFileArgs) => {
-	const contents = stripIndent`
-		<template>
-			<section
-				:data-slice-type="slice.slice_type"
-				:data-slice-variation="slice.variation"
-			>
-				Placeholder component for ${data.model.id} (variation: {{ slice.variation }}) Slices
-			</section>
-		</template>
+	const contents =
+		data.componentContents ??
+		stripIndent`
+			<template>
+				<section
+					:data-slice-type="slice.slice_type"
+					:data-slice-variation="slice.variation"
+				>
+					Placeholder component for ${data.model.id} (variation: {{ slice.variation }}) Slices
+				</section>
+			</template>
 
-		<script>
-		import { getSliceComponentProps } from "@prismicio/vue/components";
+			<script>
+			import { getSliceComponentProps } from "@prismicio/vue/components";
 
-		export default {
-			// The array passed to \`getSliceComponentProps\` is purely optional.
-			// Consider it as a visual hint for you when templating your slice.
-			props: getSliceComponentProps(["slice", "index", "slices", "context"]),
-		};
-		</script>
-	`;
+			export default {
+				// The array passed to \`getSliceComponentProps\` is purely optional.
+				// Consider it as a visual hint for you when templating your slice.
+				props: getSliceComponentProps(["slice", "index", "slices", "context"]),
+			};
+			</script>
+		`;
 
 	await writeSliceFile({
 		libraryID: data.libraryID,
diff --git a/packages/adapter-nuxt2/test/plugin-slice-create.test.ts b/packages/adapter-nuxt2/test/plugin-slice-create.test.ts
index 273a04e122..3ab04d151d 100644
--- a/packages/adapter-nuxt2/test/plugin-slice-create.test.ts
+++ b/packages/adapter-nuxt2/test/plugin-slice-create.test.ts
@@ -240,3 +240,22 @@ testGlobalContentTypes({
 		await pluginRunner.callHook("slice:create", { libraryID: "slices", model });
 	},
 });
+
+test("component file contains given contents instead of default one", async (ctx) => {
+	await ctx.pluginRunner.callHook("slice:create", {
+		libraryID: "slices",
+		model,
+		componentContents: `
+			<template>
+				<div>TestSliceCreate</div>
+			</template>
+		`,
+	});
+
+	const componentContents = await fs.readFile(
+		path.join(ctx.project.root, "slices", "QuxQuux", "index.vue"),
+		"utf8",
+	);
+
+	expect(componentContents).toContain("<div>TestSliceCreate</div>");
+});
diff --git a/packages/adapter-sveltekit/package.json b/packages/adapter-sveltekit/package.json
index 1806a8a591..586695ee86 100644
--- a/packages/adapter-sveltekit/package.json
+++ b/packages/adapter-sveltekit/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-sveltekit",
-	"version": "0.3.13",
+	"version": "0.3.14-dev-next-release.7",
 	"description": "Slice Machine adapter for SvelteKit.",
 	"keywords": [
 		"typescript",
diff --git a/packages/adapter-sveltekit/src/hooks/slice-create.ts b/packages/adapter-sveltekit/src/hooks/slice-create.ts
index c545ee8179..84c83f7f81 100644
--- a/packages/adapter-sveltekit/src/hooks/slice-create.ts
+++ b/packages/adapter-sveltekit/src/hooks/slice-create.ts
@@ -36,7 +36,9 @@ const createComponentFile = async ({
 		options,
 	});
 
-	if (isTypeScriptProject) {
+	if (data.componentContents) {
+		contents = data.componentContents;
+	} else if (isTypeScriptProject) {
 		contents = source`
 			<script lang="ts">
 				import type { Content } from '@prismicio/client';
diff --git a/packages/adapter-sveltekit/test/plugin-slice-create.test.ts b/packages/adapter-sveltekit/test/plugin-slice-create.test.ts
index 085c9450e3..0881cce9dd 100644
--- a/packages/adapter-sveltekit/test/plugin-slice-create.test.ts
+++ b/packages/adapter-sveltekit/test/plugin-slice-create.test.ts
@@ -310,3 +310,20 @@ testGlobalContentTypes({
 		await pluginRunner.callHook("slice:create", { libraryID: "slices", model });
 	},
 });
+
+test("component file contains given contents instead of default one", async (ctx) => {
+	await ctx.pluginRunner.callHook("slice:create", {
+		libraryID: "slices",
+		model,
+		componentContents: `
+			<div>TestSliceCreate</div>
+		`,
+	});
+
+	const componentContents = await fs.readFile(
+		path.join(ctx.project.root, "slices", "QuxQuux", "index.svelte"),
+		"utf8",
+	);
+
+	expect(componentContents).toContain("<div>TestSliceCreate</div>");
+});
diff --git a/packages/init/package.json b/packages/init/package.json
index e47a0c0400..514cc6282d 100644
--- a/packages/init/package.json
+++ b/packages/init/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/init",
-	"version": "2.6.0",
+	"version": "2.6.1-dev-next-release.7",
 	"description": "Init Prismic Slice Machine in your project",
 	"keywords": [
 		"typescript",
diff --git a/packages/init/src/SliceMachineInitProcess.ts b/packages/init/src/SliceMachineInitProcess.ts
index 2ec605f28c..0c0e9fc5e9 100644
--- a/packages/init/src/SliceMachineInitProcess.ts
+++ b/packages/init/src/SliceMachineInitProcess.ts
@@ -36,6 +36,7 @@ import { assertExists } from "./lib/assertExists";
 import {
 	GIGET_ORGANIZATION,
 	GIGET_PROVIDER,
+	SLICE_MACHINE_INIT_USER_AGENT,
 	START_SCRIPT_KEY,
 	START_SCRIPT_VALUE,
 } from "./constants";
@@ -1122,7 +1123,10 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 								task.title = `Pushing slices... (0/${slices.length})`;
 								await Promise.all(
 									slices.map(async (slice) => {
-										await this.manager.slices.pushSlice(slice);
+										await this.manager.slices.pushSlice({
+											...slice,
+											userAgent: SLICE_MACHINE_INIT_USER_AGENT,
+										});
 										pushed++;
 										task.title = `Pushing slices... (${pushed}/${slices.length})`;
 									}),
@@ -1163,7 +1167,10 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 								task.title = `Pushing types... (0/${ids.length})`;
 								await Promise.all(
 									ids.map(async (id) => {
-										await this.manager.customTypes.pushCustomType({ id });
+										await this.manager.customTypes.pushCustomType({
+											id,
+											userAgent: SLICE_MACHINE_INIT_USER_AGENT,
+										});
 										pushed++;
 										task.title = `Pushing types... (${pushed}/${ids.length})`;
 									}),
diff --git a/packages/init/src/constants.ts b/packages/init/src/constants.ts
index 09c46eaf6a..29ade1b042 100644
--- a/packages/init/src/constants.ts
+++ b/packages/init/src/constants.ts
@@ -3,3 +3,4 @@ export const START_SCRIPT_KEY = "slicemachine";
 export const START_SCRIPT_VALUE = "start-slicemachine";
 export const GIGET_PROVIDER = "github";
 export const GIGET_ORGANIZATION = "prismicio-community";
+export const SLICE_MACHINE_INIT_USER_AGENT = "slice-machine-init";
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 3ee28a28cc..fc17004e50 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/manager",
-	"version": "0.10.0",
+	"version": "0.10.1-dev-next-release.7",
 	"description": "Manage all aspects of a Slice Machine project.",
 	"repository": {
 		"type": "git",
@@ -13,14 +13,17 @@
 	"type": "module",
 	"exports": {
 		".": {
+			"types": "./dist/index.d.ts",
 			"require": "./dist/index.cjs",
 			"import": "./dist/index.js"
 		},
 		"./client": {
+			"types": "./dist/client/index.d.js",
 			"require": "./dist/client.cjs",
 			"import": "./dist/client.js"
 		},
 		"./test": {
+			"types": "./dist/test/index.d.js",
 			"require": "./dist/test.cjs",
 			"import": "./dist/test.js"
 		},
diff --git a/packages/manager/src/managers/BaseManager.ts b/packages/manager/src/managers/BaseManager.ts
index 965572d1a1..dcdf54b416 100644
--- a/packages/manager/src/managers/BaseManager.ts
+++ b/packages/manager/src/managers/BaseManager.ts
@@ -18,6 +18,7 @@ import { SimulatorManager } from "./simulator/SimulatorManager";
 import { VersionsManager } from "./versions/VersionsManager";
 import { TelemetryManager } from "./telemetry/TelemetryManager";
 import { DocumentationManager } from "./documentation/DocumentationManager";
+import { SliceTemplateLibraryManager } from "./sliceTemplateLibrary/SliceTemplateLibraryManager";
 
 export abstract class BaseManager {
 	private _sliceMachineManager: SliceMachineManager;
@@ -85,6 +86,9 @@ export abstract class BaseManager {
 	protected get documentation(): DocumentationManager {
 		return this._sliceMachineManager.documentation;
 	}
+	protected get sliceTemplateLibrary(): SliceTemplateLibraryManager {
+		return this._sliceMachineManager.sliceTemplateLibrary;
+	}
 
 	protected get versions(): VersionsManager {
 		return this._sliceMachineManager.versions;
diff --git a/packages/manager/src/managers/SliceMachineManager.ts b/packages/manager/src/managers/SliceMachineManager.ts
index dea2760489..62e83f182d 100644
--- a/packages/manager/src/managers/SliceMachineManager.ts
+++ b/packages/manager/src/managers/SliceMachineManager.ts
@@ -40,6 +40,7 @@ import { VersionsManager } from "./versions/VersionsManager";
 import { TelemetryManager } from "./telemetry/TelemetryManager";
 import { buildPrismicRepositoryAPIEndpoint } from "../lib/buildPrismicRepositoryAPIEndpoint";
 import { DocumentationManager } from "./documentation/DocumentationManager";
+import { SliceTemplateLibraryManager } from "./sliceTemplateLibrary/SliceTemplateLibraryManager";
 
 type SliceMachineManagerGetStateReturnType = {
 	env: {
@@ -114,6 +115,7 @@ export class SliceMachineManager {
 	slices: SlicesManager;
 	snippets: SnippetsManager;
 	documentation: DocumentationManager;
+	sliceTemplateLibrary: SliceTemplateLibraryManager;
 	telemetry: TelemetryManager;
 	user: UserManager;
 	versions: VersionsManager;
@@ -138,6 +140,7 @@ export class SliceMachineManager {
 		this.screenshots = new ScreenshotsManager(this);
 		this.simulator = new SimulatorManager(this);
 		this.documentation = new DocumentationManager(this);
+		this.sliceTemplateLibrary = new SliceTemplateLibraryManager(this);
 
 		this.versions = new VersionsManager(this);
 
diff --git a/packages/manager/src/managers/createSliceMachineManagerMiddleware.ts b/packages/manager/src/managers/createSliceMachineManagerMiddleware.ts
index 0047a9f236..5c3dfa287c 100644
--- a/packages/manager/src/managers/createSliceMachineManagerMiddleware.ts
+++ b/packages/manager/src/managers/createSliceMachineManagerMiddleware.ts
@@ -37,6 +37,7 @@ const omitProcedures = defineOmits<SliceMachineManager>()([
 	"user._sliceMachineManager",
 	"versions._sliceMachineManager",
 	"documentation._sliceMachineManager",
+	"sliceTemplateLibrary._sliceMachineManager",
 	"getSliceMachinePluginRunner",
 	"getPrismicAuthManager",
 	"screenshots.browserContext",
diff --git a/packages/manager/src/managers/customTypes/CustomTypesManager.ts b/packages/manager/src/managers/customTypes/CustomTypesManager.ts
index a6aa7ee16a..489415a85a 100644
--- a/packages/manager/src/managers/customTypes/CustomTypesManager.ts
+++ b/packages/manager/src/managers/customTypes/CustomTypesManager.ts
@@ -47,6 +47,7 @@ type SliceMachineManagerReadCustomTypeReturnType = {
 
 type SliceMachineManagerPushCustomTypeArgs = {
 	id: string;
+	userAgent?: string;
 };
 
 type SliceMachineManagerReadCustomTypeMocksConfigArgs = {
@@ -234,7 +235,7 @@ export class CustomTypesManager extends BaseManager {
 				endpoint: API_ENDPOINTS.PrismicModels,
 				repositoryName: sliceMachineConfig.repositoryName,
 				token: authenticationToken,
-				userAgent: SLICE_MACHINE_USER_AGENT,
+				userAgent: args.userAgent || SLICE_MACHINE_USER_AGENT,
 				fetch,
 			});
 
diff --git a/packages/manager/src/managers/sliceTemplateLibrary/SliceTemplateLibraryManager.ts b/packages/manager/src/managers/sliceTemplateLibrary/SliceTemplateLibraryManager.ts
new file mode 100644
index 0000000000..d2863c5608
--- /dev/null
+++ b/packages/manager/src/managers/sliceTemplateLibrary/SliceTemplateLibraryManager.ts
@@ -0,0 +1,195 @@
+import * as t from "io-ts";
+import { HookError } from "@slicemachine/plugin-kit";
+import { BaseManager } from "../BaseManager";
+import { DecodeError } from "../../lib/DecodeError";
+import { assertPluginsInitialized } from "../../lib/assertPluginsInitialized";
+import { decodeHookResult } from "../../lib/decodeHookResult";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
+type SliceTemplateLibraryManagerReadLibraryReturnType = {
+	templates: {
+		model: SharedSlice;
+		screenshots: Record<string, Buffer>;
+	}[];
+	errors: (DecodeError | HookError)[];
+};
+
+type SliceTemplateLibraryManagerCreateSlicesReturnType = {
+	data?: {
+		sliceIDs: string[];
+	};
+	errors: (DecodeError | HookError)[];
+};
+
+type SliceTemplateLibraryReadLibraryData = {
+	templateIDs?: string[];
+};
+
+type SliceTemplateLibraryCreateSlicesData = SliceTemplateLibraryReadLibraryData;
+
+const readHookCodec = t.type({
+	templates: t.array(
+		t.type({
+			model: SharedSlice,
+			createComponentContents: t.Function,
+			mocks: t.array(SharedSliceContent),
+			screenshots: t.record(t.string, t.any),
+		}),
+	),
+});
+
+export class SliceTemplateLibraryManager extends BaseManager {
+	async readLibrary(
+		args: SliceTemplateLibraryReadLibraryData,
+	): Promise<SliceTemplateLibraryManagerReadLibraryReturnType> {
+		assertPluginsInitialized(this.sliceMachinePluginRunner);
+
+		const hookResult = await this.sliceMachinePluginRunner.callHook(
+			"slice-template-library:read",
+			args,
+		);
+
+		const { data, errors } = decodeHookResult(readHookCodec, hookResult);
+
+		return {
+			templates: data.flat().flatMap((item) =>
+				item.templates.map((t) => ({
+					model: t.model,
+					screenshots: t.screenshots,
+				})),
+			),
+			errors,
+		};
+	}
+	async createSlices(
+		args: SliceTemplateLibraryCreateSlicesData,
+	): Promise<SliceTemplateLibraryManagerCreateSlicesReturnType> {
+		assertPluginsInitialized(this.sliceMachinePluginRunner);
+
+		// Reading all available slice templates
+		const hookReadResult = await this.sliceMachinePluginRunner.callHook(
+			"slice-template-library:read",
+			args,
+		);
+		const { data: readData, errors: readErrors } = decodeHookResult(
+			readHookCodec,
+			hookReadResult,
+		);
+		const templates = readData.flat().flatMap((item) => item.templates);
+		if (readErrors.length > 0) {
+			return {
+				errors: readErrors,
+			};
+		}
+
+		// Extract all existing slice IDs into an array
+		const { models: allSlices, errors: readAllSlicesErrors } =
+			await this.slices.readAllSlices();
+		if (readAllSlicesErrors.length > 0) {
+			return {
+				errors: readAllSlicesErrors,
+			};
+		}
+		const existingIds: string[] = allSlices.map((slice) => slice.model.id);
+
+		// Create a function to get the next available ID based on the baseId
+		const getNextAvailableSlice = (baseId: string) => {
+			let nextId = baseId;
+			let counter = 1;
+			while (existingIds.includes(nextId)) {
+				counter++;
+				nextId = `${baseId}_${counter}`;
+			}
+			existingIds.push(nextId);
+
+			return { id: nextId, counter };
+		};
+
+		// Extract the slices to create from the template ids given in args
+		const slicesToCreate = templates.map((template) => {
+			const { id, counter } = getNextAvailableSlice(template.model.id);
+
+			return {
+				...template,
+				model: {
+					...template.model,
+					id,
+					name:
+						counter > 1 ? template.model.name + counter : template.model.name,
+				},
+			};
+		});
+
+		// Get target library
+		// Note: We only support adding template to the first library at the moment
+		const { libraries, errors: readAllSliceLibrariesErrors } =
+			await this.slices.readAllSliceLibraries();
+		if (readAllSliceLibrariesErrors.length > 0) {
+			return {
+				errors: readAllSliceLibrariesErrors,
+			};
+		}
+		const targetLibrary = libraries[0];
+
+		// Initiate the slice creation process for all slices
+		const creationPromises = slicesToCreate.map((slice) => {
+			return this.slices.createSlice({
+				libraryID: targetLibrary.libraryID,
+				model: slice.model,
+				componentContents: slice.createComponentContents(slice.model),
+			});
+		});
+
+		// Wait for all slices to be created
+		const creationResults = await Promise.all(creationPromises);
+		// Check for any errors in the creation results
+		const creationErrors = creationResults.flatMap((result) => result.errors);
+		if (creationErrors.length > 0) {
+			return {
+				errors: creationErrors,
+			};
+		}
+
+		const mocksPromises = slicesToCreate.map((slice) => {
+			return this.slices.updateSliceMocks({
+				libraryID: targetLibrary.libraryID,
+				sliceID: slice.model.id,
+				mocks: slice.mocks,
+			});
+		});
+
+		const mocksResults = await Promise.all(mocksPromises);
+
+		const sliceScreenshotsPromises = slicesToCreate.map((slice) => {
+			const screenshotPromises = Object.entries(slice.screenshots).map(
+				([variationID, data]) => {
+					return this.slices.updateSliceScreenshot({
+						libraryID: targetLibrary.libraryID,
+						sliceID: slice.model.id,
+						variationID,
+						data,
+					});
+				},
+			);
+
+			return Promise.all(screenshotPromises);
+		});
+
+		const sliceScreenshotsResults = await Promise.all(sliceScreenshotsPromises);
+		const mocksErrors = mocksResults.flatMap((result) => result.errors);
+		const screenshotErrors = sliceScreenshotsResults.flatMap((result) =>
+			result.flat().flatMap((r) => r.errors),
+		);
+
+		// Extract the slice IDs from the creation results (assuming each result has an ID)
+		const sliceIDs = slicesToCreate.map((slice) => slice.model.id);
+
+		return {
+			errors: [...mocksErrors, ...screenshotErrors],
+			data: {
+				sliceIDs,
+			},
+		};
+	}
+}
diff --git a/packages/manager/src/managers/slices/SlicesManager.ts b/packages/manager/src/managers/slices/SlicesManager.ts
index 858c388653..b68bf42143 100644
--- a/packages/manager/src/managers/slices/SlicesManager.ts
+++ b/packages/manager/src/managers/slices/SlicesManager.ts
@@ -76,6 +76,7 @@ type SliceMachineManagerReadSliceReturnType = {
 type SliceMachineManagerPushSliceArgs = {
 	libraryID: string;
 	sliceID: string;
+	userAgent?: string;
 };
 
 export type SliceMachineManagerPushSliceReturnType = {
@@ -435,7 +436,7 @@ export class SlicesManager extends BaseManager {
 				endpoint: API_ENDPOINTS.PrismicModels,
 				repositoryName: sliceMachineConfig.repositoryName,
 				token: authenticationToken,
-				userAgent: SLICE_MACHINE_USER_AGENT,
+				userAgent: args.userAgent || SLICE_MACHINE_USER_AGENT,
 				fetch,
 			});
 
diff --git a/packages/manager/src/managers/telemetry/types.ts b/packages/manager/src/managers/telemetry/types.ts
index 55fe6f2c9a..e0c0959ae4 100644
--- a/packages/manager/src/managers/telemetry/types.ts
+++ b/packages/manager/src/managers/telemetry/types.ts
@@ -14,6 +14,7 @@ export const SegmentEventType = {
 	customType_created: "custom-type:created",
 	customType_fieldAdded: "custom-type:field-added",
 	customType_sliceZoneUpdated: "custom-type:slice-zone-updated",
+	customType_openAddFromTemplates: "custom-type:open-add-from-templates",
 	customType_saved: "custom-type:saved",
 	slice_created: "slice:created",
 	screenshotTaken: "screenshot-taken",
@@ -42,6 +43,8 @@ export const HumanSegmentEventType = {
 		"SliceMachine Custom Type Field Added",
 	[SegmentEventType.customType_sliceZoneUpdated]:
 		"SliceMachine Slicezone Updated",
+	[SegmentEventType.customType_openAddFromTemplates]:
+		"SliceMachine Open Add from templates",
 	[SegmentEventType.customType_saved]: "SliceMachine Custom Type Saved",
 	[SegmentEventType.slice_created]: "SliceMachine Slice Created",
 	[SegmentEventType.screenshotTaken]: "SliceMachine Screenshot Taken",
@@ -152,6 +155,11 @@ type CustomTypeSliceZoneUpdatedSegmentEvent = SegmentEvent<
 	{ customTypeId: string }
 >;
 
+type CustomTypeOpenAddFromTemplatesEvent = SegmentEvent<
+	typeof SegmentEventType.customType_openAddFromTemplates,
+	{ customTypeId: string; customTypeFormat: CustomTypeFormat }
+>;
+
 type CustomTypeSavedSegmentEvent = SegmentEvent<
 	typeof SegmentEventType.customType_saved,
 	{
@@ -164,7 +172,7 @@ type CustomTypeSavedSegmentEvent = SegmentEvent<
 
 type SliceCreatedSegmentEvent = SegmentEvent<
 	typeof SegmentEventType.slice_created,
-	{ id: string; name: string; library: string }
+	{ id: string; name: string; library: string; sliceTemplate?: string }
 >;
 
 type ScreenshotTakenSegmentEvent = SegmentEvent<
@@ -214,6 +222,7 @@ export type SegmentEvents =
 	| CustomTypeCreatedSegmentEvent
 	| CustomTypeFieldAddedSegmentEvent
 	| CustomTypeSliceZoneUpdatedSegmentEvent
+	| CustomTypeOpenAddFromTemplatesEvent
 	| CustomTypeSavedSegmentEvent
 	| SliceCreatedSegmentEvent
 	| ScreenshotTakenSegmentEvent
diff --git a/packages/plugin-kit/package.json b/packages/plugin-kit/package.json
index 891a8334e6..2ed72bb604 100644
--- a/packages/plugin-kit/package.json
+++ b/packages/plugin-kit/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/plugin-kit",
-	"version": "0.4.13",
+	"version": "0.4.14-dev-next-release.7",
 	"description": "A set of helpers to develop and run Slice Machine plugins",
 	"keywords": [
 		"typescript",
diff --git a/packages/plugin-kit/src/createSliceMachinePluginRunner.ts b/packages/plugin-kit/src/createSliceMachinePluginRunner.ts
index a5e12a1635..7040044d30 100644
--- a/packages/plugin-kit/src/createSliceMachinePluginRunner.ts
+++ b/packages/plugin-kit/src/createSliceMachinePluginRunner.ts
@@ -141,8 +141,10 @@ export class SliceMachinePluginRunner {
 					path.resolve(this._project.root, "noop.js"),
 				)(resolve);
 				plugin = raw.default || raw;
-			} catch {
-				// noop
+			} catch (error) {
+				if (import.meta.env.DEV) {
+					console.error(error);
+				}
 			}
 
 			if (!plugin) {
diff --git a/packages/plugin-kit/src/hooks/slice-create.ts b/packages/plugin-kit/src/hooks/slice-create.ts
index 679f0fe8ce..b671a1fba5 100644
--- a/packages/plugin-kit/src/hooks/slice-create.ts
+++ b/packages/plugin-kit/src/hooks/slice-create.ts
@@ -12,6 +12,7 @@ import type {
 export type SliceCreateHookData = {
 	libraryID: string;
 	model: SharedSlice;
+	componentContents?: string;
 };
 
 /**
diff --git a/packages/plugin-kit/src/hooks/sliceTemplateLibrary-read.ts b/packages/plugin-kit/src/hooks/sliceTemplateLibrary-read.ts
new file mode 100644
index 0000000000..40c8f5b637
--- /dev/null
+++ b/packages/plugin-kit/src/hooks/sliceTemplateLibrary-read.ts
@@ -0,0 +1,46 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
+import type {
+	ExtendSliceMachineHook,
+	SliceMachinePluginOptions,
+	SliceMachineHook,
+} from "../types";
+
+/**
+ * Data provided to `slice-template-library:read` hook handlers.
+ */
+export type SliceTemplateLibraryReadHookData = {
+	templateIDs?: string[];
+};
+
+/**
+ * Return value for `slice-template-library:read` hook handlers.
+ */
+export type SliceTemplateLibraryReadHookReturnType = {
+	templates: {
+		model: SharedSlice;
+		mocks: SharedSliceContent[];
+		createComponentContents: (model: SharedSlice) => string;
+		screenshots: Record<string, Buffer>;
+	}[];
+};
+
+/**
+ * Base version of `slice-template-library:read` without plugin runner context.
+ *
+ * @internal
+ */
+export type SliceTemplateLibraryReadHookBase = SliceMachineHook<
+	SliceTemplateLibraryReadHookData,
+	SliceTemplateLibraryReadHookReturnType
+>;
+
+/**
+ * Handler for the `slice-template-library:read` hook.
+ *
+ * @typeParam TPluginOptions - User-provided options for the hook's plugin.
+ */
+export type SliceTemplateLibraryReadHook<
+	TPluginOptions extends SliceMachinePluginOptions = SliceMachinePluginOptions,
+> = ExtendSliceMachineHook<SliceTemplateLibraryReadHookBase, TPluginOptions>;
diff --git a/packages/plugin-kit/src/index.ts b/packages/plugin-kit/src/index.ts
index 9c117e5f1b..2aa1f62eef 100644
--- a/packages/plugin-kit/src/index.ts
+++ b/packages/plugin-kit/src/index.ts
@@ -193,6 +193,13 @@ export type {
 	DocumentationReadHookReturnType,
 } from "./hooks/documentation-read";
 
+// slice-template-library:read
+export type {
+	SliceTemplateLibraryReadHook,
+	SliceTemplateLibraryReadHookData,
+	SliceTemplateLibraryReadHookReturnType,
+} from "./hooks/sliceTemplateLibrary-read";
+
 ///////////////////////////////////////////////////////////////////////////////
 //
 // Internal (for Slice Machine)
diff --git a/packages/plugin-kit/src/types.ts b/packages/plugin-kit/src/types.ts
index cae213e52c..779a1e9422 100644
--- a/packages/plugin-kit/src/types.ts
+++ b/packages/plugin-kit/src/types.ts
@@ -26,6 +26,8 @@ import { SliceUpdateHookBase } from "./hooks/slice-update";
 import { SnippetReadHookBase } from "./hooks/snippet-read";
 import { DocumentationReadHookBase } from "./hooks/documentation-read";
 
+import { SliceTemplateLibraryReadHookBase } from "./hooks/sliceTemplateLibrary-read";
+
 /**
  * A value optionally wrapped in a `PromiseLike`.
  *
@@ -153,6 +155,7 @@ export const SliceMachineHookType = {
 	customType_asset_read: "custom-type:asset:read",
 	customTypeLibrary_read: "custom-type-library:read",
 	documentation_read: "documentation:read",
+	sliceTemplateLibrary_read: "slice-template-library:read",
 
 	snippet_read: "snippet:read",
 
@@ -213,4 +216,7 @@ export type SliceMachineHooks = {
 
 	// Debug
 	[SliceMachineHookType.debug]: Hook<DebugHookBase>;
+
+	// Slice templates
+	[SliceMachineHookType.sliceTemplateLibrary_read]: Hook<SliceTemplateLibraryReadHookBase>;
 };
diff --git a/packages/plugin-kit/tsconfig.json b/packages/plugin-kit/tsconfig.json
index 4485905a8a..af75f27488 100644
--- a/packages/plugin-kit/tsconfig.json
+++ b/packages/plugin-kit/tsconfig.json
@@ -13,7 +13,7 @@
 
 		"forceConsistentCasingInFileNames": true,
 		"lib": ["esnext"],
-		"types": ["node"]
+		"types": ["node", "vite/client"]
 	},
 	"exclude": ["node_modules", "dist", "examples"]
 }
diff --git a/packages/slice-machine/components/ModalFormCard/index.tsx b/packages/slice-machine/components/ModalFormCard/index.tsx
index 852150a760..e6b2b69ceb 100644
--- a/packages/slice-machine/components/ModalFormCard/index.tsx
+++ b/packages/slice-machine/components/ModalFormCard/index.tsx
@@ -6,8 +6,9 @@ import {
   FormikErrors,
   FormikTouched,
   FormikValues,
+  FormikProps,
 } from "formik";
-import { ReactNode, SetStateAction } from "react";
+import { SetStateAction } from "react";
 import { Flex, Heading, Close, Button as ThemeButton } from "theme-ui";
 
 import { Button } from "@components/Button";
@@ -44,7 +45,9 @@ type ModalCardProps<T extends FormikValues> = {
   omitFooter?: boolean;
   isLoading?: boolean;
   dataCy?: string;
-  actionMessage?: ReactNode;
+  actionMessage?:
+    | ((props: FormikProps<T>) => React.ReactNode)
+    | React.ReactNode;
 };
 
 function ModalCard<Values extends FormikValues>({
@@ -88,102 +91,108 @@ function ModalCard<Values extends FormikValues>({
           onSubmit(values);
         }}
       >
-        {({
-          isValid,
-          isSubmitting,
-          values,
-          errors,
-          touched,
-          setFieldValue,
-          setValues,
-        }) => (
-          <Form
-            id={formId}
-            {...(dataCy != null ? { "data-cy": dataCy } : null)}
-          >
-            <Card
-              borderFooter
-              footerSx={{
-                p: 3,
-                position: "sticky",
-                bottom: 0,
-                background: "gray",
-              }}
-              bodySx={{ px: 4, py: 4 }}
-              sx={{ border: "none" }}
-              {...cardProps}
-              Header={({ radius }: { radius: string | number }) => (
-                <Flex
-                  sx={{
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 1,
-                    p: "16px",
-                    pl: 4,
-                    bg: "headSection",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    borderTopLeftRadius: radius,
-                    borderTopRightRadius: radius,
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-                  }}
-                >
-                  <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
-                  <Close type="button" onClick={close} />
-                </Flex>
-              )}
-              Footer={
-                !omitFooter ? (
+        {(formikProps) => {
+          const {
+            isValid,
+            isSubmitting,
+            values,
+            errors,
+            touched,
+            setFieldValue,
+            setValues,
+          } = formikProps;
+
+          return (
+            <Form
+              id={formId}
+              {...(dataCy != null ? { "data-cy": dataCy } : null)}
+            >
+              <Card
+                borderFooter
+                footerSx={{
+                  p: 3,
+                  position: "sticky",
+                  bottom: 0,
+                  background: "gray",
+                }}
+                bodySx={{ px: 4, py: 4 }}
+                sx={{ border: "none" }}
+                {...cardProps}
+                Header={({ radius }: { radius: string | number }) => (
                   <Flex
                     sx={{
-                      alignItems: "space-between",
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      p: "16px",
+                      pl: 4,
+                      bg: "headSection",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      borderTopLeftRadius: radius,
+                      borderTopRightRadius: radius,
+                      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                      borderBottom: (t) => `1px solid ${t.colors?.borders}`,
                     }}
                   >
-                    <Flex sx={{ fontSize: "14px", alignItems: "center" }}>
-                      {actionMessage}
-                    </Flex>
-                    <Flex sx={{ ml: "auto" }}>
-                      <ThemeButton
-                        mr={2}
-                        type="button"
-                        onClick={close}
-                        variant="secondary"
-                        disabled={isSubmitting || isLoading}
-                      >
-                        Cancel
-                      </ThemeButton>
-                      <Button
-                        label={buttonLabel}
-                        form={formId}
-                        type="submit"
-                        disabled={!isValid || isSubmitting || isLoading}
-                        isLoading={isSubmitting || isLoading}
-                        sx={{
-                          fontWeight: "400",
-                          paddingBlock: "8px",
-                          paddingInline: "16px",
-                          fontSize: "14px",
-                          borderRadius: "4px",
-                        }}
-                      />
-                    </Flex>
+                    <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
+                    <Close type="button" onClick={close} />
                   </Flex>
-                ) : null
-              }
-            >
-              {children({
-                isValid,
-                isSubmitting,
-                values,
-                errors,
-                touched,
-                setFieldValue,
-                setValues,
-              })}
-            </Card>
-          </Form>
-        )}
+                )}
+                Footer={
+                  !omitFooter ? (
+                    <Flex
+                      sx={{
+                        alignItems: "space-between",
+                      }}
+                    >
+                      <Flex sx={{ fontSize: "14px", alignItems: "center" }}>
+                        {typeof actionMessage === "function"
+                          ? actionMessage(formikProps)
+                          : actionMessage}
+                      </Flex>
+                      <Flex sx={{ ml: "auto" }}>
+                        <ThemeButton
+                          mr={2}
+                          type="button"
+                          onClick={close}
+                          variant="secondary"
+                          disabled={isSubmitting || isLoading}
+                        >
+                          Cancel
+                        </ThemeButton>
+                        <Button
+                          label={buttonLabel}
+                          form={formId}
+                          type="submit"
+                          disabled={!isValid || isSubmitting || isLoading}
+                          isLoading={isSubmitting || isLoading}
+                          sx={{
+                            fontWeight: "400",
+                            paddingBlock: "8px",
+                            paddingInline: "16px",
+                            fontSize: "14px",
+                            borderRadius: "4px",
+                          }}
+                        />
+                      </Flex>
+                    </Flex>
+                  ) : null
+                }
+              >
+                {children({
+                  isValid,
+                  isSubmitting,
+                  values,
+                  errors,
+                  touched,
+                  setFieldValue,
+                  setValues,
+                })}
+              </Card>
+            </Form>
+          );
+        }}
       </Formik>
     </SliceMachineModal>
   );
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx
new file mode 100644
index 0000000000..fec98d16c9
--- /dev/null
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx
@@ -0,0 +1,88 @@
+import { FC } from "react";
+import { Text } from "theme-ui";
+
+import { SliceTemplate } from "@src/features/slicesTemplates/useSlicesTemplates";
+import { Slices } from "@lib/models/common/Slice";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
+import ModalFormCard from "../../../../components/ModalFormCard";
+import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
+
+interface UpdateSliceModalProps {
+  isOpen: boolean;
+  formId: string;
+  close: () => void;
+  onSubmit: (values: SliceZoneFormValues) => void;
+  availableSlicesTemplates: SliceTemplate[];
+}
+
+export type SliceZoneFormValues = {
+  sliceKeys: string[];
+};
+
+export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
+  isOpen,
+  formId,
+  close,
+  onSubmit,
+  availableSlicesTemplates,
+}) => {
+  return (
+    <ModalFormCard
+      buttonLabel="Add"
+      isOpen={isOpen}
+      formId={formId}
+      close={close}
+      onSubmit={(values: SliceZoneFormValues) => {
+        onSubmit(values);
+      }}
+      initialValues={{
+        sliceKeys: [],
+      }}
+      content={{
+        title: "Add from templates",
+      }}
+      validate={(values) => {
+        if (values.sliceKeys.length === 0) {
+          return {
+            sliceKeys: "Select at least one template to add",
+          };
+        }
+      }}
+      actionMessage={({ errors }) =>
+        errors.sliceKeys !== undefined ? (
+          <Text sx={{ color: "error" }}>{errors.sliceKeys}</Text>
+        ) : undefined
+      }
+    >
+      {({ values }) => (
+        <UpdateSliceZoneModalList
+          values={values}
+          placeholderSlices={sliceTemplatesComingSoon}
+          availableSlices={[
+            ...availableSlicesTemplates.map(
+              (slice): ComponentUI => ({
+                extension: "",
+                fileName: "",
+                from: "",
+                href: "",
+                pathToSlice: "",
+                model: Slices.toSM(slice.model),
+                screenshots: Object.entries(slice.screenshots).reduce(
+                  (acc, curr) => ({
+                    ...acc,
+                    [curr[0]]: {
+                      url: curr[1],
+                    },
+                  }),
+                  {}
+                ),
+              })
+            ),
+            ...sliceTemplatesComingSoon,
+          ]}
+        />
+      )}
+    </ModalFormCard>
+  );
+};
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx
index dbb1dd5fb7..69350be6ee 100644
--- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx
@@ -1,7 +1,6 @@
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 import ModalFormCard from "../../../../components/ModalFormCard";
-
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 interface UpdateSliceModalProps {
   isOpen: boolean;
@@ -38,7 +37,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
         sliceKeys: slicesInSliceZone.map((slice) => slice.model.id),
       }}
       content={{
-        title: "Update Slices",
+        title: "Update slices",
       }}
       dataCy="update-slices-modal"
     >
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx
index 303568b4cf..a0ff048bbf 100644
--- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx
@@ -1,5 +1,5 @@
 import { FieldArray } from "formik";
-import { Checkbox, Box } from "theme-ui";
+import { Checkbox, Box, Text } from "theme-ui";
 
 import { SharedSlice } from "@lib/models/ui/Slice";
 
@@ -10,7 +10,8 @@ import { ComponentUI } from "@lib/models/common/ComponentUI";
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
   values: SliceZoneFormValues;
-}> = ({ availableSlices, values }) => (
+  placeholderSlices?: ReadonlyArray<ComponentUI>;
+}> = ({ availableSlices, values, placeholderSlices }) => (
   <FieldArray
     name="sliceKeys"
     render={(arrayHelpers) => (
@@ -19,6 +20,10 @@ const UpdateSliceZoneModalList: React.FC<{
         elems={availableSlices}
         defineElementKey={(slice: ComponentUI) => slice.model.name}
         renderElem={(slice: ComponentUI) => {
+          const isPlaceholderSlice = placeholderSlices?.find(
+            (s) => s.model.id === slice.model.id
+          );
+
           return SharedSlice.render({
             slice: slice,
             Wrapper: ({ slice, children, sx }) => {
@@ -26,6 +31,10 @@ const UpdateSliceZoneModalList: React.FC<{
                 <Box
                   data-testid="slicezone-modal-item"
                   onClick={() => {
+                    if (isPlaceholderSlice) {
+                      return;
+                    }
+
                     const isInSliceZone = values.sliceKeys.includes(
                       slice.model.id
                     );
@@ -37,16 +46,37 @@ const UpdateSliceZoneModalList: React.FC<{
                     arrayHelpers.push(slice.model.id);
                   }}
                   key={`${slice.from}-${slice.model.name}`}
-                  sx={{
-                    cursor: "pointer",
-                    ...sx,
-                  }}
+                  sx={
+                    !isPlaceholderSlice
+                      ? {
+                          cursor: "pointer",
+                          ...sx,
+                        }
+                      : {
+                          opacity: 0.5,
+                          ...sx,
+                        }
+                  }
                 >
                   {children}
                 </Box>
               );
             },
             StatusOrCustom: ({ slice }: { slice: ComponentUI }) => {
+              if (isPlaceholderSlice) {
+                return (
+                  <Text
+                    sx={{
+                      fontSize: 12,
+                      color: "purpleStrong",
+                      fontWeight: "bold",
+                    }}
+                  >
+                    Coming soon
+                  </Text>
+                );
+              }
+
               const isInSliceZone = values.sliceKeys.includes(slice.model.id);
 
               return (
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
index eef885df8a..4b065abf84 100644
--- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -1,4 +1,13 @@
-import { Button, Box, Switch } from "@prismicio/editor-ui";
+import {
+  Button,
+  Box,
+  Switch,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from "@prismicio/editor-ui";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { BaseStyles } from "theme-ui";
@@ -15,16 +24,22 @@ import type { SlicesSM } from "@lib/models/common/Slices";
 import { List, ListHeader } from "@src/components/List";
 import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { useModelStatus } from "@src/hooks/useModelStatus";
+import { telemetry } from "@src/apiClient";
 import {
   getFrontendSlices,
   getLibraries,
   getRemoteSlices,
 } from "@src/modules/slices";
 import type { SliceMachineStoreType } from "@src/redux/type";
+import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
+import { createSlicesTemplates } from "@src/features/slicesTemplates/actions/createSlicesTemplates";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import { SlicesList } from "./List";
 import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
+import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
+import { getState } from "@src/apiClient";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
 const mapAvailableAndSharedSlices = (
   sliceZone: SlicesSM,
@@ -100,7 +115,11 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   sliceZone,
   tabId,
 }) => {
-  const [formIsOpen, setFormIsOpen] = useState(false);
+  const availableSlicesTemplates = useSlicesTemplates();
+  const [isSlicesTemplatesModalOpen, setIsSlicesTemplatesModalOpen] =
+    useState(false);
+  const [isUpdateSliceZoneModalOpen, setIsUpdateSliceZoneModalOpen] =
+    useState(false);
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const { remoteSlices, libraries, slices } = useSelector(
     (store: SliceMachineStoreType) => ({
@@ -109,6 +128,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     })
   );
+  const { createSliceSuccess } = useSliceMachineActions();
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal
   );
@@ -142,33 +162,69 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     .map((e) => (e.payload as NonSharedSliceInSliceZone).key);
 
   const onAddNewSlice = () => {
-    setFormIsOpen(true);
+    setIsUpdateSliceZoneModalOpen(true);
   };
 
   const onCreateNewSlice = () => {
     setIsCreateSliceModalOpen(true);
   };
 
+  const openSlicesTemplatesModal = () => {
+    setIsSlicesTemplatesModalOpen(true);
+
+    void telemetry.track({
+      event: "custom-type:open-add-from-templates",
+      customTypeId: customType.id,
+      customTypeFormat: customType.format,
+    });
+  };
+
   return (
     <Box flexDirection="column">
       <List>
         <ListHeader
           actions={
-            sliceZone ? (
-              <>
-                <Button onClick={onCreateNewSlice} startIcon="add">
-                  New slice
-                </Button>
+            sliceZone && slicesInSliceZone.length > 0 ? (
+              <Box gap={8}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <Button variant="secondary" startIcon="add">
+                      Add
+                    </Button>
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      startIcon={<Icon name="add" />}
+                      onSelect={onCreateNewSlice}
+                    >
+                      Blank slice
+                    </DropdownMenuItem>
+
+                    {availableSlicesTemplates.length > 0 ? (
+                      <DropdownMenuItem
+                        onSelect={() => {
+                          openSlicesTemplatesModal();
+                        }}
+                        startIcon={<Icon name="contentCopy" />}
+                      >
+                        Slice template
+                      </DropdownMenuItem>
+                    ) : undefined}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
                 {availableSlices.length > 0 ? (
                   <Button
                     data-cy="update-slices"
                     onClick={onAddNewSlice}
                     startIcon="edit"
+                    variant="secondary"
                   >
-                    Update Slices
+                    Update slices
                   </Button>
                 ) : undefined}
-              </>
+              </Box>
             ) : undefined
           }
           toggle={
@@ -204,12 +260,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           <SliceZoneBlankSlate
             onAddNewSlice={onAddNewSlice}
             onCreateNewSlice={onCreateNewSlice}
+            openSlicesTemplatesModal={openSlicesTemplatesModal}
             projectHasAvailableSlices={availableSlices.length > 0}
+            isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
           />
         )
       ) : undefined}
       <UpdateSliceZoneModal
-        isOpen={formIsOpen}
+        isOpen={isUpdateSliceZoneModalOpen}
         formId={`tab-slicezone-form-${tabId}`}
         availableSlices={availableSlices}
         slicesInSliceZone={sharedSlicesInSliceZone}
@@ -217,7 +275,36 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           onSelectSharedSlices(sliceKeys, nonSharedSlicesKeysInSliceZone)
         }
-        close={() => setFormIsOpen(false)}
+        close={() => setIsUpdateSliceZoneModalOpen(false)}
+      />
+      <SlicesTemplatesModal
+        isOpen={isSlicesTemplatesModalOpen}
+        formId={`tab-slicezone-form-${tabId}`}
+        availableSlicesTemplates={availableSlicesTemplates}
+        onSubmit={({ sliceKeys }) =>
+          void createSlicesTemplates({
+            templateIDs: sliceKeys,
+            localLibrariesNames: localLibraries.map((library) => library.name),
+            onSuccess: async (slicesIds: string[]) => {
+              // TODO(DT-1453): Remove the need of the global getState
+              const serverState = await getState();
+
+              // Update Redux store
+              createSliceSuccess(serverState.libraries);
+
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+              onSelectSharedSlices(
+                slicesIds.concat(
+                  sharedSlicesInSliceZone.map((s) => s.model.id)
+                ),
+                nonSharedSlicesKeysInSliceZone
+              );
+
+              setIsSlicesTemplatesModalOpen(false);
+            },
+          })
+        }
+        close={() => setIsSlicesTemplatesModalOpen(false)}
       />
       <DeleteSliceZoneModal
         isDeleteSliceZoneModalOpen={isDeleteSliceZoneModalOpen}
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/sliceTemplatesComingSoon.ts b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/sliceTemplatesComingSoon.ts
new file mode 100644
index 0000000000..d1b823d4ce
--- /dev/null
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/sliceTemplatesComingSoon.ts
@@ -0,0 +1,122 @@
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+
+export const sliceTemplatesComingSoon: ComponentUI[] = [
+  {
+    extension: "",
+    fileName: "",
+    from: "",
+    href: "",
+    pathToSlice: "",
+    model: {
+      id: "alternate_grid",
+      name: "AlternateGrid",
+      type: "SharedSlice",
+      variations: [
+        {
+          description: "",
+          docURL: "",
+          id: "default",
+          name: "Default",
+          version: "sktwi1xtmkfgx8626",
+        },
+        {
+          description: "",
+          docURL: "",
+          id: "Other",
+          name: "Other",
+          version: "sktwi1xtmkfgx8626",
+        },
+      ],
+    },
+    screenshots: {
+      default: {
+        url: "/alternateGrid.png",
+      },
+    },
+  },
+  {
+    extension: "",
+    fileName: "",
+    from: "",
+    href: "",
+    pathToSlice: "",
+    model: {
+      id: "customer_logos",
+      name: "CustomerLogos",
+      type: "SharedSlice",
+      variations: [
+        {
+          description: "",
+          docURL: "",
+          id: "default",
+          name: "Default",
+          version: "sktwi1xtmkfgx8626",
+        },
+      ],
+    },
+    screenshots: {
+      default: {
+        url: "/customerLogos.png",
+      },
+    },
+  },
+  {
+    extension: "",
+    fileName: "",
+    from: "",
+    href: "",
+    pathToSlice: "",
+    model: {
+      id: "video_highlights",
+      name: "VideoHighlights",
+      type: "SharedSlice",
+      variations: [
+        {
+          description: "",
+          docURL: "",
+          id: "default",
+          name: "Default",
+          version: "sktwi1xtmkfgx8626",
+        },
+      ],
+    },
+    screenshots: {
+      default: {
+        url: "/videoHighlights.png",
+      },
+    },
+  },
+  {
+    extension: "",
+    fileName: "",
+    from: "",
+    href: "",
+    pathToSlice: "",
+    model: {
+      id: "hero",
+      name: "Hero",
+      type: "SharedSlice",
+      variations: [
+        {
+          description: "",
+          docURL: "",
+          id: "default",
+          name: "Default",
+          version: "sktwi1xtmkfgx8626",
+        },
+        {
+          description: "",
+          docURL: "",
+          id: "Other",
+          name: "Other",
+          version: "sktwi1xtmkfgx8626",
+        },
+      ],
+    },
+    screenshots: {
+      default: {
+        url: "/hero.png",
+      },
+    },
+  },
+];
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx
index 0a091c62cd..d437f03100 100644
--- a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx
@@ -1,5 +1,5 @@
-import { Box } from "@prismicio/editor-ui";
-import type { FC } from "react";
+import { Box, ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
+import { FC, Suspense } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import { useSelector } from "react-redux";
 import type { AnyObjectSchema } from "yup";
@@ -139,43 +139,54 @@ const TabZone: FC<TabZoneProps> = ({
 
   return (
     <Box backgroundColor="grey2" flexDirection="column" gap={8}>
-      <Zone
-        zoneType="customType"
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        tabId={tabId}
-        title="Static Zone"
-        dataTip={""}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        fields={fields}
-        // @ts-expect-error propsType and typescript are incompatible on this type, we can remove the error when migrating the Zone component
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-        poolOfFieldsToCheck={poolOfFields}
-        showHints={true}
-        EditModal={EditModal}
-        widgetsArray={ctBuilderArray}
-        onDeleteItem={onDeleteItem}
-        onSave={onSave}
-        onSaveNewField={onSaveNewField}
-        onDragEnd={onDragEnd}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-        renderHintBase={({ item }) => `data${transformKeyAccessor(item.key)}`}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
-        renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`}
-        dataCy="ct-static-zone"
-        isRepeatableCustomType={customType.repeatable}
-      />
-
-      <SliceZone
-        customType={customType}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        tabId={tabId}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        sliceZone={sliceZone}
-        onRemoveSharedSlice={onRemoveSharedSlice}
-        onCreateSliceZone={onCreateSliceZone}
-        onDeleteSliceZone={onDeleteSliceZone}
-        onSelectSharedSlices={onSelectSharedSlices}
-      />
+      <ErrorBoundary>
+        <Suspense
+          fallback={
+            <Box padding={32}>
+              <ProgressCircle />
+            </Box>
+          }
+        >
+          <Zone
+            zoneType="customType"
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            tabId={tabId}
+            title="Static Zone"
+            dataTip={""}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            fields={fields}
+            // @ts-expect-error propsType and typescript are incompatible on this type, we can remove the error when migrating the Zone component
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+            poolOfFieldsToCheck={poolOfFields}
+            showHints={true}
+            EditModal={EditModal}
+            widgetsArray={ctBuilderArray}
+            onDeleteItem={onDeleteItem}
+            onSave={onSave}
+            onSaveNewField={onSaveNewField}
+            onDragEnd={onDragEnd}
+            renderHintBase={({ item }) =>
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+              `data${transformKeyAccessor(item.key)}`
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
+            renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`}
+            dataCy="ct-static-zone"
+            isRepeatableCustomType={customType.repeatable}
+          />
+          <SliceZone
+            customType={customType}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            tabId={tabId}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            sliceZone={sliceZone}
+            onRemoveSharedSlice={onRemoveSharedSlice}
+            onCreateSliceZone={onCreateSliceZone}
+            onDeleteSliceZone={onDeleteSliceZone}
+            onSelectSharedSlices={onSelectSharedSlices}
+          />
+        </Suspense>
+      </ErrorBoundary>
     </Box>
   );
 };
diff --git a/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx b/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
index 0368655fa4..62e4cbd513 100644
--- a/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
+++ b/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Text, Heading } from "theme-ui";
-import { FaPlus } from "react-icons/fa";
+import { Box, Text, Heading } from "theme-ui";
+import { Button } from "@prismicio/editor-ui";
 
 const ZoneEmptyState = ({
   onEnterSelectMode,
@@ -16,18 +16,17 @@ const ZoneEmptyState = ({
         Add a field to your {zoneName} Zone
       </Text>
     </Box>
-    <Button
-      mt={3}
-      variant="buttons.darkSmall"
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      onClick={() => onEnterSelectMode()}
-      data-cy={`add-${zoneName}-field`}
-    >
-      <FaPlus
-        style={{ marginRight: "8px", position: "relative", top: "2px" }}
-      />{" "}
-      Add a new field
-    </Button>
+    <Box sx={{ display: "flex", justifyContent: "center", marginTop: 16 }}>
+      <Button
+        variant="secondary"
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        onClick={() => onEnterSelectMode()}
+        data-cy={`add-${zoneName}-field`}
+        startIcon="add"
+      >
+        Add a new field
+      </Button>
+    </Box>
   </Box>
 );
 
diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx
index f5c1dfb002..c89c1b982d 100644
--- a/packages/slice-machine/lib/builders/common/Zone/index.jsx
+++ b/packages/slice-machine/lib/builders/common/Zone/index.jsx
@@ -1,8 +1,7 @@
-import { Button } from "@prismicio/editor-ui";
+import { Button, ButtonGroup } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
-import { FaCode, FaPlus } from "react-icons/fa";
-import { BaseStyles, Button as ThemeUIButton, Heading } from "theme-ui";
+import { BaseStyles, Heading } from "theme-ui";
 
 import { List, ListHeader } from "@src/components/List";
 
@@ -80,21 +79,25 @@ const Zone = ({
           actions={
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             fields.length > 0 ? (
-              <>
-                <Button onClick={() => setShowHints(!showHints)}>
+              <ButtonGroup size="medium" variant="secondary">
+                <Button
+                  variant="secondary"
+                  onClick={() => setShowHints(!showHints)}
+                >
                   {showHints ? "Hide" : "Show"} code snippets
                 </Button>
                 <Button
+                  variant="secondary"
+                  onClick={() => enterSelectMode()}
                   data-cy={`add-${
                     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                     isRepeatable ? "Repeatable" : "Static"
                   }-field`}
-                  onClick={() => enterSelectMode()}
-                  variant="tertiary"
+                  startIcon="add"
                 >
-                  Add a new Field
+                  Add a new field
                 </Button>
-              </>
+              </ButtonGroup>
             ) : undefined
           }
         >
@@ -107,39 +110,25 @@ const Zone = ({
             Actions={
               // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
               fields.length > 0 ? (
-                <>
-                  <ThemeUIButton
-                    variant="buttons.lightSmall"
+                <ButtonGroup size="medium" variant="secondary">
+                  <Button
+                    variant="secondary"
                     onClick={() => setShowHints(!showHints)}
                   >
-                    <FaCode
-                      style={{
-                        marginRight: "8px",
-                        position: "relative",
-                        top: "2px",
-                      }}
-                    />{" "}
                     {showHints ? "Hide" : "Show"} code snippets
-                  </ThemeUIButton>
-                  <ThemeUIButton
-                    ml={2}
-                    variant="buttons.darkSmall"
+                  </Button>
+                  <Button
+                    variant="secondary"
                     onClick={() => enterSelectMode()}
                     data-cy={`add-${
                       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                       isRepeatable ? "Repeatable" : "Static"
                     }-field`}
+                    startIcon="add"
                   >
-                    <FaPlus
-                      style={{
-                        marginRight: "8px",
-                        position: "relative",
-                        top: "2px",
-                      }}
-                    />
-                    Add a new Field
-                  </ThemeUIButton>
-                </>
+                    Add a new field
+                  </Button>
+                </ButtonGroup>
               ) : null
             }
           />
diff --git a/packages/slice-machine/package.json b/packages/slice-machine/package.json
index a2b691acc1..3e96583575 100644
--- a/packages/slice-machine/package.json
+++ b/packages/slice-machine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "1.11.0",
+  "version": "1.11.1-dev-next-release.7",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -37,9 +37,9 @@
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
-    "@prismicio/editor-fields": "0.4.8",
-    "@prismicio/editor-support": "0.4.8",
-    "@prismicio/editor-ui": "0.4.8",
+    "@prismicio/editor-fields": "0.4.9",
+    "@prismicio/editor-support": "0.4.9",
+    "@prismicio/editor-ui": "0.4.9",
     "@prismicio/mocks": "2.0.0-alpha.2",
     "@prismicio/simulator": "0.1.4",
     "@prismicio/types-internal": "2.0.0",
diff --git a/packages/slice-machine/public/alternateGrid.png b/packages/slice-machine/public/alternateGrid.png
new file mode 100644
index 0000000000..cf282a4702
Binary files /dev/null and b/packages/slice-machine/public/alternateGrid.png differ
diff --git a/packages/slice-machine/public/customerLogos.png b/packages/slice-machine/public/customerLogos.png
new file mode 100644
index 0000000000..c0a022efcb
Binary files /dev/null and b/packages/slice-machine/public/customerLogos.png differ
diff --git a/packages/slice-machine/public/hero.png b/packages/slice-machine/public/hero.png
new file mode 100644
index 0000000000..69b428fe2d
Binary files /dev/null and b/packages/slice-machine/public/hero.png differ
diff --git a/packages/slice-machine/public/videoHighlights.png b/packages/slice-machine/public/videoHighlights.png
new file mode 100644
index 0000000000..70060a907e
Binary files /dev/null and b/packages/slice-machine/public/videoHighlights.png differ
diff --git a/packages/slice-machine/src/components/List/List.css.ts b/packages/slice-machine/src/components/List/List.css.ts
index adb542d46f..71188d201b 100644
--- a/packages/slice-machine/src/components/List/List.css.ts
+++ b/packages/slice-machine/src/components/List/List.css.ts
@@ -26,5 +26,3 @@ export const header = style([
     },
   },
 ]);
-
-export const headerActions = sprinkles({ flexGrow: 1, justifyContent: "end" });
diff --git a/packages/slice-machine/src/components/List/List.tsx b/packages/slice-machine/src/components/List/List.tsx
index b9b73da98b..c6076424b9 100644
--- a/packages/slice-machine/src/components/List/List.tsx
+++ b/packages/slice-machine/src/components/List/List.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Text } from "@prismicio/editor-ui";
+import { Box, Text } from "@prismicio/editor-ui";
 import type { FC, PropsWithChildren, ReactNode } from "react";
 
 import * as styles from "./List.css";
@@ -23,12 +23,8 @@ export const ListHeader: FC<ListHeaderProps> = ({
       {children}
     </Text>
     {toggle}
-    <ButtonGroup
-      className={styles.headerActions}
-      size="medium"
-      variant="secondary"
-    >
+    <Box flexGrow={1} justifyContent="end">
       {actions}
-    </ButtonGroup>
+    </Box>
   </header>
 );
diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx
index 1d058d9914..5e8670e81d 100644
--- a/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx
+++ b/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx
@@ -12,31 +12,43 @@ import {
 export type SliceZoneBlankSlateProps = {
   onAddNewSlice: () => void;
   onCreateNewSlice: () => void;
+  openSlicesTemplatesModal: () => void;
   projectHasAvailableSlices: boolean;
+  isSlicesTemplatesSupported: boolean;
 };
 
 export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   onCreateNewSlice,
   onAddNewSlice,
+  openSlicesTemplatesModal,
   projectHasAvailableSlices,
+  isSlicesTemplatesSupported,
 }) => {
   return (
     <Box justifyContent="center">
       <BlankSlate backgroundImage="/blank-slate-slice-zone.png">
         <BlankSlateContent>
-          <BlankSlateTitle>Add your Slices</BlankSlateTitle>
+          <BlankSlateTitle>Add slices</BlankSlateTitle>
           <BlankSlateDescription>
             Slices are website sections that you can reuse on different pages
-            with different content. Each Slice has its own component in your
+            with different content. Each slice has its own component in your
             code.
           </BlankSlateDescription>
           <BlankSlateActions>
             <Button startIcon="add" onClick={onCreateNewSlice}>
-              New slice
+              Create a blank slice
             </Button>
+            {isSlicesTemplatesSupported && (
+              <Button
+                startIcon="contentCopy"
+                onClick={openSlicesTemplatesModal}
+              >
+                Add from templates
+              </Button>
+            )}
             {projectHasAvailableSlices && (
-              <Button startIcon="edit" onClick={onAddNewSlice}>
-                Update Slices
+              <Button startIcon="folder" onClick={onAddNewSlice}>
+                Add from libraries
               </Button>
             )}
           </BlankSlateActions>
diff --git a/packages/slice-machine/src/features/customTypes/customTypesMessages.ts b/packages/slice-machine/src/features/customTypes/customTypesMessages.ts
index b7cf1e95ac..f265327bc3 100644
--- a/packages/slice-machine/src/features/customTypes/customTypesMessages.ts
+++ b/packages/slice-machine/src/features/customTypes/customTypesMessages.ts
@@ -13,7 +13,7 @@ export const CUSTOM_TYPES_MESSAGES = {
     blankSlateDescription:
       "Page types are models that your editors will use to create website pages in the Page Builder.",
     createSliceFromTypeActionMessage:
-      "This action will save your current Page Type",
+      "This action will save your current page type",
   },
   custom: {
     name: ({ start, plural }: CustomTypesMessagesNameArgs) =>
@@ -24,6 +24,6 @@ export const CUSTOM_TYPES_MESSAGES = {
     blankSlateDescription:
       "Custom types are models that your editors can use to create menus or objects in the Page Builder.",
     createSliceFromTypeActionMessage:
-      "This action will save your current Custom Type",
+      "This action will save your current custom type",
   },
 };
diff --git a/packages/slice-machine/src/features/slicesTemplates/actions/createSlicesTemplates.ts b/packages/slice-machine/src/features/slicesTemplates/actions/createSlicesTemplates.ts
new file mode 100644
index 0000000000..4c0ca7a4bc
--- /dev/null
+++ b/packages/slice-machine/src/features/slicesTemplates/actions/createSlicesTemplates.ts
@@ -0,0 +1,41 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+import { telemetry } from "@src/apiClient";
+
+type CreateSlicesTemplatesArgs = {
+  templateIDs: string[];
+  localLibrariesNames: string[];
+  onSuccess: (slicesIds: string[]) => Promise<void>;
+};
+
+export async function createSlicesTemplates(args: CreateSlicesTemplatesArgs) {
+  try {
+    const { templateIDs, localLibrariesNames, onSuccess } = args;
+
+    const { data, errors } =
+      await managerClient.sliceTemplateLibrary.createSlices({
+        templateIDs,
+      });
+
+    if (errors.length > 0 || data === undefined) {
+      throw errors;
+    }
+
+    data.sliceIDs.forEach((sliceID, index) => {
+      void telemetry.track({
+        event: "slice:created",
+        id: sliceID,
+        name: sliceID,
+        library: localLibrariesNames[0],
+        sliceTemplate: templateIDs[index],
+      });
+    });
+
+    await onSuccess(data.sliceIDs);
+  } catch (e) {
+    const errorMessage = "Internal Error: Slice(s) not created";
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}
diff --git a/packages/slice-machine/src/features/slicesTemplates/useSlicesTemplates.ts b/packages/slice-machine/src/features/slicesTemplates/useSlicesTemplates.ts
new file mode 100644
index 0000000000..8799e955d3
--- /dev/null
+++ b/packages/slice-machine/src/features/slicesTemplates/useSlicesTemplates.ts
@@ -0,0 +1,37 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { managerClient } from "@src/managerClient";
+
+export type SliceTemplate = {
+  model: SharedSlice;
+  screenshots: Record<string, string>;
+};
+
+async function getSlicesTemplates(): Promise<SliceTemplate[]> {
+  try {
+    const { templates, errors } =
+      await managerClient.sliceTemplateLibrary.readLibrary({});
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    return templates.map((template) => ({
+      model: template.model,
+      screenshots: Object.fromEntries(
+        Object.entries(template.screenshots).map(([key, blob]) => [
+          key,
+          URL.createObjectURL(blob),
+        ])
+      ),
+    }));
+  } catch (e) {
+    return [];
+  }
+}
+
+export function useSlicesTemplates() {
+  const slicesTemplates = useRequest(getSlicesTemplates, []);
+
+  return slicesTemplates;
+}
diff --git a/packages/slice-machine/test/pages/custom-types.test.tsx b/packages/slice-machine/test/pages/custom-types.test.tsx
index 19306de052..d60ab8dca8 100644
--- a/packages/slice-machine/test/pages/custom-types.test.tsx
+++ b/packages/slice-machine/test/pages/custom-types.test.tsx
@@ -28,7 +28,7 @@ describe("Custom Type Builder", () => {
     vi.clearAllMocks();
   });
 
-  beforeEach(async () => {
+  beforeEach(() => {
     mockRouter.setCurrentUrl("/");
   });
 
@@ -125,7 +125,7 @@ describe("Custom Type Builder", () => {
   test("should send a tracking event when the user adds a field", async () => {
     const customTypeId = "a-page";
 
-    Router.push({
+    void Router.push({
       pathname: "custom-types/[customTypeId]",
       query: { customTypeId },
     });
@@ -190,7 +190,7 @@ describe("Custom Type Builder", () => {
       },
     });
 
-    const addButton = screen.getByText("Add a new field");
+    const addButton = await screen.findByText("Add a new field");
     fireEvent.click(addButton);
 
     const richText = screen.getByText("Rich Text");
@@ -201,11 +201,14 @@ describe("Custom Type Builder", () => {
 
     const saveFieldButton = screen.getByText("Add");
 
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(saveFieldButton);
     });
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledOnce();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledWith(
       expect.objectContaining({
         event: "SliceMachine Custom Type Field Added",
@@ -224,7 +227,7 @@ describe("Custom Type Builder", () => {
   test("should send a tracking event when the user adds a slice", async () => {
     const customTypeId = "a-page";
 
-    Router.push({
+    void Router.push({
       pathname: "custom-types/[customTypeId]",
       query: { customTypeId },
     });
@@ -295,26 +298,31 @@ describe("Custom Type Builder", () => {
       },
     });
 
-    const addButton = screen.getAllByText("Update Slices")[0];
-    await act(async () => {
+    const addButton = screen.getByText("Add from libraries");
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(addButton);
     });
 
     const slicesToSelect = screen.getAllByTestId("slicezone-modal-item");
 
     for (const elem of slicesToSelect) {
-      await act(async () => {
+      // eslint-disable-next-line @typescript-eslint/await-thenable
+      await act(() => {
         fireEvent.click(elem);
       });
     }
 
     const saveButton = within(screen.getByRole("dialog")).getByText("Apply");
 
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(saveButton);
     });
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledOnce();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledWith(
       expect.objectContaining({
         event: "SliceMachine Slicezone Updated",
@@ -352,7 +360,7 @@ describe("Custom Type Builder", () => {
 
     const customTypeId = "a-page";
 
-    Router.push({
+    void Router.push({
       pathname: "custom-types/[customTypeId]",
       query: { customTypeId },
     });
@@ -424,11 +432,13 @@ describe("Custom Type Builder", () => {
 
     const saveFieldButton = screen.getByText("Add");
 
-    await act(async () => {
+    act(() => {
       fireEvent.click(saveFieldButton);
     });
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledOnce();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledWith(
       expect.objectContaining({
         event: "SliceMachine Custom Type Field Added",
@@ -445,12 +455,14 @@ describe("Custom Type Builder", () => {
 
     const saveCustomType = screen.getByTestId("builder-save-button");
 
-    await act(async () => {
+    act(() => {
       fireEvent.click(saveCustomType);
     });
 
-    await waitFor(async () => {
+    await waitFor(() => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       expect(SegmentClient.prototype.track).toHaveBeenCalledTimes(2);
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       expect(SegmentClient.prototype.track).toHaveBeenCalledWith(
         expect.objectContaining({
           event: "SliceMachine Custom Type Saved",
@@ -495,7 +507,7 @@ describe("Custom Type Builder", () => {
 
     const customTypeId = "a-page";
 
-    Router.push({
+    void Router.push({
       pathname: "custom-types/[customTypeId]",
       query: { customTypeId },
     });
@@ -561,27 +573,32 @@ describe("Custom Type Builder", () => {
     });
 
     const addButton = screen.getByText("Add a new field");
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(addButton);
     });
 
     const richText = screen.getByText("Rich Text");
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(richText);
     });
 
     const nameInput = screen.getByLabelText("label-input");
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.change(nameInput, { target: { value: "New Field" } });
     });
 
     const saveFieldButton = screen.getByText("Add");
-
-    await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await act(() => {
       fireEvent.click(saveFieldButton);
     });
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledOnce();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledWith(
       expect.objectContaining({
         event: "SliceMachine Custom Type Field Added",
@@ -598,12 +615,13 @@ describe("Custom Type Builder", () => {
 
     const saveCustomType = screen.getByTestId("builder-save-button");
 
-    await act(async () => {
+    act(() => {
       fireEvent.click(saveCustomType);
     });
 
     await new Promise((r) => setTimeout(r, 500));
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(SegmentClient.prototype.track).toHaveBeenCalledOnce();
   });
 });
diff --git a/packages/start-slicemachine/package.json b/packages/start-slicemachine/package.json
index dba804247b..b6ae1414a3 100644
--- a/packages/start-slicemachine/package.json
+++ b/packages/start-slicemachine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "start-slicemachine",
-	"version": "0.11.3",
+	"version": "0.11.4-dev-next-release.7",
 	"description": "Start Slice Machine from within a project.",
 	"repository": {
 		"type": "git",
@@ -41,7 +41,7 @@
 	],
 	"scripts": {
 		"build": "vite build",
-		"dev": "vite build --watch --mode development",
+		"dev": "NODE_ENV=development vite build --watch --mode development",
 		"format": "prettier --write .",
 		"lint": "eslint --max-warnings 0 --ext .js,.ts .",
 		"prepack": "$npm_execpath run build",
diff --git a/packages/start-slicemachine/src/constants.ts b/packages/start-slicemachine/src/constants.ts
index 9441ac21d0..7be8dcc372 100644
--- a/packages/start-slicemachine/src/constants.ts
+++ b/packages/start-slicemachine/src/constants.ts
@@ -1,5 +1,5 @@
 export const SENTRY_EXPRESS_DSN =
-	process.env.SENTRY_EXPRESS_DSN ||
+	import.meta.env.VITE_SENTRY_EXPRESS_DSN ||
 	"https://b673ba8b041d4449a0fb0a38691882dd@o146123.ingest.sentry.io/4504179268845568";
 
 export const SLICE_MACHINE_NPM_PACKAGE_NAME = "slice-machine-ui";
diff --git a/packages/start-slicemachine/src/lib/checkIsSentryEnabled.ts b/packages/start-slicemachine/src/lib/checkIsSentryEnabled.ts
index 63984b620f..d66ffbb694 100644
--- a/packages/start-slicemachine/src/lib/checkIsSentryEnabled.ts
+++ b/packages/start-slicemachine/src/lib/checkIsSentryEnabled.ts
@@ -2,11 +2,11 @@
  * Checks whether or not Sentry is enabled.
  *
  * Sentry is enabled automatically in production but can be disabled by setting
- * `ENABLE_SENTRY` to `false`.
+ * `VITE_ENABLE_SENTRY` to `false`.
  *
  * @returns Whether or not Sentry is enabled.
  */
 export const checkIsSentryEnabled = (): boolean =>
-	process.env.ENABLE_SENTRY === undefined
-		? !["development", "test"].includes(process.env.NODE_ENV ?? "")
-		: process.env.ENABLE_SENTRY === "true";
+	import.meta.env.VITE_ENABLE_SENTRY === undefined
+		? import.meta.env.PROD
+		: import.meta.env.VITE_ENABLE_SENTRY === "true";
diff --git a/packages/start-slicemachine/src/lib/createSliceMachineExpressApp.ts b/packages/start-slicemachine/src/lib/createSliceMachineExpressApp.ts
index 17bfa57e84..fcffb4931f 100644
--- a/packages/start-slicemachine/src/lib/createSliceMachineExpressApp.ts
+++ b/packages/start-slicemachine/src/lib/createSliceMachineExpressApp.ts
@@ -81,7 +81,7 @@ export const createSliceMachineExpressApp = async (
 
 	app.use("/api/t", bodyParser.text({ type: "*/*" }), sentryFrontendTunnel);
 
-	if (process.env.NODE_ENV === "development") {
+	if (import.meta.env.DEV) {
 		app.use(
 			"/",
 			createProxyMiddleware({
diff --git a/packages/start-slicemachine/src/lib/setupSentry.ts b/packages/start-slicemachine/src/lib/setupSentry.ts
index a4d8ef74bd..dec6851aba 100644
--- a/packages/start-slicemachine/src/lib/setupSentry.ts
+++ b/packages/start-slicemachine/src/lib/setupSentry.ts
@@ -32,7 +32,7 @@ export const setupSentry = async (
 		dsn: SENTRY_EXPRESS_DSN,
 		release: sliceMachineVersion,
 		environment: isStableVersion
-			? process.env.NODE_ENV || "production"
+			? import.meta.env.MODE || "production"
 			: "alpha",
 	});
 	if (userProfile) {
diff --git a/yarn.lock b/yarn.lock
index 5b50a18161..62697ceb7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4953,12 +4953,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prismicio/editor-fields@npm:0.4.8":
-  version: 0.4.8
-  resolution: "@prismicio/editor-fields@npm:0.4.8"
+"@prismicio/editor-fields@npm:0.4.9":
+  version: 0.4.9
+  resolution: "@prismicio/editor-fields@npm:0.4.9"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.9.3
-    "@prismicio/editor-support": 0.4.8
+    "@prismicio/editor-support": 0.4.9
     "@prismicio/richtext": 2.1.1
     "@prismicio/types-internal": 2.0.0
     "@tiptap/core": 2.0.3
@@ -4990,16 +4990,16 @@ __metadata:
     uuid: 9.0.0
     zod: 3.21.4
   peerDependencies:
-    "@prismicio/editor-ui": ^0.4.8
+    "@prismicio/editor-ui": ^0.4.9
     react: 18
     react-dom: 18
-  checksum: e4e291309e558146e9e1739258fb28da3a97aadf7b4edad4799341db7d87e154a2d0a8b1c842993552c22ceb3ffd5943f0508359e38c8120cedda02fbefbb9a5
+  checksum: ac4e3c3e27a15ea7a2b9f653fe8f03e1dbfa6d759e657bfd976492cb260809430211b742229294f6ec88a7c761746762b275b0de39333382d8171396547f7667
   languageName: node
   linkType: hard
 
-"@prismicio/editor-support@npm:0.4.8":
-  version: 0.4.8
-  resolution: "@prismicio/editor-support@npm:0.4.8"
+"@prismicio/editor-support@npm:0.4.9":
+  version: 0.4.9
+  resolution: "@prismicio/editor-support@npm:0.4.9"
   dependencies:
     tslib: 2.4.0
   peerDependencies:
@@ -5010,23 +5010,23 @@ __metadata:
       optional: true
     zod:
       optional: true
-  checksum: b3f9d6f5f7aac2f655889d339eb8e3eae3260bca451a6c869a73cd58d242835feb8dd4155b678f293ce1c9fb48591f14c56195e55ef24f4f2190371834bc027c
+  checksum: 70cae8b057d2e8eb8dcf8d584179759dc7d606b035791021bb2701dd3c8000499eeb48a0c375997e784e11f1a1da893f384e2eeafa4805e2539d8508b5b36dcf
   languageName: node
   linkType: hard
 
-"@prismicio/editor-ui@npm:0.4.8":
-  version: 0.4.8
-  resolution: "@prismicio/editor-ui@npm:0.4.8"
+"@prismicio/editor-ui@npm:0.4.9":
+  version: 0.4.9
+  resolution: "@prismicio/editor-ui@npm:0.4.9"
   dependencies:
     "@internationalized/date": 3.1.0
-    "@prismicio/editor-support": 0.4.8
+    "@prismicio/editor-support": 0.4.9
     "@radix-ui/react-dialog": 1.0.2
     "@radix-ui/react-dropdown-menu": 2.0.1
     "@radix-ui/react-label": 2.0.0
     "@radix-ui/react-popover": 1.0.2
     "@radix-ui/react-progress": 1.0.1
     "@radix-ui/react-radio-group": 1.1.0
-    "@radix-ui/react-select": 1.1.2
+    "@radix-ui/react-select": 1.2.2
     "@radix-ui/react-separator": 1.0.1
     "@radix-ui/react-slider": 1.1.0
     "@radix-ui/react-switch": 1.0.1
@@ -5054,7 +5054,7 @@ __metadata:
   peerDependencies:
     react: 17 || 18
     react-dom: 17 || 18
-  checksum: 37ffd50a3ad58c321fe00c17ff593655c47a81929892332c213ab66da1b9afb0f15978aceb09b5a1f42f86420b8f790c05eb1d759cfab2988430f8e09be46476
+  checksum: 98ee16fbf5f903652d8b1d0472109e1b4cebd56d7a7128051abd1d3b40c96d6680ba1c4719c8c02336c5a16e802a4cc46c9b75516c546de796b17dd7a971ee75
   languageName: node
   linkType: hard
 
@@ -5238,6 +5238,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/number@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/number@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: 621ea8b7d4195d1a65a9c0aee918e8335e7f198088eec91577512c89c2ba3a3bab4a767cfb872a2b9c3092a78ff41cad9a924845a939f6bb87fe9356241ea0ea
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/primitive@npm:1.0.0"
@@ -5503,6 +5512,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-scope@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-focus-scope@npm:1.0.1"
@@ -5518,6 +5542,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-callback-ref": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: e5b1a089071fbe77aca11124a4ad9623fc2bcaf4c019759b0cd044bf0878ecc924131ee09c6a22d38a3f094684ef68ed18fa65c8d891918412e0afc685a464e0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-hover-card@npm:1.0.6":
   version: 1.0.6
   resolution: "@radix-ui/react-hover-card@npm:1.0.6"
@@ -5880,35 +5926,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-select@npm:1.1.2":
-  version: 1.1.2
-  resolution: "@radix-ui/react-select@npm:1.1.2"
+"@radix-ui/react-select@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@radix-ui/react-select@npm:1.2.2"
   dependencies:
     "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 1.0.0
-    "@radix-ui/primitive": 1.0.0
-    "@radix-ui/react-collection": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.0
-    "@radix-ui/react-context": 1.0.0
-    "@radix-ui/react-direction": 1.0.0
-    "@radix-ui/react-dismissable-layer": 1.0.2
-    "@radix-ui/react-focus-guards": 1.0.0
-    "@radix-ui/react-focus-scope": 1.0.1
-    "@radix-ui/react-id": 1.0.0
-    "@radix-ui/react-portal": 1.0.1
-    "@radix-ui/react-primitive": 1.0.1
-    "@radix-ui/react-slot": 1.0.1
-    "@radix-ui/react-use-callback-ref": 1.0.0
-    "@radix-ui/react-use-controllable-state": 1.0.0
-    "@radix-ui/react-use-layout-effect": 1.0.0
-    "@radix-ui/react-use-previous": 1.0.0
-    "@radix-ui/react-visually-hidden": 1.0.1
+    "@radix-ui/number": 1.0.1
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-collection": 1.0.3
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-direction": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.4
+    "@radix-ui/react-focus-guards": 1.0.1
+    "@radix-ui/react-focus-scope": 1.0.3
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.2
+    "@radix-ui/react-portal": 1.0.3
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.1
+    "@radix-ui/react-use-previous": 1.0.1
+    "@radix-ui/react-visually-hidden": 1.0.3
     aria-hidden: ^1.1.1
     react-remove-scroll: 2.5.5
   peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
     react: ^16.8 || ^17.0 || ^18.0
     react-dom: ^16.8 || ^17.0 || ^18.0
-  checksum: fc94e08bea0c41f4ef2d2bb1bb9824a321c334fb7dd88f3ea2c8ec4c5f1ebf3bf5e6f75dd1d4227f795987d153707fdb160f0ca83386b868a47609ecf341213a
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: af7b63cc9e2c6006ec08163392d244941e9e03534e7add1b7c5a86059d0eb8a0398d4f3e80d43ff22126874a02b985e44f1722d1de9218922f7aa653d09412e3
   languageName: node
   linkType: hard
 
@@ -6225,6 +6279,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-previous@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-previous@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-rect@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-use-rect@npm:1.0.0"
@@ -6281,19 +6350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-visually-hidden@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-visually-hidden@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.1
-  peerDependencies:
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  checksum: 03e9103c4939b9455ee4614e93e7b12bc9e70397d4a86296526b86f63c35f6ac3555b824aa1bcd325baf3766dfcae5c22c63b3f3b8eada7a327f704e47a6b907
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-visually-hidden@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"
@@ -30409,9 +30465,9 @@ __metadata:
   dependencies:
     "@emotion/react": 11.11.1
     "@extractus/oembed-extractor": 3.1.8
-    "@prismicio/editor-fields": 0.4.8
-    "@prismicio/editor-support": 0.4.8
-    "@prismicio/editor-ui": 0.4.8
+    "@prismicio/editor-fields": 0.4.9
+    "@prismicio/editor-support": 0.4.9
+    "@prismicio/editor-ui": 0.4.9
     "@prismicio/mocks": 2.0.0-alpha.2
     "@prismicio/simulator": 0.1.4
     "@prismicio/types-internal": 2.0.0