diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte
deleted file mode 100644
index 1122660a..00000000
--- a/docs/src/layouts/Recipe.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script>
-  import {
-    Grid,
-    Row,
-    Column,
-    Content,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-  import { page, metatags } from "@sveltech/routify";
-  import { onMount } from "svelte";
-  import { theme } from "../store";
-
-  export let component = $page.title;
-
-  metatags.title = $page.title;
-
-  onMount(() => {
-    const currentTheme = window.location.search.split("?theme=")[1];
-
-    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
-      theme.set(currentTheme);
-    }
-  });
-</script>
-
-<Content data-components>
-  <Grid>
-    <Row>
-      <Column>
-        <h1>{component}</h1>
-        <div class="bar">
-          <Select
-            id="select-theme"
-            inline
-            labelText="Theme"
-            bind:selected="{$theme}"
-          >
-            <SelectItem value="white" text="White" />
-            <SelectItem value="g10" text="Gray 10" />
-            <SelectItem value="g90" text="Gray 90" />
-            <SelectItem value="g100" text="Gray 100" />
-          </Select>
-        </div>
-      </Column>
-    </Row>
-
-    <Row>
-      <Column class="prose">
-        <div class="toc mobile">
-          <h5>Table of Contents</h5>
-          <slot name="aside" />
-        </div>
-        <slot />
-      </Column>
-    </Row>
-  </Grid>
-
-  <Column class="table" xlg="{4}" lg="{5}">
-    <div class="toc">
-      <h5>Table of Contents</h5>
-      <slot name="aside" />
-    </div>
-  </Column>
-</Content>
-
-<style>
-  .bar {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--cds-layout-02);
-    border-bottom: 1px solid var(--cds-ui-03);
-  }
-
-  .toc h5 {
-    margin-bottom: var(--cds-spacing-03);
-  }
-
-  .toc.mobile {
-    display: none;
-  }
-
-  @media (max-width: 1056px) {
-    .toc.mobile {
-      display: block;
-    }
-  }
-</style>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 672f44a3..44a7e9cb 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -11,7 +11,6 @@
     SkipToContent,
     SideNav,
     SideNavItems,
-    SideNavMenu,
     SideNavMenuItem,
     Tag,
   } from "carbon-components-svelte";
@@ -29,7 +28,6 @@
   $: components = $layout.children.filter(
     (child) => child.title === "components"
   )[0];
-  $: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
 
   $beforeUrlChange(() => {
     if (isMobile) isSideNavOpen = false;
@@ -99,48 +97,33 @@
 
   <SideNav bind:isOpen="{isSideNavOpen}">
     <SideNavItems>
-      <SideNavMenu
-        expanded="{$isActive($url('')) || $isActive($url('/components'))}"
-        text="Components"
-      >
-        {#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
-          <SideNavMenuItem
-            text="{child.title}"
-            href="{$url(child.path)}"
-            isSelected="{$isActive($url(child.path))}"
-          >
-            {child.title}
-            {#if deprecated.includes(child.title)}
-              <Tag
-                size="sm"
-                type="red"
-                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
-              >
-                Deprecated
-              </Tag>
-            {/if}
-            {#if new_components.includes(child.title)}
-              <Tag
-                size="sm"
-                type="green"
-                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
-              >
-                New
-              </Tag>
-            {/if}
-          </SideNavMenuItem>
-        {/each}
-      </SideNavMenu>
-      <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
-        {#each recipes.children as child, i (child.path)}
-          <SideNavMenuItem
-            href="{$url(child.path)}"
-            isSelected="{$isActive($url(child.path))}"
-          >
-            {child.title}
-          </SideNavMenuItem>
-        {/each}
-      </SideNavMenu>
+      {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
+        <SideNavMenuItem
+          text="{child.title}"
+          href="{$url(child.path)}"
+          isSelected="{$isActive($url(child.path))}"
+        >
+          {child.title}
+          {#if deprecated.includes(child.title)}
+            <Tag
+              size="sm"
+              type="red"
+              style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+            >
+              Deprecated
+            </Tag>
+          {/if}
+          {#if new_components.includes(child.title)}
+            <Tag
+              size="sm"
+              type="green"
+              style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+            >
+              New
+            </Tag>
+          {/if}
+        </SideNavMenuItem>
+      {/each}
     </SideNavItems>
   </SideNav>
   <slot />
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 0890d559..c64f0f99 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
-
 ### Default
 
 <Accordion>
@@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
   </AccordionItem>
 </Accordion>
 
+### Programmatic example
+
+This example demonstrates how a list of items can be programmatically expanded and collapsed.
+
+<FileSource src="/framed/Accordion/ExpandableAccordion" />
+
 ### Extra-large size
 
 <Accordion size="xl">
diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index c236dc61..660f9467 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -12,8 +12,6 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
-
 ### Default
 
 <Breadcrumb>
@@ -43,6 +41,10 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
   <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
 </Breadcrumb>
 
+### Breadcrumb trail
+
+<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
+
 ### Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
index ec03614d..3b8ce26e 100644
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -1,5 +1,7 @@
 <script>
-  export let items = [
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  const items = [
     {
       title: "Natural Language Classifier",
       description:
@@ -17,26 +19,17 @@
     },
   ];
 
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
-
   let open = false;
 </script>
 
-<Button
-  kind="ghost"
-  size="field"
-  on:click="{() => {
-    open = !open;
-  }}"
->
+<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
   {open ? "Collapse" : "Expand"}
   all
 </Button>
 
 <Accordion>
   {#each items as item}
-    <AccordionItem open="{open}">
-      <h5 slot="title">{item.title}</h5>
+    <AccordionItem title="{item.title}" open="{open}">
       <p>{item.description}</p>
     </AccordionItem>
   {/each}
diff --git a/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte b/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
index cd77ead9..6a43e299 100644
--- a/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
+++ b/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
@@ -1,32 +1,17 @@
 <script>
-  /**
-   * @type {{ href?: string; text: string; }[]} [items=[]]
-   */
-  export let items = [
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+
+  const items = [
     { href: "/", text: "Dashboard" },
     { href: "/reports", text: "Annual reports" },
     { href: "/reports/2019", text: "2019" },
   ];
-
-  import {
-    Row,
-    Column,
-    Breadcrumb,
-    BreadcrumbItem,
-  } from "carbon-components-svelte";
 </script>
 
-<Row>
-  <Column>
-    <Breadcrumb>
-      {#each items as item, i}
-        <BreadcrumbItem
-          href="{item.href}"
-          isCurrentPage="{i === items.length - 1}"
-        >
-          {item.text}
-        </BreadcrumbItem>
-      {/each}
-    </Breadcrumb>
-  </Column>
-</Row>
+<Breadcrumb>
+  {#each items as item, i}
+    <BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
+      {item.text}
+    </BreadcrumbItem>
+  {/each}
+</Breadcrumb>
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index d439f9f1..94b0cc69 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <Content>
-  <Grid style="margin-bottom: var(--cds-layout-06);">
+  <Grid>
     <Row>
       <Column>
         <h1>Carbon Components Svelte</h1>
diff --git a/docs/src/pages/recipes/Breadcrumbs.svx b/docs/src/pages/recipes/Breadcrumbs.svx
deleted file mode 100644
index d8f7afc0..00000000
--- a/docs/src/pages/recipes/Breadcrumbs.svx
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Breadcrumb trail
-
-<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
diff --git a/docs/src/pages/recipes/ExpandableAccordion.svx b/docs/src/pages/recipes/ExpandableAccordion.svx
deleted file mode 100644
index 09ba3cf0..00000000
--- a/docs/src/pages/recipes/ExpandableAccordion.svx
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Expandable accordion
-
-This example expands and collapses all accordion items.
-
-<FileSource src="/framed/Accordion/ExpandableAccordion" />
diff --git a/docs/src/pages/recipes/TileAspectRatio.svx b/docs/src/pages/recipes/TileAspectRatio.svx
deleted file mode 100644
index 61602f18..00000000
--- a/docs/src/pages/recipes/TileAspectRatio.svx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import { AspectRatio, Tile, Column } from "carbon-components-svelte";
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Tile (16x9 ratio)
-
-<Column lg={8}>
-<AspectRatio ratio="16x9">
-  <Tile style="height: 100%">Content</Tile>
-</AspectRatio>
-</Column>
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index 034e0ec0..ac82385b 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -139,8 +139,6 @@ function carbonify() {
   };
 }
 
-const NODE_ENV = process.env.NODE_ENV || "production";
-
 module.exports = {
   extensions: [".svelte", ".svx"],
   preprocess: [
@@ -159,14 +157,13 @@ module.exports = {
     mdsvex({
       remarkPlugins: [plugin, slug, carbonify],
       layout: {
-        recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
         _: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
       },
     }),
     {
       markup({ content, filename }) {
         if (/node_modules/.test(filename)) return null;
-        if (filename.endsWith(".svx") && filename.match(/pages\/(recipes)/)) {
+        if (filename.endsWith(".svx")) {
           const toc = [];
 
           walk(parse(content), {