diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf4b238..28b10d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Next
 - Add MMM format to allow short month names (@peterbell215)
+- Add date-fns 3 support
 
 ## 2.12.0 - 2024 Apr 9
 - Disable autocomplete for date input (@gianarb)
diff --git a/package-lock.json b/package-lock.json
index 7e38670..3a4048a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
 				"@typescript-eslint/eslint-plugin": "^7.10.0",
 				"@typescript-eslint/parser": "^7.10.0",
 				"@vitest/coverage-v8": "^1.6.0",
-				"date-fns": "^2.30.0",
+				"date-fns": "^3.6.0",
 				"eslint": "^8.57.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.39.0",
@@ -81,19 +81,6 @@
 				"node": ">=6.0.0"
 			}
 		},
-		"node_modules/@babel/runtime": {
-			"version": "7.24.5",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
-			"integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"regenerator-runtime": "^0.14.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
 		"node_modules/@babel/types": {
 			"version": "7.24.5",
 			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
@@ -1854,20 +1841,14 @@
 			}
 		},
 		"node_modules/date-fns": {
-			"version": "2.30.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+			"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
 			"dev": true,
 			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.21.0"
-			},
-			"engines": {
-				"node": ">=0.11"
-			},
 			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/date-fns"
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
 		"node_modules/debug": {
@@ -3741,13 +3722,6 @@
 				"node": ">=8.10.0"
 			}
 		},
-		"node_modules/regenerator-runtime": {
-			"version": "0.14.1",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
diff --git a/package.json b/package.json
index cfdaf9e..5d371e5 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
 		"@typescript-eslint/eslint-plugin": "^7.10.0",
 		"@typescript-eslint/parser": "^7.10.0",
 		"@vitest/coverage-v8": "^1.6.0",
-		"date-fns": "^2.30.0",
+		"date-fns": "^3.6.0",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.39.0",
diff --git a/src/lib/locale.ts b/src/lib/locale.ts
index f741555..92eda9e 100644
--- a/src/lib/locale.ts
+++ b/src/lib/locale.ts
@@ -55,13 +55,16 @@ export function getInnerLocale(locale: Locale): InnerLocale {
 	return innerLocale
 }
 
+type Month = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
+type Day = 0 | 1 | 2 | 3 | 4 | 5 | 6
+type LocaleWidth = 'short' | 'wide' | 'abbreviated' | 'narrow' | 'any'
 type DateFnsLocale = {
 	options?: {
 		weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	}
 	localize?: {
-		month: (n: number, options?: { width?: string }) => string
-		day: (i: number, options?: { width?: string }) => string
+		month: (n: Month, options?: { width?: LocaleWidth }) => string
+		day: (i: Day, options?: { width?: LocaleWidth }) => string
 	}
 }
 /** Create a Locale from a date-fns locale */
@@ -73,12 +76,12 @@ export function localeFromDateFnsLocale(dateFnsLocale: DateFnsLocale): InnerLoca
 	if (dateFnsLocale.localize) {
 		for (let i = 0; i < 7; i++) {
 			// widths: narrow, short, abbreviated, wide, any
-			locale.weekdays[i] = dateFnsLocale.localize.day(i, { width: 'short' })
+			locale.weekdays[i] = dateFnsLocale.localize.day(i as Day, { width: 'short' })
 		}
 
 		for (let i = 0; i < 12; i++) {
-			locale.months[i] = dateFnsLocale.localize.month(i, { width: 'wide' })
-			locale.shortMonths[i] = dateFnsLocale.localize.month(i, { width: 'abbreviated' })
+			locale.months[i] = dateFnsLocale.localize.month(i as Month, { width: 'wide' })
+			locale.shortMonths[i] = dateFnsLocale.localize.month(i as Month, { width: 'abbreviated' })
 		}
 	}
 	return locale
diff --git a/src/routes/DateInput.svelte b/src/routes/DateInput.svelte
index adf30d5..cccf3df 100644
--- a/src/routes/DateInput.svelte
+++ b/src/routes/DateInput.svelte
@@ -3,12 +3,7 @@
 	import Prop from './prop.svelte'
 	import Split from './split.svelte'
 	import { localeFromDateFnsLocale } from '$lib'
-
-	// had to import it this way to avoid errors
-	// in `npm run build:site` or `npm run check`:
-	import hy from 'date-fns/locale/hy/index'
-	import de from 'date-fns/locale/de/index'
-	import nb from 'date-fns/locale/nb/index'
+	import { hy, de, nb } from 'date-fns/locale'
 
 	let id: string
 	let placeholder: string
diff --git a/src/routes/DatePicker.svelte b/src/routes/DatePicker.svelte
index dbf250e..7a29a77 100644
--- a/src/routes/DatePicker.svelte
+++ b/src/routes/DatePicker.svelte
@@ -3,12 +3,7 @@
 	import { localeFromDateFnsLocale } from '$lib/locale.js'
 	import Prop from './prop.svelte'
 	import Split from './split.svelte'
-
-	// had to import it this way to avoid errors
-	// in `npm run build:site` or `npm run check`:
-	import hy from 'date-fns/locale/hy/index'
-	import de from 'date-fns/locale/de/index'
-	import nb from 'date-fns/locale/nb/index'
+	import { hy, de, nb } from 'date-fns/locale'
 
 	let value: Date
 	let min: Date