diff --git a/.storybook/preview.js b/.storybook/preview.js
index 0ec5f265..5240ac6b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -23,6 +23,8 @@ const preview = {
           ["Theme", "Fonts"],
           "Examples",
           "Components",
+          "Layercake",
+          ["Intro"],
           "Layout",
           "Logos",
           "Maps",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5cf4a346..cfdbf0a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Patch: Update method of declaring Storybook component descriptions and add import instructions to components
 - Patch: Remove description field from top level `meta` object in component `.stories.svelte` files (do not render)
 - Feature: CLI command to generate new component boilerplate (`npm run create-component`)
+- Feature: Add Layercake AxisX and AxisY components and docs
 
 ## v0.10.2
 
diff --git a/src/lib/Layercake/AxisX.docs.md b/src/lib/Layercake/AxisX.docs.md
new file mode 100644
index 00000000..f1b7883a
--- /dev/null
+++ b/src/lib/Layercake/AxisX.docs.md
@@ -0,0 +1,42 @@
+## Usage
+
+```js
+import { AxisX } from "@urbaninstitute/dataviz-components";
+```
+
+## Want to update axis style straight from the Layercake repo?
+
+Use this css instead:
+
+```js
+<style>
+     .tick {
+      font-size: 12px;
+      font-weight: 400;
+      font-family: var(--font-family-sans-serif);
+    }
+    line,
+    .tick line {
+      stroke: #DEDDDD;
+    }
+    .tick text {
+      fill: #000000;
+    }
+    .tick .tick-mark,
+    .baseline {
+      stroke: #000000;
+    }
+    /* This looks slightly better */
+    .axis.snapTicks .tick:last-child text {
+      transform: translateX(3px);
+    }
+    .axis.snapTicks .tick.tick-0 text {
+      transform: translateX(-3px);
+    }
+    .axis-label {
+      font-size: 12px;
+    }
+</style>
+```
+
+## Story
diff --git a/src/lib/Layercake/AxisX.stories.svelte b/src/lib/Layercake/AxisX.stories.svelte
new file mode 100644
index 00000000..27a8d05d
--- /dev/null
+++ b/src/lib/Layercake/AxisX.stories.svelte
@@ -0,0 +1,60 @@
+<script context="module">
+  import AxisX from "./AxisX.svelte";
+  import docs from "./AxisX.docs.md?raw";
+
+  export const meta = {
+    title: "Layercake/AxisX",
+    component: AxisX,
+    tags: ["autodocs"],
+    argTypes: {
+      ticks: {
+        control: {
+          type: "range",
+          min: 1,
+          max: 20
+        },
+      },
+      axisLabel: {
+        control: 'text'
+      },
+    },
+    parameters: {
+      backgrounds: {
+        default: "light",
+        values: [
+          { name: "light", value: "#ffffff" },
+          { name: "dark", value: "#0A4C6A" }
+        ]
+      },
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/Layercake/AxisX.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { LayerCake, Svg } from "layercake";
+  import data from "./data.json";
+
+  const xKey = "value";
+  const yKey = "year";
+</script>
+
+<Template let:args>
+  <div style="height: 150px;">
+    <LayerCake {data} xDomain={[0, 20]} yDomain={[0, 10]} y={yKey} x={xKey}>
+      <Svg>
+        <AxisX {...args} />
+      </Svg>
+    </LayerCake>
+  </div>
+</Template>
+
+<Story name="Default" />
diff --git a/src/lib/Layercake/AxisX.svelte b/src/lib/Layercake/AxisX.svelte
new file mode 100644
index 00000000..5f013209
--- /dev/null
+++ b/src/lib/Layercake/AxisX.svelte
@@ -0,0 +1,146 @@
+<!--
+  @component
+  Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+<script>
+  import { getContext } from "svelte";
+  const { width, height, xScale, yRange } = getContext("LayerCake");
+
+  /** 
+   * Extend lines from the ticks into the chart space
+   * @type {boolean} [gridlines=true] */
+  export let gridlines = false;
+
+  /** 
+   * Show a vertical mark for each tick.
+   * @type {boolean} [tickMarks=false] */
+  export let tickMarks = true;
+
+  /**
+   * Show a solid line at the bottom.
+   * @type {boolean} [baseline=false] */
+  export let baseline = true;
+
+  /** 
+   * Instead of centering the text on the first and the last items, align them to the edges of the chart.
+   * @type {boolean} [snapTicks=false] */
+  export let snapTicks = false;
+
+  /** 
+   * A function that passes the current tick value and expects a nicely formatted value in return.
+   * @type {Function} [formatTick=d => d] */
+  export let formatTick = (d) => d;
+
+  /** 
+   * If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. 
+   * @type {number|Array|Function} [ticks] */
+  export let ticks = undefined;
+
+  /** 
+   * How far over to position the text marker.
+   * @type {number} [xTick=0] */
+  export let xTick = 0;
+
+  /** 
+   * The distance from the baseline to place each tick value.
+   * @type {number} [yTick=16] */
+  export let yTick = 16;
+
+  /** 
+   * An optional label for the y axis
+   * @type {string|null} [axisLabel=null] */
+  export let axisLabel = "";
+
+  $: isBandwidth = typeof $xScale.bandwidth === "function";
+
+  $: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? $xScale.domain()
+      : typeof ticks === "function"
+        ? ticks($xScale.ticks())
+        : $xScale.ticks(ticks);
+
+  function textAnchor(i) {
+    if (snapTicks === true) {
+      if (i === 0) {
+        return "start";
+      }
+      if (i === tickVals.length - 1) {
+        return "end";
+      }
+    }
+    return "middle";
+  }
+</script>
+
+<g class="axis x-axis" class:snapTicks>
+  {#each tickVals as tick, i (tick)}
+    <g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+      {#if gridlines !== false}
+        <line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
+      {/if}
+      {#if tickMarks === true}
+        <line
+          class="tick-mark"
+          y1={0}
+          y2={6}
+          x1={isBandwidth ? $xScale.bandwidth() / 2 : 0}
+          x2={isBandwidth ? $xScale.bandwidth() / 2 : 0}
+        />
+      {/if}
+      <text
+        x={isBandwidth ? $xScale.bandwidth() / 2 + xTick : xTick}
+        y={yTick}
+        dx=""
+        dy=""
+        text-anchor={textAnchor(i)}>{formatTick(tick)}</text
+      >
+    </g>
+  {/each}
+  {#if baseline === true}
+    <line class="baseline" y1={$height + 0.5} y2={$height + 0.5} x1="0" x2={$width} />
+  {/if}
+  {#if axisLabel}
+    <text
+      class="axis-label"
+      x={$width / 2}
+      y={$height + 40}
+      dy="-4"
+      fill={"#000"}
+      text-anchor="middle">{axisLabel}</text
+    >
+  {/if}
+</g>
+
+<style>
+  .tick {
+    font-size: 12px;
+    font-weight: 400;
+    font-family: var(--font-family-sans-serif);
+  }
+
+  line,
+  .tick line {
+    stroke: #dedddd;
+  }
+
+  .tick text {
+    fill: #000000;
+  }
+
+  .tick .tick-mark,
+  .baseline {
+    stroke: #000000;
+  }
+  /* This looks slightly better */
+  .axis.snapTicks .tick:last-child text {
+    transform: translateX(3px);
+  }
+  .axis.snapTicks .tick.tick-0 text {
+    transform: translateX(-3px);
+  }
+  .axis-label {
+    font-size: 12px;
+  }
+</style>
diff --git a/src/lib/Layercake/AxisY.docs.md b/src/lib/Layercake/AxisY.docs.md
new file mode 100644
index 00000000..023ccec3
--- /dev/null
+++ b/src/lib/Layercake/AxisY.docs.md
@@ -0,0 +1,27 @@
+## Usage
+
+```js
+import { AxisY } from "@urbaninstitute/dataviz-components";
+```
+
+## Want to update axis style straight from the Layercake repo?
+
+Use this css instead:
+
+```js
+<style>
+    .tick, .axis-label {
+      font-size: 12px;
+      font-family: var(--font-family-sans-serif);
+    }
+
+    .tick line {
+      stroke: #dedddd;
+    }
+    .tick:first-of-type line {
+      stroke: #000000;
+    }
+</style>
+```
+
+## Story
\ No newline at end of file
diff --git a/src/lib/Layercake/AxisY.stories.svelte b/src/lib/Layercake/AxisY.stories.svelte
new file mode 100644
index 00000000..f0095d7e
--- /dev/null
+++ b/src/lib/Layercake/AxisY.stories.svelte
@@ -0,0 +1,69 @@
+<script context="module">
+  import AxisY from "./AxisY.svelte";
+  import docs from "./AxisY.docs.md?raw";
+
+  export const meta = {
+    title: "Layercake/AxisY",
+    component: AxisY,
+    tags: ["autodocs"],
+    argTypes: {
+      ticks: {
+        control: {
+          type: "range",
+          min: 1,
+          max: 10
+        }
+      },
+      textAnchor: {
+        control: "select",
+        options: ["start", "middle", "end"]
+      },
+      axisLabel: {
+        control: "text"
+      },
+      tickLabelColor: {
+        control: {
+          type: "color"
+        }
+      }
+    },
+    parameters: {
+      backgrounds: {
+        default: "light",
+        values: [
+          { name: "light", value: "#ffffff" },
+          { name: "dark", value: "#0A4C6A" }
+        ]
+      },
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/Layercake/AxisY.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { LayerCake, Svg } from "layercake";
+  import data from "./data.json";
+
+  const xKey = "value";
+  const yKey = "year";
+</script>
+
+<Template let:args>
+  <div style="height: 150px; width:100%;">
+    <LayerCake {data} xDomain={[0, 20]} yDomain={[0, 10]} y={yKey} x={xKey}>
+      <Svg>
+        <AxisY {...args} />
+      </Svg>
+    </LayerCake>
+  </div>
+</Template>
+
+<Story name="Default" />
diff --git a/src/lib/Layercake/AxisY.svelte b/src/lib/Layercake/AxisY.svelte
new file mode 100644
index 00000000..88b13b73
--- /dev/null
+++ b/src/lib/Layercake/AxisY.svelte
@@ -0,0 +1,130 @@
+<!--
+  @component
+  Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+<script>
+  import { getContext } from "svelte";
+
+  const { padding, xRange, yScale, yDomain, xDomain, xScale, width } = getContext("LayerCake");
+
+  /** 
+   * Extend lines from the ticks into the chart space
+   * @type {boolean} [gridlines=true] */
+  export let gridlines = true;
+
+  /** 
+   * Show a vertical mark for each tick.
+   * @type {boolean} [tickMarks=false] */
+  export let tickMarks = false;
+
+  /** 
+   * A function that passes the current tick value and expects a nicely formatted value in return.
+   * @type {Function} [formatTick=d => d] */
+  export let formatTick = (d) => d;
+
+  /** 
+   * If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it"s a function, passes along the default tick values and expects an array of tick values in return.
+   * @type {number|Array|Function} [ticks=4] */
+  export let ticks = 4;
+
+  /**
+   * How far over to position the text marker.
+   *  @type {number} [xTick=0] */
+  export let xTick = 0;
+
+  /** 
+   * How far up and down to position the text marker.
+   * @type {number} [yTick=0] */
+  export let yTick = 0;
+
+  /** 
+   * Any optional value passed to the `dx` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal.
+   * @type {number} [dxTick=-4] */
+  export let dxTick = -4;
+
+  /** 
+   * Any optional value passed to the `dy` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal.
+   * @type {number} [dyTick=0] */
+  export let dyTick = 0;
+
+  /**
+   * The CSS `text-anchor` passed to the label. This is automatically set to "end" if the scale has a bandwidth method, like in ordinal scales.
+   * @type {string} [textAnchor="end"] */
+  export let textAnchor = "end";
+
+  export let tickLabelColor = "#000000";
+
+  /** 
+   * An optional label for the y axis
+   * @type {string|null} [axisLabel=null] */
+  export let axisLabel = "";
+
+  export let labelDx = 0;
+
+  $: isBandwidth = typeof $yScale.bandwidth === "function";
+
+  $: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? $yScale.domain()
+      : typeof ticks === "function"
+        ? ticks($yScale.ticks())
+        : $yScale.ticks(ticks);
+</script>
+
+<g class="axis y-axis" transform="translate({-$padding.left}, 0)">
+  {#each tickVals as tick (tick)}
+    <g
+      class="tick tick-{tick}"
+      transform="translate({$xRange[0] + $padding.left}, {$yScale(tick)})"
+    >
+      {#if gridlines !== false}
+        <line
+          class="gridline"
+          x1={0}
+          x2={$width}
+          y1={isBandwidth ? $yScale.bandwidth() / 2 : 0}
+          y2={isBandwidth ? $yScale.bandwidth() / 2 : 0}
+        />
+      {/if}
+      {#if tickMarks === true}
+        <line
+          class="tick-mark"
+          x1="0"
+          x2={isBandwidth ? -6 : 6}
+          y1={isBandwidth ? $yScale.bandwidth() / 2 : 0}
+          y2={isBandwidth ? $yScale.bandwidth() / 2 : 0}
+        />
+      {/if}
+      <text
+        x={xTick}
+        y={isBandwidth ? $yScale.bandwidth() / 2 + yTick : yTick}
+        dx={isBandwidth ? -9 : dxTick}
+        dy={isBandwidth ? 4 : dyTick}
+        fill={tickLabelColor}
+        style="text-anchor:{isBandwidth ? 'end' : textAnchor}; alignment-baseline:middle;"
+        >{formatTick(tick)}</text
+      >
+    </g>
+  {/each}
+  {#if axisLabel}
+    <text class="axis-label" x={$padding.left} y="0" dy="-8" dx={labelDx} fill={tickLabelColor}
+      >{axisLabel}</text
+    >
+  {/if}
+</g>
+
+<style>
+  .tick,
+  .axis-label {
+    font-size: 12px;
+    font-family: var(--font-family-sans-serif);
+  }
+
+  .tick line {
+    stroke: #dedddd;
+  }
+  .tick:first-of-type line {
+    stroke: #000000;
+  }
+</style>
diff --git a/src/lib/Layercake/Intro.docs.mdx b/src/lib/Layercake/Intro.docs.mdx
new file mode 100644
index 00000000..9dc131db
--- /dev/null
+++ b/src/lib/Layercake/Intro.docs.mdx
@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title = "Layercake/Intro"/>
+
+# Urban-styled Layercake commponents
+
+Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes.
+
+Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters.
+
+## Usage
+
+Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart.
+
+## More on Layercake
+
+Learn more with Layercake <a href="https://layercake.graphics/guide" target="_blank">documentation</a> and <a href="https://layercake.graphics/" target="_blank">examples</a>.
\ No newline at end of file
diff --git a/src/lib/Layercake/data.json b/src/lib/Layercake/data.json
new file mode 100644
index 00000000..c3c512bf
--- /dev/null
+++ b/src/lib/Layercake/data.json
@@ -0,0 +1,8 @@
+[
+  ["year", "value"],
+  [1979, 2],
+  [1980, 3],
+  [1981, 5],
+  [1982, 8],
+  [1983, 18]
+]
diff --git a/src/lib/index.js b/src/lib/index.js
index e03e9159..143b38fb 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -27,3 +27,5 @@ export { default as Headline } from "./Headline/Headline.svelte";
 export { default as PymChild } from "./Pym/PymChild.svelte";
 export { default as LoadingWrapper } from "./LoadingWrapper/LoadingWrapper.svelte";
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
+export { default as AxisY } from "./Layercake/AxisY.svelte";
+export { default as AxisX } from "./Layercake/AxisX.svelte";