diff --git a/packages/calcite-components/.storybook/placeholderImage.ts b/packages/calcite-components/.storybook/placeholder-image.ts
similarity index 100%
rename from packages/calcite-components/.storybook/placeholderImage.ts
rename to packages/calcite-components/.storybook/placeholder-image.ts
diff --git a/packages/calcite-components/src/components/avatar/avatar.e2e.ts b/packages/calcite-components/src/components/avatar/avatar.e2e.ts
index f42dcbf6e4f..6e6dda32bae 100644
--- a/packages/calcite-components/src/components/avatar/avatar.e2e.ts
+++ b/packages/calcite-components/src/components/avatar/avatar.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts
index 52d736c0fef..080994a0aff 100644
--- a/packages/calcite-components/src/components/card/card.e2e.ts
+++ b/packages/calcite-components/src/components/card/card.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 18d0953e8ec..dd1597dbefa 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -1,6 +1,6 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index b8a1af288d8..61c486e2bf8 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -1,88 +1,65 @@
-import { placeholderImage } from "../.storybook/placeholderImage";
+import { accordion } from "./custom-theme/accordion";
+import { buttons } from "./custom-theme/button";
+import { card, cardTokens } from "./custom-theme/card";
+import { checkbox } from "./custom-theme/checkbox";
+import { chips } from "./custom-theme/chips";
+import { datePicker } from "./custom-theme/date-picker";
+import { dropdown } from "./custom-theme/dropdown";
+import { icon } from "./custom-theme/icon";
+import { loader } from "./custom-theme/loader";
+import { notices } from "./custom-theme/notice";
+import { pagination } from "./custom-theme/pagination";
+import { segmentedControl } from "./custom-theme/segmented-control";
+import { slider } from "./custom-theme/slider";
+import { calciteSwitch } from "./custom-theme/switch";
+import { tabs } from "./custom-theme/tabs";
 
-interface CustomThemeArgs {
-  calciteColorBrand: string;
-  calciteColorBrandHover: string;
-  calciteColorBrandPress: string;
-  calciteColorStatusInfo: string;
-  calciteColorStatusSuccess: string;
-  calciteColorStatusWarning: string;
-  calciteColorStatusDanger: string;
-  calciteColorStatusDangerHover: string;
-  calciteColorStatusDangerPress: string;
-  calciteColorBackground: string;
-  calciteColorForeground1: string;
-  calciteColorForeground2: string;
-  calciteColorForeground3: string;
-  calciteColorText1: string;
-  calciteColorText2: string;
-  calciteColorText3: string;
-  calciteColorTextInverse: string;
-  calciteColorTextLink: string;
-  calciteColorBorder1: string;
-  calciteColorBorder2: string;
-  calciteColorBorder3: string;
-  calciteColorBorderInput: string;
-  calciteUiIconColor: string;
+const globalTokens = {
+  calciteColorBrand: "#007ac2",
+  calciteColorBrandHover: "#00619b",
+  calciteColorBrandPress: "#004874",
+  calciteColorStatusInfo: "#00619b",
+  calciteColorStatusSuccess: "#35ac46",
+  calciteColorStatusWarning: "#edd317",
+  calciteColorStatusDanger: "#d83020",
+  calciteColorStatusDangerHover: "#a82b1e",
+  calciteColorStatusDangerPress: "#7c1d13",
+  calciteColorBackground: "#f8f8f8",
+  calciteColorForeground1: "#ffffff",
+  calciteColorForeground2: "#f3f3f3",
+  calciteColorForeground3: "#eaeaea",
+  calciteColorText1: "#151515",
+  calciteColorText2: "#4a4a4a",
+  calciteColorText3: "#6a6a6a",
+  calciteColorTextInverse: "#ffffff",
+  calciteColorTextLink: "#00619b",
+  calciteColorBorder1: "#cacaca",
+  calciteColorBorder2: "#d4d4d4",
+  calciteColorBorder3: "#dfdfdf",
+  calciteColorBorderInput: "#949494",
+  calciteUiIconColor: "currentColor",
+};
+
+function convertToParamCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+function addTokens(args) {
+  return Object.entries(args)
+    .map(([tokenName, tokenValue]) =>
+      !!tokenValue && tokenValue !== "" ? `--${convertToParamCase(tokenName)}: ${tokenValue};` : null,
+    )
+    .filter((token) => token)
+    .join("");
 }
 
 export default {
   title: "Theming/Custom Theme",
-  args: {
-    calciteColorBrand: "#007ac2",
-    calciteColorBrandHover: "#00619b",
-    calciteColorBrandPress: "#004874",
-    calciteColorStatusInfo: "#00619b",
-    calciteColorStatusSuccess: "#35ac46",
-    calciteColorStatusWarning: "#edd317",
-    calciteColorStatusDanger: "#d83020",
-    calciteColorStatusDangerHover: "#a82b1e",
-    calciteColorStatusDangerPress: "#7c1d13",
-    calciteColorBackground: "#f8f8f8",
-    calciteColorForeground1: "#ffffff",
-    calciteColorForeground2: "#f3f3f3",
-    calciteColorForeground3: "#eaeaea",
-    calciteColorText1: "#151515",
-    calciteColorText2: "#4a4a4a",
-    calciteColorText3: "#6a6a6a",
-    calciteColorTextInverse: "#ffffff",
-    calciteColorTextLink: "#00619b",
-    calciteColorBorder1: "#cacaca",
-    calciteColorBorder2: "#d4d4d4",
-    calciteColorBorder3: "#dfdfdf",
-    calciteColorBorderInput: "#949494",
-    calciteUiIconColor: "currentColor",
-  },
+  args: { ...globalTokens, ...cardTokens },
 };
 
-export const themingInteractive = (args: CustomThemeArgs): string => {
-  return `<div
-    style="
-      --calcite-color-brand: ${args.calciteColorBrand};
-      --calcite-color-brand-hover: ${args.calciteColorBrandHover};
-      --calcite-color-brand-press: ${args.calciteColorBrandPress};
-      --calcite-color-status-info: ${args.calciteColorStatusInfo};
-      --calcite-color-status-success: ${args.calciteColorStatusSuccess};
-      --calcite-color-status-warning: ${args.calciteColorStatusWarning};
-      --calcite-color-status-danger: ${args.calciteColorStatusDanger};
-      --calcite-color-status-danger-hover: ${args.calciteColorStatusDangerHover};
-      --calcite-color-status-danger-press: ${args.calciteColorStatusDangerPress};
-      --calcite-color-background: ${args.calciteColorBackground};
-      --calcite-color-foreground-1: ${args.calciteColorForeground1};
-      --calcite-color-foreground-2: ${args.calciteColorForeground2};
-      --calcite-color-foreground-3: ${args.calciteColorForeground3};
-      --calcite-color-text-1: ${args.calciteColorText1};
-      --calcite-color-text-2: ${args.calciteColorText2};
-      --calcite-color-text-3: ${args.calciteColorText3};
-      --calcite-color-text-inverse: ${args.calciteColorTextInverse};
-      --calcite-color-text-link: ${args.calciteColorTextLink};
-      --calcite-color-border-1: ${args.calciteColorBorder1};
-      --calcite-color-border-2: ${args.calciteColorBorder2};
-      --calcite-color-border-3: ${args.calciteColorBorder3};
-      --calcite-color-border-input: ${args.calciteColorBorderInput};
-      --calcite-ui-icon-color: ${args.calciteUiIconColor};
-    "
-  >
+export const themingInteractive = (args: Record<string, string>): string => {
+  return `<div style="${addTokens(args)}">
     <style>
       .demo {
         display: flex;
@@ -101,141 +78,31 @@ export const themingInteractive = (args: CustomThemeArgs): string => {
     </style>
     <div class="demo">
       <div class="demo-column">
-        <calcite-accordion>
-          <calcite-accordion-item heading="Accordion Item"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 2"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 3"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 4"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 5" expanded>
-            <calcite-tree lines>
-              <calcite-tree-item>
-                Child 1
-              </calcite-tree-item>
-              <calcite-tree-item>
-                Child 2
-                <calcite-tree slot="children">
-                  <calcite-tree-item>
-                    Grandchild 1
-                  </calcite-tree-item>
-                  <calcite-tree-item>
-                    Grandchild 2
-                    <calcite-tree slot="children">
-                      <calcite-tree-item>
-                        Great-Grandchild 1
-                      </calcite-tree-item>
-                      <calcite-tree-item>
-                        Great-Grandchild 2
-                      </calcite-tree-item>
-                    </calcite-tree>
-                  </calcite-tree-item>
-                </calcite-tree>
-              </calcite-tree-item>
-              <calcite-tree-item>
-                Child 3
-              </calcite-tree-item>
-            </calcite-tree>
-          </calcite-accordion-item>
-        </calcite-accordion>
-        <calcite-notice kind="danger" scale="s" open>
-          <div slot="title">Something failed</div>
-          <div slot="message">
-            There was an error while performing the task.
-          </div>
-          <calcite-link slot="link" title="my action">Retry</calcite-link>
-        </calcite-notice>
-        <calcite-notice icon kind="success" scale="s" open closable>
-          <div slot="title">Something worked</div>
-          <div slot="message">
-            That thing you wanted to do worked as expected
-          </div>
-        </calcite-notice>
-        <calcite-label>
-          Segmented Control
-          <calcite-segmented-control>
-            <calcite-segmented-control-item value="react" checked>React</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="ember">Ember</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="angular">Angular</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="vue">Vue</calcite-segmented-control-item>
-          </calcite-segmented-control>
-        </calcite-label>
-        <calcite-icon icon="3d-glasses"></calcite-icon>
+        ${accordion}
+        ${notices}
+        ${segmentedControl}
+        ${icon}
       </div>
       <div class="demo-column">
         <div>
-          <calcite-card selected selectable>
-            <img
-              alt="thumbnail"
-              slot="thumbnail"
-              style="width:260px"
-              src="${placeholderImage({ width: 260, height: 160 })}"
-            />
-            <h3 slot="title">Selectable card</h3>
-            <calcite-link slot="footer-start">Lead füt</calcite-link>
-            <calcite-link slot="footer-end">Trail füt</calcite-link>
-          </calcite-card>
-        </div>
-        <div>
-          <calcite-dropdown>
-            <calcite-button slot="trigger">Primary</calcite-button>
-            <calcite-dropdown-group group-title="View">
-              <calcite-dropdown-item icon-start="list-bullet" selected>List</calcite-dropdown-item>
-              <calcite-dropdown-item icon-start="grid">Grid</calcite-dropdown-item>
-              <calcite-dropdown-item icon-start="table">Table</calcite-dropdown-item>
-            </calcite-dropdown-group>
-          </calcite-dropdown>
-          <calcite-button appearance="outline">Outline</calcite-button>
-          <calcite-button kind="danger">Red</calcite-button>
-        </div>
-        <div>
-          <label>
-            <calcite-checkbox indeterminate></calcite-checkbox>
-            Initially indeterminate and unchecked
-          </label>
+          ${card}
         </div>
         <div>
-          <calcite-chip>Neutral</calcite-chip>
-          <calcite-chip kind="inverse">Inverse</calcite-chip>
-          <calcite-chip kind="brand">Brand</calcite-chip>
+          ${dropdown}
+          ${buttons}
         </div>
         <div>
-          <calcite-chip appearance="transparent">Neutral</calcite-chip>
-          <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
-          <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+          ${checkbox}
         </div>
-        <calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>
-        <calcite-slider
-          min="0"
-          max="100"
-          min-value="50"
-          max-value="85"
-          step="1"
-          min-label="Temperature range (lower)"
-          max-label="Temperature range (upper)"
-        ></calcite-slider>
+        ${chips}
+        ${pagination}
+        ${slider}
       </div>
       <div class="demo-column">
-        <calcite-date-picker scale="m" value="2020-11-27"></calcite-date-picker>
-        <calcite-tabs>
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-        </calcite-tabs>
-        <calcite-loader class="chromatic-ignore"></calcite-loader>
-        <label>
-          <calcite-switch scale="m" checked> </calcite-switch>
-          Red switch scale medium
-        </label>
+        ${datePicker}
+        ${tabs}
+        ${loader}
+        ${calciteSwitch}
       </div>
     </div>
   </div>`;
diff --git a/packages/calcite-components/src/custom-theme/accordion-item.ts b/packages/calcite-components/src/custom-theme/accordion-item.ts
new file mode 100644
index 00000000000..e58ecb4f60b
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/accordion-item.ts
@@ -0,0 +1,7 @@
+import { placeholderImage } from "../../.storybook/placeholder-image";
+import { html } from "../../support/formatting";
+
+export const accordionItem = (idx: number): string =>
+  html`<calcite-accordion-item heading="${idx === 0 ? "Accordion Item" : `Accordion Item ${idx + 1}`}"
+    ><img src="${placeholderImage({ width: 300, height: 200 })}" />
+  </calcite-accordion-item>`;
diff --git a/packages/calcite-components/src/custom-theme/accordion.ts b/packages/calcite-components/src/custom-theme/accordion.ts
new file mode 100644
index 00000000000..f3af009055a
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/accordion.ts
@@ -0,0 +1,8 @@
+import { html } from "../../support/formatting";
+import { accordionItem } from "./accordion-item";
+import { tree } from "./tree";
+
+export const accordion = html`<calcite-accordion>
+  ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))}
+  <calcite-accordion-item heading="Accordion Item 5" expanded>${tree}</calcite-accordion-item>
+</calcite-accordion>`;
diff --git a/packages/calcite-components/src/custom-theme/button.ts b/packages/calcite-components/src/custom-theme/button.ts
new file mode 100644
index 00000000000..d31a667698e
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/button.ts
@@ -0,0 +1,17 @@
+import { html } from "../../support/formatting";
+
+const buttonProps: [args: string, content: string] = ["", ""];
+
+export const button = (props: { kind?: string; appearance?: string }): string => {
+  const [buttonArgs, content] = Object.entries(props)
+    .filter(([key, value]) => key && value && value !== "")
+    .reduce(([args, content], [key, value]) => {
+      args += `${key}="${value}" `;
+      content += `${value} `;
+      return [args, content];
+    }, buttonProps);
+
+  return html`<calcite-button ${buttonArgs.trim()}>${content.trim()}</calcite-button>`;
+};
+
+export const buttons = html`${button({ appearance: "outline" })} ${button({ kind: "danger" })}`;
diff --git a/packages/calcite-components/src/custom-theme/card.ts b/packages/calcite-components/src/custom-theme/card.ts
new file mode 100644
index 00000000000..5f7b9fa0e99
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/card.ts
@@ -0,0 +1,19 @@
+import { placeholderImage } from "../../.storybook/placeholder-image";
+import { html } from "../../support/formatting";
+
+export const cardTokens = {
+  calciteCardAccentColorSelected: "",
+  calciteCardBackgroundColor: "",
+  calciteCardBorderColor: "",
+  calciteCardSelectIndicatorColorHover: "",
+  calciteCardSelectIndicatorColor: "",
+  calciteCardCornerRadius: "",
+  calciteCardShadow: "",
+};
+
+export const card = html`<calcite-card selected selectable>
+  <img alt="thumbnail" slot="thumbnail" style="width:260px" src="${placeholderImage({ width: 260, height: 160 })}" />
+  <h3 slot="title">Selectable card</h3>
+  <calcite-link slot="footer-start">Lead füt</calcite-link>
+  <calcite-link slot="footer-end">Trail füt</calcite-link>
+</calcite-card>`;
diff --git a/packages/calcite-components/src/custom-theme/checkbox.ts b/packages/calcite-components/src/custom-theme/checkbox.ts
new file mode 100644
index 00000000000..80443bf2afd
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/checkbox.ts
@@ -0,0 +1,6 @@
+import { html } from "../../support/formatting";
+
+export const checkbox = html`<label>
+  <calcite-checkbox indeterminate></calcite-checkbox>
+  Initially indeterminate and unchecked
+</label>`;
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
new file mode 100644
index 00000000000..d51857fc62e
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const chips = html`<div>
+    <calcite-chip>Neutral</calcite-chip>
+    <calcite-chip kind="inverse">Inverse</calcite-chip>
+    <calcite-chip kind="brand">Brand</calcite-chip>
+  </div>
+  <div>
+    <calcite-chip appearance="transparent">Neutral</calcite-chip>
+    <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+  </div>`;
diff --git a/packages/calcite-components/src/custom-theme/date-picker.ts b/packages/calcite-components/src/custom-theme/date-picker.ts
new file mode 100644
index 00000000000..8cdcb71fe2f
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/date-picker.ts
@@ -0,0 +1,3 @@
+import { html } from "../../support/formatting";
+
+export const datePicker = html`<calcite-date-picker scale="m" value="2020-11-27"></calcite-date-picker>`;
diff --git a/packages/calcite-components/src/custom-theme/dropdown.ts b/packages/calcite-components/src/custom-theme/dropdown.ts
new file mode 100644
index 00000000000..b1321acf630
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/dropdown.ts
@@ -0,0 +1,10 @@
+import { html } from "../../support/formatting";
+
+export const dropdown = html`<calcite-dropdown>
+  <calcite-button slot="trigger">Primary</calcite-button>
+  <calcite-dropdown-group group-title="View">
+    <calcite-dropdown-item icon-start="list-bullet" selected>List</calcite-dropdown-item>
+    <calcite-dropdown-item icon-start="grid">Grid</calcite-dropdown-item>
+    <calcite-dropdown-item icon-start="table">Table</calcite-dropdown-item>
+  </calcite-dropdown-group>
+</calcite-dropdown>`;
diff --git a/packages/calcite-components/src/custom-theme/icon.ts b/packages/calcite-components/src/custom-theme/icon.ts
new file mode 100644
index 00000000000..67e6de07a12
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/icon.ts
@@ -0,0 +1,3 @@
+import { html } from "../../support/formatting";
+
+export const icon = html`<calcite-icon icon="3d-glasses"></calcite-icon>`;
diff --git a/packages/calcite-components/src/custom-theme/loader.ts b/packages/calcite-components/src/custom-theme/loader.ts
new file mode 100644
index 00000000000..8daef2b4f96
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/loader.ts
@@ -0,0 +1,3 @@
+import { html } from "../../support/formatting";
+
+export const loader = html`<calcite-loader class="chromatic-ignore"></calcite-loader>`;
diff --git a/packages/calcite-components/src/custom-theme/notice.ts b/packages/calcite-components/src/custom-theme/notice.ts
new file mode 100644
index 00000000000..e59eb3f3810
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/notice.ts
@@ -0,0 +1,19 @@
+import { html } from "../../support/formatting";
+
+export const notice = ({ kind, message, title }: { kind: string; message: string; title: string }): string =>
+  html`<calcite-notice kind=${kind} scale="s" open closable>
+    <div slot="title">${title}</div>
+    <div slot="message">${message}</div>
+    ${kind === "danger" ? html`<calcite-link slot="link" title="my action">Retry</calcite-link>` : null}
+  </calcite-notice>`;
+
+export const notices = html`${notice({
+  kind: "danger",
+  message: "There was an error while performing the task.",
+  title: "Something failed",
+})}
+${notice({
+  kind: "success",
+  message: "That thing you wanted to do worked as expected",
+  title: "Something worked",
+})}`;
diff --git a/packages/calcite-components/src/custom-theme/pagination.ts b/packages/calcite-components/src/custom-theme/pagination.ts
new file mode 100644
index 00000000000..4b147c9e794
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/pagination.ts
@@ -0,0 +1,7 @@
+import { html } from "../../support/formatting";
+
+export const pagination = html`<calcite-pagination
+  total-items="1200"
+  page-size="100"
+  start-item="1"
+></calcite-pagination>`;
diff --git a/packages/calcite-components/src/custom-theme/segmented-control.ts b/packages/calcite-components/src/custom-theme/segmented-control.ts
new file mode 100644
index 00000000000..72aa38b76e6
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/segmented-control.ts
@@ -0,0 +1,11 @@
+import { html } from "../../support/formatting";
+
+export const segmentedControl = html`<calcite-label>
+  Segmented Control
+  <calcite-segmented-control>
+    <calcite-segmented-control-item value="react" checked>React</calcite-segmented-control-item>
+    <calcite-segmented-control-item value="ember">Ember</calcite-segmented-control-item>
+    <calcite-segmented-control-item value="angular">Angular</calcite-segmented-control-item>
+    <calcite-segmented-control-item value="vue">Vue</calcite-segmented-control-item> </calcite-segmented-control
+  ><calcite-label></calcite-label
+></calcite-label>`;
diff --git a/packages/calcite-components/src/custom-theme/slider.ts b/packages/calcite-components/src/custom-theme/slider.ts
new file mode 100644
index 00000000000..20c4636141a
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/slider.ts
@@ -0,0 +1,11 @@
+import { html } from "../../support/formatting";
+
+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)"
+></calcite-slider>`;
diff --git a/packages/calcite-components/src/custom-theme/switch.ts b/packages/calcite-components/src/custom-theme/switch.ts
new file mode 100644
index 00000000000..2293379f7ef
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/switch.ts
@@ -0,0 +1,6 @@
+import { html } from "../../support/formatting";
+
+export const calciteSwitch = html`<label>
+  <calcite-switch scale="m" checked> </calcite-switch>
+  Red switch scale medium
+</label>`;
diff --git a/packages/calcite-components/src/custom-theme/tabs.ts b/packages/calcite-components/src/custom-theme/tabs.ts
new file mode 100644
index 00000000000..ff61b2d6c1e
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/tabs.ts
@@ -0,0 +1,10 @@
+import { html } from "../../support/formatting";
+
+export const tabs = html`<calcite-tabs>
+  <calcite-tab-nav slot="title-group">
+    <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+  </calcite-tab-nav>
+</calcite-tabs>`;
diff --git a/packages/calcite-components/src/custom-theme/tree.ts b/packages/calcite-components/src/custom-theme/tree.ts
new file mode 100644
index 00000000000..bd9e4d8f9e6
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/tree.ts
@@ -0,0 +1,19 @@
+import { html } from "../../support/formatting";
+
+export const tree = html`<calcite-tree lines>
+  <calcite-tree-item> Child 1 </calcite-tree-item>
+  <calcite-tree-item>
+    Child 2
+    <calcite-tree slot="children">
+      <calcite-tree-item> Grandchild 1 </calcite-tree-item>
+      <calcite-tree-item>
+        Grandchild 2
+        <calcite-tree slot="children">
+          <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
+          <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
+        </calcite-tree>
+      </calcite-tree-item>
+    </calcite-tree>
+  </calcite-tree-item>
+  <calcite-tree-item> Child 3 </calcite-tree-item>
+</calcite-tree>`;