diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index b2d8dd74ac2..a98ea872f05 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -55,6 +55,7 @@ import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 import { menuItem, menuItemTokens } from "./custom-theme/menu-item";
 import { panel, panelTokens } from "./custom-theme/panel";
+import { shellPanel, shellPanelTokens } from "./custom-theme/shell-panel";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -147,7 +148,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
       </div>
       <div class="demo-column">
-        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
+        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel} ${shellPanel}
       </div>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
       <div class="demo-column">${menuItem}</div>
@@ -206,6 +207,7 @@ const componentTokens = {
   ...tileTokens,
   ...tooltipTokens,
   ...menuItemTokens,
+  ...shellPanelTokens,
 };
 
 export default {
diff --git a/packages/calcite-components/src/custom-theme/calcite-shell-panel.ts b/packages/calcite-components/src/custom-theme/calcite-shell-panel.ts
deleted file mode 100644
index ebd9526db4d..00000000000
--- a/packages/calcite-components/src/custom-theme/calcite-shell-panel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { html } from "../../support/formatting";
-
-export const sliderTokens = {
-  calciteSliderTextColor: "",
-  calciteSliderTrackColor: "",
-  calciteSliderTrackFillColor: "",
-  calciteSliderHandleFillColor: "",
-  calciteSliderHandleExtensionColor: "",
-  calciteSliderAccentColor: "",
-  calciteSliderTickColor: "",
-  calciteSliderTickBorderColor: "",
-  calciteSliderTickSelectedColor: "",
-  calciteSliderGraphColor: "",
-};
-
-export const slider = html`<calcite-slider
-  min="0"
-  max="100"
-  min-value="50"
-  max-value="85"
-  step="1"
-  min-label="Temperature range (lower)"
-  max-label="Temperature range (upper)"
-  precise
-></calcite-slider>`;
diff --git a/packages/calcite-components/src/custom-theme/shell-panel.ts b/packages/calcite-components/src/custom-theme/shell-panel.ts
new file mode 100644
index 00000000000..faa1a23191d
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/shell-panel.ts
@@ -0,0 +1,31 @@
+import { html } from "../../support/formatting";
+
+export const shellPanelTokens = {
+  calciteShellPanelWidth: "",
+  calciteShellPanelMaxWidth: "",
+  calciteShellPanelMinWidth: "",
+  calciteShellPanelHeight: "",
+  calciteShellPanelMaxHeight: "",
+  calciteShellPanelMinHeight: "",
+  calciteShellPanelZIndex: "",
+  calciteShellPanelBorderColor: "",
+  calciteShellPanelCornerRadius: "",
+  calciteShellPanelShadow: "",
+};
+
+export const shellPanel = html`<calcite-shell-panel
+  ><calcite-panel heading="Panel Heading" description="Panel description" closable collapsible>
+    <calcite-action text="Action 1" text-enabled icon="icon1" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 2" text-enabled icon="icon2" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 3" icon="icon3" slot="header-actions-end"></calcite-action>
+    <div slot="content-top">Content at the top</div>
+    <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+      <calcite-checkbox></calcite-checkbox>Agree to terms
+    </calcite-label>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
+      dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
+    </p>
+    <calcite-button slot="footer-end">Done</calcite-button>
+  </calcite-panel>
+</calcite-shell-panel>`;