diff --git a/examples/theming/package.json b/examples/theming/package.json
index fc44db63d80..f100e31c335 100644
--- a/examples/theming/package.json
+++ b/examples/theming/package.json
@@ -12,12 +12,10 @@
"dependencies": {
"@primer/octicons-react": "^19.21.0",
"@primer/react": "38.29.0",
- "@primer/styled-react": "1.1.0",
"clsx": "^2.1.1",
"next": "^16.1.7",
"react": "^19.2.0",
"react-dom": "^19.2.0",
- "styled-components": "5.x",
"typescript": "^6.0.3"
},
"devDependencies": {
diff --git a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx b/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx
index 63e8310d0d3..e5c8c6b7fb8 100644
--- a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx
+++ b/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx
@@ -1,8 +1,7 @@
'use client'
import {SunIcon, MoonIcon} from '@primer/octicons-react'
-import {useTheme} from '@primer/styled-react'
-import {Button} from '@primer/react'
+import {Button, useTheme} from '@primer/react'
import classes from './ThemePreference.module.css'
diff --git a/examples/theming/src/app/layout.tsx b/examples/theming/src/app/layout.tsx
index 3f632308872..c16415fc72d 100644
--- a/examples/theming/src/app/layout.tsx
+++ b/examples/theming/src/app/layout.tsx
@@ -1,7 +1,6 @@
import './global.css'
import {cookies} from 'next/headers'
-import {BaseStyles, ThemeProvider} from '@primer/styled-react'
-import {StyledComponentsRegistry} from './registry'
+import {BaseStyles, ThemeProvider} from '@primer/react'
export const metadata = {
title: 'Next.js',
@@ -24,11 +23,10 @@ export default async function RootLayout({children}: {children: React.ReactNode}
data-dark-theme="dark"
>
-
-
- {children}
-
-
+ {/* Theme attributes are set on so Next.js can hydrate without ThemeProvider adding an extra DOM wrapper. */}
+
+ {children}
+
)
diff --git a/examples/theming/src/app/registry.tsx b/examples/theming/src/app/registry.tsx
deleted file mode 100644
index ce3e54643f6..00000000000
--- a/examples/theming/src/app/registry.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import {useServerInsertedHTML} from 'next/navigation'
-import type React from 'react'
-import {useState} from 'react'
-import {ServerStyleSheet, StyleSheetManager} from 'styled-components'
-
-/**
- * @see https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
- */
-export function StyledComponentsRegistry({children}: React.PropsWithChildren) {
- // Only create stylesheet once with lazy initial state
- // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
- const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
-
- useServerInsertedHTML(() => {
- const styles = styledComponentsStyleSheet.getStyleElement()
- styledComponentsStyleSheet.instance.clearTag()
- return <>{styles}
- })
-
- if (typeof window !== 'undefined') return <>{children}
-
- return {children}
-}
diff --git a/package-lock.json b/package-lock.json
index 87cadb77973..4e2fb258378 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -143,12 +143,10 @@
"dependencies": {
"@primer/octicons-react": "^19.21.0",
"@primer/react": "38.28.0",
- "@primer/styled-react": "1.1.0",
"clsx": "^2.1.1",
"next": "^16.1.7",
"react": "^19.2.0",
"react-dom": "^19.2.0",
- "styled-components": "5.x",
"typescript": "^6.0.3"
},
"devDependencies": {