diff --git a/.changeset/plain-rings-itch.md b/.changeset/plain-rings-itch.md
new file mode 100644
index 000000000..df28d97fd
--- /dev/null
+++ b/.changeset/plain-rings-itch.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add Month component
diff --git a/docs/src/content/components/Calendar.md b/docs/src/content/components/Calendar.md
index b4a845f96..179d2f8fc 100644
--- a/docs/src/content/components/Calendar.md
+++ b/docs/src/content/components/Calendar.md
@@ -2,39 +2,9 @@
 description: Marking component which highlights specific dates or time periods on a chart to emphasize events, milestones, or temporal patterns.
 category: marks
 layers: [svg, canvas, html]
-related: []
+related: [Month]
 ---
 
 ## Usage
 
 :example{ name="basic" showCode }
-
-<!-- ## Examples
-
-### Responsive cell size (default)
-
-:example{ name="responsive-cell-size-default" showCode }
-
-### Fixed cell size
-
-:example{ name="fixed-cell-size" showCode }
-
-### Multiple Years
-
-:example{ name="multiple-years" showCode }
-
-### Rounded cells
-
-:example{ name="rounded-cells" showCode }
-
-### Html with padding
-
-:example{ name="html-with-padding" showCode }
-
-### Last month
-
-:example{ name="last-month" showCode }
-
-### 90 days
-
-:example{ name="90-days" showCode } -->
diff --git a/docs/src/content/components/Month.md b/docs/src/content/components/Month.md
new file mode 100644
index 000000000..b3be937c7
--- /dev/null
+++ b/docs/src/content/components/Month.md
@@ -0,0 +1,10 @@
+---
+description: Month-based calendar grid visualization for displaying daily data across months with customizable cell sizes, labels, and tooltips.
+category: marks
+layers: [svg, canvas, html]
+related: [Calendar]
+---
+
+## Usage
+
+:example{ name="basic" showCode }
diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json
index fb475f32f..9ee18c199 100644
--- a/docs/src/examples/catalog/Chart.json
+++ b/docs/src/examples/catalog/Chart.json
@@ -2651,6 +2651,48 @@
       "lineNumber": 32,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={200}>"
     },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 22,
+      "line": "<Chart"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 24,
+      "line": "<Chart"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 24,
+      "line": "<Chart"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 22,
+      "line": "<Chart"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 23,
+      "line": "<Chart"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 23,
+      "line": "<Chart"
+    },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
@@ -3933,5 +3975,5 @@
       "line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
     }
   ],
-  "updatedAt": "2026-04-01T13:16:17.567Z"
+  "updatedAt": "2026-04-01T16:49:30.210Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json
index f3ddfffdb..4688fc8a2 100644
--- a/docs/src/examples/catalog/Layer.json
+++ b/docs/src/examples/catalog/Layer.json
@@ -2543,6 +2543,48 @@
       "lineNumber": 33,
       "line": "<Layer>"
     },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 37,
+      "line": "<Layer>"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 39,
+      "line": "<Layer>"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 39,
+      "line": "<Layer>"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 37,
+      "line": "<Layer>"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 38,
+      "line": "<Layer>"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 38,
+      "line": "<Layer>"
+    },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
@@ -3846,5 +3888,5 @@
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-04-01T13:16:18.421Z"
+  "updatedAt": "2026-04-01T16:49:31.366Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Month.json b/docs/src/examples/catalog/Month.json
new file mode 100644
index 000000000..00288ca2b
--- /dev/null
+++ b/docs/src/examples/catalog/Month.json
@@ -0,0 +1,212 @@
+{
+  "component": "Month",
+  "examples": [
+    {
+      "name": "90-days",
+      "title": "90 days",
+      "path": "/docs/components/Month/90-days",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 22,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 37,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 38,
+          "line": "<Month start={ninetyDaysAgo} end={now} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 41,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    },
+    {
+      "name": "basic",
+      "title": "basic",
+      "path": "/docs/components/Month/basic",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 24,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 39,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 40,
+          "line": "<Month start={firstDayOfYear} end={lastDayOfYear} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 43,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    },
+    {
+      "name": "custom-cell-size",
+      "title": "custom cell size",
+      "path": "/docs/components/Month/custom-cell-size",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 24,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 39,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 40,
+          "line": "<Month start={firstDayOfYear} end={lastDayOfYear} cellSize={20} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 43,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    },
+    {
+      "name": "multiple-years",
+      "title": "multiple years",
+      "path": "/docs/components/Month/multiple-years",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 22,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 37,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 38,
+          "line": "<Month start={threeYearsAgo} end={now} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 41,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    },
+    {
+      "name": "without-day-numbers",
+      "title": "without day numbers",
+      "path": "/docs/components/Month/without-day-numbers",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 23,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 38,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 39,
+          "line": "<Month start={firstDayOfYear} end={now} showDayNumber={false} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 42,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    },
+    {
+      "name": "without-month-labels",
+      "title": "without month labels",
+      "path": "/docs/components/Month/without-month-labels",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 23,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 38,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Month",
+          "lineNumber": 39,
+          "line": "<Month start={firstDayOfYear} end={now} showDayNumber={false} monthLabel={false} tooltip />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 42,
+          "line": "<Tooltip.Root>"
+        }
+      ]
+    }
+  ],
+  "usage": [
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 38,
+      "line": "<Month start={ninetyDaysAgo} end={now} tooltip />"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 40,
+      "line": "<Month start={firstDayOfYear} end={lastDayOfYear} tooltip />"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 40,
+      "line": "<Month start={firstDayOfYear} end={lastDayOfYear} cellSize={20} tooltip />"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 38,
+      "line": "<Month start={threeYearsAgo} end={now} tooltip />"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 39,
+      "line": "<Month start={firstDayOfYear} end={now} showDayNumber={false} tooltip />"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 39,
+      "line": "<Month start={firstDayOfYear} end={now} showDayNumber={false} monthLabel={false} tooltip />"
+    }
+  ],
+  "updatedAt": "2026-04-01T16:49:31.660Z"
+}
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Tooltip.json b/docs/src/examples/catalog/Tooltip.json
index 497223ded..61f1b7918 100644
--- a/docs/src/examples/catalog/Tooltip.json
+++ b/docs/src/examples/catalog/Tooltip.json
@@ -5016,6 +5016,174 @@
       "lineNumber": 62,
       "line": "<Tooltip.Item label=\"variance\" value={data.value - data.baseline} />"
     },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 41,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 43,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 46,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "90-days",
+      "component": "Month",
+      "path": "/docs/components/Month/90-days",
+      "lineNumber": 47,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 43,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 45,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 48,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "basic",
+      "component": "Month",
+      "path": "/docs/components/Month/basic",
+      "lineNumber": 49,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 43,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 45,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 48,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "custom-cell-size",
+      "component": "Month",
+      "path": "/docs/components/Month/custom-cell-size",
+      "lineNumber": 49,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 41,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 43,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 46,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "multiple-years",
+      "component": "Month",
+      "path": "/docs/components/Month/multiple-years",
+      "lineNumber": 47,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 42,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 44,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 47,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "without-day-numbers",
+      "component": "Month",
+      "path": "/docs/components/Month/without-day-numbers",
+      "lineNumber": 48,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 42,
+      "line": "<Tooltip.Root>"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 44,
+      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 47,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "without-month-labels",
+      "component": "Month",
+      "path": "/docs/components/Month/without-month-labels",
+      "lineNumber": 48,
+      "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
+    },
     {
       "example": "sunburst",
       "component": "Partition",
@@ -6536,5 +6704,5 @@
       "line": "<Tooltip.Item label=\"Direction\" value={data.angle} format=\"decimal\" />"
     }
   ],
-  "updatedAt": "2026-04-01T13:16:19.842Z"
+  "updatedAt": "2026-04-01T16:49:33.016Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/components/Month/90-days.svelte b/docs/src/examples/components/Month/90-days.svelte
new file mode 100644
index 000000000..b9fc664c3
--- /dev/null
+++ b/docs/src/examples/components/Month/90-days.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { intervalOffset } from '@layerstack/utils';
+
+	const now = new Date();
+	const ninetyDaysAgo = intervalOffset('day', now, -90);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={400}
+	clip
+>
+	<Layer>
+		<Month start={ninetyDaysAgo} end={now} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/src/examples/components/Month/basic.svelte b/docs/src/examples/components/Month/basic.svelte
new file mode 100644
index 000000000..117877a87
--- /dev/null
+++ b/docs/src/examples/components/Month/basic.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { timeYear } from 'd3-time';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { endOfInterval } from '@layerstack/utils';
+
+	const now = new Date();
+	const firstDayOfYear = timeYear.floor(now);
+	const lastDayOfYear = endOfInterval('year', now);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={900}
+	clip
+>
+	<Layer>
+		<Month start={firstDayOfYear} end={lastDayOfYear} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/src/examples/components/Month/custom-cell-size.svelte b/docs/src/examples/components/Month/custom-cell-size.svelte
new file mode 100644
index 000000000..ffaab1537
--- /dev/null
+++ b/docs/src/examples/components/Month/custom-cell-size.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { timeYear } from 'd3-time';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { endOfInterval } from '@layerstack/utils';
+
+	const now = new Date();
+	const firstDayOfYear = timeYear.floor(now);
+	const lastDayOfYear = endOfInterval('year', now);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={600}
+	clip
+>
+	<Layer>
+		<Month start={firstDayOfYear} end={lastDayOfYear} cellSize={20} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/src/examples/components/Month/multiple-years.svelte b/docs/src/examples/components/Month/multiple-years.svelte
new file mode 100644
index 000000000..1a72c5d84
--- /dev/null
+++ b/docs/src/examples/components/Month/multiple-years.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { intervalOffset } from '@layerstack/utils';
+
+	const now = new Date();
+	const threeYearsAgo = intervalOffset('year', now, -3);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={600}
+	clip
+>
+	<Layer>
+		<Month start={threeYearsAgo} end={now} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/src/examples/components/Month/without-day-numbers.svelte b/docs/src/examples/components/Month/without-day-numbers.svelte
new file mode 100644
index 000000000..95ead56ef
--- /dev/null
+++ b/docs/src/examples/components/Month/without-day-numbers.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { timeYear } from 'd3-time';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { endOfInterval } from '@layerstack/utils';
+
+	const now = new Date();
+	const firstDayOfYear = timeYear.floor(now);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={600}
+	clip
+>
+	<Layer>
+		<Month start={firstDayOfYear} end={now} showDayNumber={false} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/src/examples/components/Month/without-month-labels.svelte b/docs/src/examples/components/Month/without-month-labels.svelte
new file mode 100644
index 000000000..d9b97fdd3
--- /dev/null
+++ b/docs/src/examples/components/Month/without-month-labels.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { scaleThreshold } from 'd3-scale';
+	import { timeYear } from 'd3-time';
+	import { Month, Chart, Layer, Tooltip } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { endOfInterval } from '@layerstack/utils';
+
+	const now = new Date();
+	const firstDayOfYear = timeYear.floor(now);
+
+	const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+		(d) => {
+			return {
+				...d,
+				value: Math.random() > 0.2 ? d.value : null
+			};
+		}
+	);
+
+	export { data };
+</script>
+
+<Chart
+	{data}
+	x="date"
+	c="value"
+	cScale={scaleThreshold().unknown('transparent')}
+	cDomain={[25, 50, 75]}
+	cRange={[
+		'var(--color-primary-100)',
+		'var(--color-primary-300)',
+		'var(--color-primary-500)',
+		'var(--color-primary-700)'
+	]}
+	height={600}
+	clip
+>
+	<Layer>
+		<Month start={firstDayOfYear} end={now} showDayNumber={false} monthLabel={false} tooltip />
+	</Layer>
+
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
+
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
+</Chart>
diff --git a/docs/static/screenshots/Month/90-days-dark-240w.webp b/docs/static/screenshots/Month/90-days-dark-240w.webp
new file mode 100644
index 000000000..17d2ae1ee
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/90-days-dark-400w.webp b/docs/static/screenshots/Month/90-days-dark-400w.webp
new file mode 100644
index 000000000..68f63f369
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/90-days-dark-800w.webp b/docs/static/screenshots/Month/90-days-dark-800w.webp
new file mode 100644
index 000000000..279994e12
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/90-days-light-240w.webp b/docs/static/screenshots/Month/90-days-light-240w.webp
new file mode 100644
index 000000000..7beb65747
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/90-days-light-400w.webp b/docs/static/screenshots/Month/90-days-light-400w.webp
new file mode 100644
index 000000000..fd1563e9d
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/90-days-light-800w.webp b/docs/static/screenshots/Month/90-days-light-800w.webp
new file mode 100644
index 000000000..613f315db
Binary files /dev/null and b/docs/static/screenshots/Month/90-days-light-800w.webp differ
diff --git a/docs/static/screenshots/Month/basic-dark-240w.webp b/docs/static/screenshots/Month/basic-dark-240w.webp
new file mode 100644
index 000000000..924a938cc
Binary files /dev/null and b/docs/static/screenshots/Month/basic-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/basic-dark-400w.webp b/docs/static/screenshots/Month/basic-dark-400w.webp
new file mode 100644
index 000000000..b3b6ffdb5
Binary files /dev/null and b/docs/static/screenshots/Month/basic-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/basic-dark-800w.webp b/docs/static/screenshots/Month/basic-dark-800w.webp
new file mode 100644
index 000000000..eb119a320
Binary files /dev/null and b/docs/static/screenshots/Month/basic-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/basic-light-240w.webp b/docs/static/screenshots/Month/basic-light-240w.webp
new file mode 100644
index 000000000..447483f62
Binary files /dev/null and b/docs/static/screenshots/Month/basic-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/basic-light-400w.webp b/docs/static/screenshots/Month/basic-light-400w.webp
new file mode 100644
index 000000000..b998183b9
Binary files /dev/null and b/docs/static/screenshots/Month/basic-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/basic-light-800w.webp b/docs/static/screenshots/Month/basic-light-800w.webp
new file mode 100644
index 000000000..5395f77b7
Binary files /dev/null and b/docs/static/screenshots/Month/basic-light-800w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-dark-240w.webp b/docs/static/screenshots/Month/custom-cell-size-dark-240w.webp
new file mode 100644
index 000000000..68d6cd512
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-dark-400w.webp b/docs/static/screenshots/Month/custom-cell-size-dark-400w.webp
new file mode 100644
index 000000000..e4cbe9759
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-dark-800w.webp b/docs/static/screenshots/Month/custom-cell-size-dark-800w.webp
new file mode 100644
index 000000000..bc045fa36
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-light-240w.webp b/docs/static/screenshots/Month/custom-cell-size-light-240w.webp
new file mode 100644
index 000000000..a30eb8bc9
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-light-400w.webp b/docs/static/screenshots/Month/custom-cell-size-light-400w.webp
new file mode 100644
index 000000000..4b1ee4618
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/custom-cell-size-light-800w.webp b/docs/static/screenshots/Month/custom-cell-size-light-800w.webp
new file mode 100644
index 000000000..594c7955b
Binary files /dev/null and b/docs/static/screenshots/Month/custom-cell-size-light-800w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-dark-240w.webp b/docs/static/screenshots/Month/multiple-years-dark-240w.webp
new file mode 100644
index 000000000..0dfd439ed
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-dark-400w.webp b/docs/static/screenshots/Month/multiple-years-dark-400w.webp
new file mode 100644
index 000000000..7ae0e71bc
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-dark-800w.webp b/docs/static/screenshots/Month/multiple-years-dark-800w.webp
new file mode 100644
index 000000000..b9f30c3f1
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-light-240w.webp b/docs/static/screenshots/Month/multiple-years-light-240w.webp
new file mode 100644
index 000000000..6791b7316
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-light-400w.webp b/docs/static/screenshots/Month/multiple-years-light-400w.webp
new file mode 100644
index 000000000..21d73b075
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/multiple-years-light-800w.webp b/docs/static/screenshots/Month/multiple-years-light-800w.webp
new file mode 100644
index 000000000..2b2524fb6
Binary files /dev/null and b/docs/static/screenshots/Month/multiple-years-light-800w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-dark-240w.webp b/docs/static/screenshots/Month/without-day-numbers-dark-240w.webp
new file mode 100644
index 000000000..d3112a85b
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-dark-400w.webp b/docs/static/screenshots/Month/without-day-numbers-dark-400w.webp
new file mode 100644
index 000000000..edd1c922b
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-dark-800w.webp b/docs/static/screenshots/Month/without-day-numbers-dark-800w.webp
new file mode 100644
index 000000000..b733bab85
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-light-240w.webp b/docs/static/screenshots/Month/without-day-numbers-light-240w.webp
new file mode 100644
index 000000000..19164956b
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-light-400w.webp b/docs/static/screenshots/Month/without-day-numbers-light-400w.webp
new file mode 100644
index 000000000..3498cc3e9
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/without-day-numbers-light-800w.webp b/docs/static/screenshots/Month/without-day-numbers-light-800w.webp
new file mode 100644
index 000000000..fd405fe75
Binary files /dev/null and b/docs/static/screenshots/Month/without-day-numbers-light-800w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-dark-240w.webp b/docs/static/screenshots/Month/without-month-labels-dark-240w.webp
new file mode 100644
index 000000000..cd74e6e06
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-dark-240w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-dark-400w.webp b/docs/static/screenshots/Month/without-month-labels-dark-400w.webp
new file mode 100644
index 000000000..0cd88ffa9
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-dark-400w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-dark-800w.webp b/docs/static/screenshots/Month/without-month-labels-dark-800w.webp
new file mode 100644
index 000000000..7afa14a02
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-dark-800w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-light-240w.webp b/docs/static/screenshots/Month/without-month-labels-light-240w.webp
new file mode 100644
index 000000000..5306f5508
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-light-240w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-light-400w.webp b/docs/static/screenshots/Month/without-month-labels-light-400w.webp
new file mode 100644
index 000000000..ffa2669d2
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-light-400w.webp differ
diff --git a/docs/static/screenshots/Month/without-month-labels-light-800w.webp b/docs/static/screenshots/Month/without-month-labels-light-800w.webp
new file mode 100644
index 000000000..43903d313
Binary files /dev/null and b/docs/static/screenshots/Month/without-month-labels-light-800w.webp differ
diff --git a/docs/static/screenshots/index.json b/docs/static/screenshots/index.json
index f54bf7a50..03b3047bc 100644
--- a/docs/static/screenshots/index.json
+++ b/docs/static/screenshots/index.json
@@ -1,7 +1,7 @@
 {
-  "generatedAt": "2026-04-01T13:16:15.497Z",
-  "totalComponents": 69,
-  "totalExamples": 836,
+  "generatedAt": "2026-04-01T16:49:28.458Z",
+  "totalComponents": 70,
+  "totalExamples": 842,
   "components": [
     {
       "component": "AnnotationLine",
@@ -3193,6 +3193,41 @@
         }
       ]
     },
+    {
+      "component": "Month",
+      "examples": [
+        {
+          "name": "90-days",
+          "path": "/example/Month/90-days",
+          "checksum": "38666db0aab5d41c08d861cab208f820"
+        },
+        {
+          "name": "basic",
+          "path": "/example/Month/basic",
+          "checksum": "451942bc236fb0e36067f3aec4360371"
+        },
+        {
+          "name": "custom-cell-size",
+          "path": "/example/Month/custom-cell-size",
+          "checksum": "5102a5ac4908a56b2def4291fa3b2d1e"
+        },
+        {
+          "name": "multiple-years",
+          "path": "/example/Month/multiple-years",
+          "checksum": "df3e1f9490addbee71b43676e2c387ad"
+        },
+        {
+          "name": "without-day-numbers",
+          "path": "/example/Month/without-day-numbers",
+          "checksum": "571a6e00733e9fece9397384c95048db"
+        },
+        {
+          "name": "without-month-labels",
+          "path": "/example/Month/without-month-labels",
+          "checksum": "aefe9166f2b6b27f1fc19dc6e05a6bd9"
+        }
+      ]
+    },
     {
       "component": "MotionPath",
       "examples": [
@@ -4394,7 +4429,7 @@
         {
           "name": "planet-distances",
           "path": "/example/TransformContext/planet-distances",
-          "checksum": "7a81c9ed3f074c42b54398de7fcfbf74"
+          "checksum": "0b74a5edb63bea832249fda121f81b37"
         },
         {
           "name": "playground",
diff --git a/packages/layerchart/src/lib/components/Month.svelte b/packages/layerchart/src/lib/components/Month.svelte
new file mode 100644
index 000000000..e26b9cab7
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Month.svelte
@@ -0,0 +1,273 @@
+<script lang="ts" module>
+  export type MonthCell = {
+    x: number;
+    y: number;
+    color: any;
+    data: any;
+    date: Date;
+  };
+
+  export type MonthPropsWithoutHTML = {
+    /**
+     * The start date of the calendar.
+     */
+    start: Date;
+
+    /**
+     * The end date of the calendar.
+     */
+    end: Date;
+
+    /**
+     * Size of the cell in the calendar.
+     *
+     * @default 25
+     */
+    cellSize?: number;
+
+    /**
+     * Number of months to display per row. If undefined, automatically calculated based on available width.
+     */
+    monthsPerRow?: number;
+
+    /**
+     * Padding multiplier between months (relative to cellSize).
+     *
+     * @default 1.2
+     */
+    monthPadding?: number;
+
+    /**
+     * Vertical spacing multiplier between month rows (in number of cell heights).
+     *
+     * @default 8
+     */
+    rowSpacing?: number;
+
+    /**
+     * Whether to show the day number in each cell.
+     *
+     * @default true
+     */
+    showDayNumber?: boolean;
+
+    /**
+     * Props to pass to the `<text>` element for month labels.
+     */
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
+
+    /**
+     * Props to pass to the `<text>` element for day numbers.
+     */
+    dayNumberProps?: Partial<ComponentProps<typeof Text>>;
+
+    /**
+     * Setup pointer events to show tooltip for related data
+     */
+    tooltip?: boolean;
+
+    children?: Snippet<[{ cells: MonthCell[]; cellSize: number }]>;
+  } & Omit<
+    RectPropsWithoutHTML,
+    'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
+  >;
+
+  export type MonthProps = MonthPropsWithoutHTML &
+    Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { type ComponentProps, type Snippet } from 'svelte';
+  import { timeDays, timeMonths, timeWeek } from 'd3-time';
+  import { index } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
+  import Group from './Group.svelte';
+  import Text from './Text.svelte';
+  import { chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '$lib/contexts/chart.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { Without } from '$lib/utils/types.js';
+  import { extractLayerProps } from '$lib/utils/attributes.js';
+
+  const DAYS_PER_WEEK = 7;
+
+  let {
+    start,
+    end,
+    cellSize = 25,
+    monthsPerRow: monthsPerRowProp,
+    monthPadding = 1.2,
+    rowSpacing = 8,
+    showDayNumber = true,
+    monthLabel = true,
+    dayNumberProps = {},
+    tooltip,
+    children,
+    ...restProps
+  }: MonthPropsWithoutHTML = $props();
+
+  const ctx = getChartContext();
+
+  const rangeDays = $derived(timeDays(start, end));
+
+  // Space needed for month labels at the top (only if labels are shown)
+  const monthLabelHeight = $derived(monthLabel ? cellSize : 0);
+
+  // Calculate monthsPerRow based on the actual space taken by each month
+  // Each month (except the last in a row) takes: (monthPadding * cellSize * DAYS_PER_WEEK)
+  // The calculation accounts for n-1 padded months plus one unpadded month
+  // Formula: (n-1) * monthPadding * width + width = totalWidth
+  // Solving for n: n = (totalWidth + (monthPadding - 1) * width) / (monthPadding * width)
+  const monthsPerRow = $derived(
+    monthsPerRowProp ??
+      Math.floor(
+        (ctx.width + (monthPadding - 1) * cellSize * DAYS_PER_WEEK) /
+          (monthPadding * cellSize * DAYS_PER_WEEK)
+      )
+  );
+
+  // Generate data indexed by date (using date object as key)
+  const dataByDate = $derived(
+    ctx.data && ctx.config.x ? index(chartDataArray(ctx.data), (d) => ctx.x(d)) : new Map()
+  );
+
+  // Generate cells for the date range
+  const allCells = $derived.by(() => {
+    const cells: MonthCell[] = [];
+    // Create a map of month index to track which months we've seen
+    const monthIndexMap = new Map<string, number>();
+    let currentMonthIndex = 0;
+
+    rangeDays.forEach((day) => {
+      const firstDayOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
+      const monthKey = `${day.getFullYear()}-${day.getMonth()}`;
+
+      // Assign a sequential index to each unique month in the range
+      if (!monthIndexMap.has(monthKey)) {
+        monthIndexMap.set(monthKey, currentMonthIndex);
+        currentMonthIndex++;
+      }
+
+      const monthIndex = monthIndexMap.get(monthKey)!;
+      const cellData = dataByDate.get(day) ?? { date: day };
+
+      const monthCol = monthIndex % monthsPerRow;
+      const monthRow = Math.floor(monthIndex / monthsPerRow);
+
+      const monthPaddingOffset = monthPadding * cellSize * DAYS_PER_WEEK * monthCol;
+      const weekDiff = timeWeek.count(firstDayOfMonth, day);
+
+      cells.push({
+        x: day.getDay() * cellSize + monthPaddingOffset,
+        y: weekDiff * cellSize + monthRow * cellSize * rowSpacing + monthLabelHeight,
+        color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
+        data: cellData,
+        date: day,
+      });
+    });
+
+    return { cells, monthIndexMap };
+  });
+
+  // Generate month labels based on the actual months encountered in the cells
+  const monthLabels = $derived.by(() => {
+    const labels: Array<{ x: number; y: number; text: string }> = [];
+    const monthIndexMap = allCells.monthIndexMap;
+
+    // Convert the map to an array of [monthKey, index] pairs and sort by index
+    const monthEntries = Array.from(monthIndexMap.entries()).sort((a, b) => a[1] - b[1]);
+
+    monthEntries.forEach(([monthKey, index]) => {
+      // Parse the monthKey to get the year and month
+      const [year, month] = monthKey.split('-').map(Number);
+      const firstDayOfMonth = new Date(year, month, 1);
+
+      const monthCol = index % monthsPerRow;
+      const monthRow = Math.floor(index / monthsPerRow);
+
+      const monthPaddingOffset = monthPadding * cellSize * DAYS_PER_WEEK * monthCol;
+
+      labels.push({
+        x: monthPaddingOffset,
+        y: monthRow * cellSize * rowSpacing,
+        text: format(firstDayOfMonth, 'month'),
+      });
+    });
+
+    return labels;
+  });
+</script>
+
+<Group>
+  <!-- Cells -->
+  {#if children}
+    {@render children({ cells: allCells.cells, cellSize })}
+  {:else}
+    {#each allCells.cells as cell}
+      <Rect
+        x={cell.x}
+        y={cell.y}
+        width={cellSize}
+        height={cellSize}
+        fill={cell.color}
+        onpointermove={(e) => tooltip && ctx.tooltip?.show(e, cell.data)}
+        onpointerleave={(e) => tooltip && ctx.tooltip?.hide()}
+        {...extractLayerProps(restProps, 'lc-month-cell')}
+      />
+
+      {#if showDayNumber}
+        <Text
+          x={cell.x + cellSize / 2}
+          y={cell.y + cellSize / 2}
+          lineHeight="0.8em"
+          value={cell.date.getDate()}
+          textAnchor="middle"
+          verticalAnchor="middle"
+          class="lc-month-day-number"
+          {...dayNumberProps}
+        />
+      {/if}
+    {/each}
+  {/if}
+
+  <!-- Month labels -->
+  {#if monthLabel}
+    {#each monthLabels as label}
+      <Text
+        x={label.x}
+        y={label.y}
+        value={label.text}
+        verticalAnchor="start"
+        class="lc-month-month-label"
+        {...extractLayerProps(monthLabel, 'lc-month-month-label')}
+      />
+    {/each}
+  {/if}
+</Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-cell)) {
+      stroke-width: 1;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-month-day-number)) {
+      font-size: 10px;
+      pointer-events: none;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 1px;
+      font-weight: 600;
+    }
+
+    :global(:where(.lc-month-month-label)) {
+      font-size: 16px;
+    }
+  }
+</style>
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index 4f06870f1..eab5af5a1 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -105,6 +105,8 @@ export { default as Link } from './Link.svelte';
 export * from './Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
 export * from './MotionPath.svelte';
+export { default as Month } from './Month.svelte';
+export * from './Month.svelte';
 export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
diff --git a/packages/layerchart/vite.config.js b/packages/layerchart/vite.config.js
index 036b72a67..dc38bfc15 100644
--- a/packages/layerchart/vite.config.js
+++ b/packages/layerchart/vite.config.js
@@ -4,29 +4,6 @@ import { playwright } from '@vitest/browser-playwright';
 
 /** @type {import('vite').UserConfig} */
 const config = defineConfig({
-  // Pre-bundle these dependencies to prevent Vite reload during tests
-  // which causes "Failed to fetch dynamically imported module" errors
-  // Ref: https://github.com/vitest-dev/vitest/issues/5477
-  optimizeDeps: {
-    include: [
-      '@layerstack/tailwind',
-      '@layerstack/utils',
-      '@layerstack/svelte-state',
-      '@layerstack/utils/object',
-      'd3-array',
-      'd3-color',
-      'd3-delaunay',
-      'd3-geo',
-      'd3-geo-voronoi',
-      'd3-interpolate-path',
-      'd3-path',
-      'd3-scale',
-      'd3-shape',
-      'd3-quadtree',
-      'memoize',
-      'runed',
-    ],
-  },
   plugins: [sveltekit()],
   ssr: {
     noExternal: true, // https://github.com/AdrianGonz97/refined-cf-pages-action/issues/26#issuecomment-2878397440