diff --git a/.changeset/small-lions-fold.md b/.changeset/small-lions-fold.md
new file mode 100644
index 000000000000..e0458623d16e
--- /dev/null
+++ b/.changeset/small-lions-fold.md
@@ -0,0 +1,6 @@
+---
+'braid-design-system': patch
+'@braid-design-system/docs-ui': patch
+---
+
+Expand the peer dependency range to support React 19.
diff --git a/.changeset/swift-planets-dream.md b/.changeset/swift-planets-dream.md
new file mode 100644
index 000000000000..229a1fb95506
--- /dev/null
+++ b/.changeset/swift-planets-dream.md
@@ -0,0 +1,5 @@
+---
+'@braid-design-system/codemod': patch
+---
+
+Updating React dependencies to v19
diff --git a/README.md b/README.md
index 5166360adef0..781b0834339f 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ If you're rendering within the context of another application, you may want to o
If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links:
```tsx
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as ReactRouterLink } from 'react-router';
import { BraidProvider, makeLinkComponent } from 'braid-design-system';
import wireframe from 'braid-design-system/themes/wireframe';
diff --git a/package.json b/package.json
index b083845763ae..dd8551db6423 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
"@octokit/rest": "^18.12.0",
"@types/fs-extra": "^9.0.13",
"@types/node": "^22.16.0",
- "@types/react": "^18.3.18",
+ "@types/react": "^19.1.8",
"@types/sanitize-html": "^2.13.0",
"@types/webpack-env": "^1.18.8",
"@vanilla-extract/vite-plugin": "^5.0.7",
diff --git a/packages/braid-design-system/.storybook/decorators.tsx b/packages/braid-design-system/.storybook/decorators.tsx
index 1e28a01d6d21..d890113be0b3 100644
--- a/packages/braid-design-system/.storybook/decorators.tsx
+++ b/packages/braid-design-system/.storybook/decorators.tsx
@@ -1,5 +1,5 @@
import type { Decorator } from '@storybook/react-webpack5';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
import { BraidProvider, ToastProvider } from '../src/lib/components';
import { PlayroomStateProvider } from '../src/lib/playroom/playroomState';
diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json
index 97b2ced80182..01ce96d97188 100644
--- a/packages/braid-design-system/package.json
+++ b/packages/braid-design-system/package.json
@@ -195,7 +195,6 @@
"lodash.curry": "^4.1.1",
"polished": "^4.1.0",
"react-focus-lock": "^2.9.7",
- "react-is": "^18.2.0",
"react-remove-scroll": "^2.7.0",
"throttle-debounce": "^5.0.2",
"utility-types": "^3.10.0"
@@ -217,10 +216,8 @@
"@types/gradient-parser": "^0.1.5",
"@types/lodash.curry": "^4.1.9",
"@types/node": "^22.16.0",
- "@types/react": "^18.3.18",
- "@types/react-dom": "^18.3.0",
- "@types/react-is": "^18.3.0",
- "@types/react-router-dom": "^5.3.3",
+ "@types/react": "^19.1.8",
+ "@types/react-dom": "^19.1.6",
"@types/sanitize-html": "^2.13.0",
"@types/testing-library__jest-dom": "^5.9.1",
"@types/throttle-debounce": "^5.0.2",
@@ -234,9 +231,9 @@
"html-validate": "^9.7.1",
"playroom": "0.44.0",
"prettier": "^3.4.1",
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
- "react-router-dom": "^6.3.0",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-router": "^7.6.3",
"sanitize-html": "^2.12.1",
"sku": "14.8.0",
"storybook": "9.0.15",
@@ -244,7 +241,7 @@
"title-case": "^3.0.3"
},
"peerDependencies": {
- "react": "^18",
- "react-dom": "^18"
+ "react": "^18 || ^19",
+ "react-dom": "^18 || ^19"
}
}
diff --git a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
index 500389e00ff2..a210e4139252 100644
--- a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
@@ -62,7 +62,7 @@ const docs: ComponentDocs = {
),
code: `
- import { Link as ReactRouterLink } from 'react-router-dom';
+ import { Link as ReactRouterLink } from 'react-router';
import { BraidProvider, makeLinkComponent } from 'braid-design-system';
import wireframe from 'braid-design-system/themes/wireframe';
diff --git a/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx b/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx
index 3123bfe51a09..087059def46c 100644
--- a/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Drawer/Drawer.docs.tsx
@@ -193,9 +193,11 @@ const docs: ComponentDocs = {
description: (
There are a variety of standard widths to choose from.
),
- Example: ({ setState, getState, toggleState }) =>
+ Example: ({ setDefaultState, setState, getState, toggleState }) =>
source(
<>
+ {setDefaultState('width', 'small')}
+