diff --git a/components/Search.tsx b/components/Search.tsx
index 0c7f0043fea5..072dcfe35fcf 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef, ReactNode, RefObject } from 'react'
 import { useRouter } from 'next/router'
 import useSWR from 'swr'
 import cx from 'classnames'
-import { ActionList, DropdownMenu, Flash, Label, Overlay } from '@primer/components'
-import { ItemInput } from '@primer/components/lib/ActionList/List'
+import { ActionList, DropdownMenu, Flash, Label, Overlay } from '@primer/react'
+import { ItemInput } from '@primer/react/lib/ActionList/List'
 
 import { useTranslation } from 'components/hooks/useTranslation'
 import { sendEvent, EventType } from 'components/lib/events'
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
index 842e15d5d989..1bd3cdc8771f 100644
--- a/components/article/ArticleGridLayout.tsx
+++ b/components/article/ArticleGridLayout.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Box, themeGet } from '@primer/components'
+import { Box, themeGet } from '@primer/react'
 
 type Props = {
   intro?: React.ReactNode
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
index 58c2e2457865..efbc7383b4d5 100644
--- a/components/article/ArticlePage.tsx
+++ b/components/article/ArticlePage.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import cx from 'classnames'
-import { ActionList, Heading } from '@primer/components'
+import { ActionList, Heading } from '@primer/react'
 
 import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx
index 861a7b11d02d..ed377b62c1bd 100644
--- a/components/article/PlatformPicker.tsx
+++ b/components/article/PlatformPicker.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
-import { SubNav, TabNav, UnderlineNav } from '@primer/components'
+import { SubNav, TabNav, UnderlineNav } from '@primer/react'
 import { sendEvent, EventType } from 'components/lib/events'
 import { useRouter } from 'next/router'
 
diff --git a/components/article/ToolPicker.tsx b/components/article/ToolPicker.tsx
index d5dc57d2da74..f00cb6b966c5 100644
--- a/components/article/ToolPicker.tsx
+++ b/components/article/ToolPicker.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
-import { UnderlineNav } from '@primer/components'
+import { UnderlineNav } from '@primer/react'
 import { sendEvent, EventType } from 'components/lib/events'
 import { preserveAnchorNodePosition } from 'scroll-anchoring'
 
diff --git a/components/guides/ArticleCard.tsx b/components/guides/ArticleCard.tsx
index 9ca1c8f5d887..46bea2e39ca4 100644
--- a/components/guides/ArticleCard.tsx
+++ b/components/guides/ArticleCard.tsx
@@ -1,5 +1,5 @@
 import { ArticleGuide } from 'components/context/ProductGuidesContext'
-import { Label } from '@primer/components'
+import { Label } from '@primer/react'
 
 type Props = {
   card: ArticleGuide
diff --git a/components/guides/ArticleCards.tsx b/components/guides/ArticleCards.tsx
index d84d749e93fd..d39b26fd8a58 100644
--- a/components/guides/ArticleCards.tsx
+++ b/components/guides/ArticleCards.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { ArticleGuide, useProductGuidesContext } from 'components/context/ProductGuidesContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArticleCard } from './ArticleCard'
-import { DropdownMenu } from '@primer/components'
-import { ItemInput } from '@primer/components/lib/ActionList/List'
+import { DropdownMenu } from '@primer/react'
+import { ItemInput } from '@primer/react/lib/ActionList/List'
 
 const PAGE_SIZE = 9
 export const ArticleCards = () => {
diff --git a/components/guides/LearningTrack.tsx b/components/guides/LearningTrack.tsx
index fe3f8bc82ee7..6f9bd80354ff 100644
--- a/components/guides/LearningTrack.tsx
+++ b/components/guides/LearningTrack.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArrowRightIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { useState } from 'react'
 import { FeaturedTrack } from 'components/context/ProductGuidesContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
diff --git a/components/hooks/useBreakpoint.ts b/components/hooks/useBreakpoint.ts
index 3d83bf726e75..849378c5b474 100644
--- a/components/hooks/useBreakpoint.ts
+++ b/components/hooks/useBreakpoint.ts
@@ -1,4 +1,4 @@
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 
 import { useMediaQuery } from './useMediaQuery'
 
diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
index 6f664bf731e2..56f15c7dd788 100644
--- a/components/landing/ArticleList.tsx
+++ b/components/landing/ArticleList.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import dayjs from 'dayjs'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
 import { ArrowRightIcon } from '@primer/octicons-react'
diff --git a/components/landing/CodeExampleCard.tsx b/components/landing/CodeExampleCard.tsx
index 628d9f1c76a6..a7156957ddff 100644
--- a/components/landing/CodeExampleCard.tsx
+++ b/components/landing/CodeExampleCard.tsx
@@ -1,7 +1,7 @@
 import { RepoIcon } from '@primer/octicons-react'
 import { CodeExample } from 'components/context/ProductLandingContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
-import { Label } from '@primer/components'
+import { Label } from '@primer/react'
 
 type Props = {
   example: CodeExample
diff --git a/components/landing/CodeExamples.tsx b/components/landing/CodeExamples.tsx
index 78f4ab518b8c..4ecbcac9c4c6 100644
--- a/components/landing/CodeExamples.tsx
+++ b/components/landing/CodeExamples.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ArrowRightIcon, SearchIcon } from '@primer/octicons-react'
-import { Text } from '@primer/components'
+import { Text } from '@primer/react'
 
 import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
diff --git a/components/landing/ProductArticlesList.tsx b/components/landing/ProductArticlesList.tsx
index e348fabaed94..aae57c41ca2b 100644
--- a/components/landing/ProductArticlesList.tsx
+++ b/components/landing/ProductArticlesList.tsx
@@ -2,7 +2,7 @@ import cx from 'classnames'
 import { useState } from 'react'
 
 import { ChevronDownIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
 import { Link } from 'components/Link'
diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
index ac4d94d4b86e..3a08027062ae 100644
--- a/components/landing/TableOfContents.tsx
+++ b/components/landing/TableOfContents.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 import { Link } from 'components/Link'
 import { BumpLink } from 'components/ui/BumpLink'
 import type { TocItem } from 'components/context/ProductLandingContext'
diff --git a/components/page-header/DeprecationBanner.tsx b/components/page-header/DeprecationBanner.tsx
index 3d20533522f5..99580c6fae5c 100644
--- a/components/page-header/DeprecationBanner.tsx
+++ b/components/page-header/DeprecationBanner.tsx
@@ -1,6 +1,6 @@
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
-import { Flash } from '@primer/components'
+import { Flash } from '@primer/react'
 
 export const DeprecationBanner = () => {
   const { data, enterpriseServerReleases } = useMainContext()
diff --git a/components/page-header/RestBanner.tsx b/components/page-header/RestBanner.tsx
index ddc2c86083d4..b66b853025bf 100644
--- a/components/page-header/RestBanner.tsx
+++ b/components/page-header/RestBanner.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flash } from '@primer/components'
+import { Flash } from '@primer/react'
 import { useRouter } from 'next/router'
 import { Link } from 'components/Link'
 
diff --git a/components/playground/ArticleMarkdown.tsx b/components/playground/ArticleMarkdown.tsx
index bee937b53f1e..131825b59d3d 100644
--- a/components/playground/ArticleMarkdown.tsx
+++ b/components/playground/ArticleMarkdown.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
diff --git a/components/playground/CodeLanguagePicker.tsx b/components/playground/CodeLanguagePicker.tsx
index b31080f0df6f..7ecf6cbb1ff8 100644
--- a/components/playground/CodeLanguagePicker.tsx
+++ b/components/playground/CodeLanguagePicker.tsx
@@ -1,4 +1,4 @@
-import { SelectMenu, Button, Dropdown } from '@primer/components'
+import { SelectMenu, Button, Dropdown } from '@primer/react'
 import { Link } from 'components/Link'
 import { useRouter } from 'next/router'
 import { usePlaygroundContext } from 'components/context/PlaygroundContext'
diff --git a/components/playground/editor/ActionBar.tsx b/components/playground/editor/ActionBar.tsx
index 2178967953de..a81b1ce93eb9 100644
--- a/components/playground/editor/ActionBar.tsx
+++ b/components/playground/editor/ActionBar.tsx
@@ -1,5 +1,5 @@
 import { CopyIcon, CheckIcon } from '@primer/octicons-react'
-import { Tooltip } from '@primer/components'
+import { Tooltip } from '@primer/react'
 
 import useClipboard from 'components/hooks/useClipboard'
 
diff --git a/components/playground/editor/Editor.tsx b/components/playground/editor/Editor.tsx
index 168101274bb0..97d475e4c43e 100644
--- a/components/playground/editor/Editor.tsx
+++ b/components/playground/editor/Editor.tsx
@@ -8,7 +8,7 @@ import { LoadingIndicator } from './LoadingIndicator'
 import { ActionBar } from './ActionBar'
 
 import { CodeBlockRef, PlaygroundArticleT } from '../types'
-import { useTheme } from '@primer/components'
+import { useTheme } from '@primer/react'
 
 const getNormalizedHighlight = (
   highlight: Exclude<CodeBlockRef['highlight'], undefined>
diff --git a/components/playground/editor/LoadingIndicator.tsx b/components/playground/editor/LoadingIndicator.tsx
index 06b910cad055..e04147d4d79b 100644
--- a/components/playground/editor/LoadingIndicator.tsx
+++ b/components/playground/editor/LoadingIndicator.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@primer/components'
+import { Box, Text } from '@primer/react'
 
 export function LoadingIndicator() {
   return (
diff --git a/components/sidebar/SidebarHomepage.tsx b/components/sidebar/SidebarHomepage.tsx
index e94a5fa1c7bd..47a52ec5ccae 100644
--- a/components/sidebar/SidebarHomepage.tsx
+++ b/components/sidebar/SidebarHomepage.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { LinkExternalIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { useVersion } from 'components/hooks/useVersion'
 import { useMainContext } from 'components/context/MainContext'
diff --git a/components/sidebar/SidebarProduct.tsx b/components/sidebar/SidebarProduct.tsx
index d3a1495edced..195607c26cfa 100644
--- a/components/sidebar/SidebarProduct.tsx
+++ b/components/sidebar/SidebarProduct.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { useState, useEffect, SyntheticEvent } from 'react'
 import { ChevronDownIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/components'
+import { ActionList } from '@primer/react'
 
 import { Link } from 'components/Link'
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
diff --git a/components/ui/Picker/Picker.tsx b/components/ui/Picker/Picker.tsx
index 0ca17e73c090..0d96ba4d9b41 100644
--- a/components/ui/Picker/Picker.tsx
+++ b/components/ui/Picker/Picker.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import cx from 'classnames'
 
-import { Details, useDetails, Text, Dropdown, Box } from '@primer/components'
+import { Details, useDetails, Text, Dropdown, Box } from '@primer/react'
 import { ChevronDownIcon } from '@primer/octicons-react'
 
 export type PickerOptionsTypeT = {
diff --git a/jest.config.js b/jest.config.js
index 52450a981250..65cd8080c159 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -23,6 +23,10 @@ module.exports = {
     },
   },
   preset: isBrowser ? 'jest-puppeteer' : undefined,
+  moduleNameMapper: {
+    // fix for "Unexpected token 'export'" error when running jest
+    '@primer/behaviors': '<rootDir>/node_modules/@primer/behaviors/dist/cjs/index.js',
+  },
   reporters,
   modulePathIgnorePatterns: ['assets/'],
   setupFilesAfterEnv: ['@alex_neo/jest-expect-message'],
diff --git a/ownership.yaml b/ownership.yaml
index f398d586636e..b82603b653c4 100644
--- a/ownership.yaml
+++ b/ownership.yaml
@@ -3,7 +3,7 @@ version: 1
 ownership:
   - name: docs-internal
     long_name: GitHub Help Docs
-    kind: heroku
+    kind: logical
     repo: https://github.com/github/docs-internal
     team: github/docs-engineering
     maintainer: chiedo
diff --git a/package-lock.json b/package-lock.json
index b5f59ae51644..17089036988b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,10 @@
       "license": "(MIT AND CC-BY-4.0)",
       "dependencies": {
         "@github/failbot": "0.8.0",
-        "@primer/components": "^33.1.0",
         "@primer/css": "^19.1.1",
         "@primer/octicons": "^16.3.0",
         "@primer/octicons-react": "^16.3.0",
+        "@primer/react": "^34.6.0",
         "@react-aria/ssr": "^3.1.0",
         "accept-language-parser": "^1.5.0",
         "ajv": "^8.9.0",
@@ -3584,39 +3584,10 @@
         "@octokit/openapi-types": "^11.2.0"
       }
     },
-    "node_modules/@primer/components": {
-      "version": "33.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/components/-/components-33.1.0.tgz",
-      "integrity": "sha512-q+Eky5DMiv8PKSCjor/ChJ8wlHCreczDCku5B/GHLzqQXwtjGLsGOK7Qn+c/BYfpVh7am+FfqqHZRlpcMATdQw==",
-      "deprecated": "@primer/components has been renamed @primer/react. Use @primer/react instead.",
-      "dependencies": {
-        "@primer/octicons-react": "^16.1.0",
-        "@primer/primitives": "7.1.1",
-        "@radix-ui/react-polymorphic": "0.0.14",
-        "@react-aria/ssr": "3.1.0",
-        "@styled-system/css": "5.1.5",
-        "@styled-system/props": "5.1.5",
-        "@styled-system/theme-get": "5.1.2",
-        "@types/history": "4.7.8",
-        "@types/styled-components": "5.1.11",
-        "@types/styled-system": "5.1.12",
-        "@types/styled-system__css": "5.0.16",
-        "@types/styled-system__theme-get": "5.0.1",
-        "classnames": "2.3.1",
-        "color2k": "1.2.4",
-        "deepmerge": "4.2.2",
-        "focus-visible": "5.2.0",
-        "styled-system": "5.1.5"
-      },
-      "engines": {
-        "node": ">=16",
-        "npm": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0",
-        "styled-components": "4.x || 5.x"
-      }
+    "node_modules/@primer/behaviors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz",
+      "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ=="
     },
     "node_modules/@primer/css": {
       "version": "19.1.1",
@@ -3659,6 +3630,51 @@
       "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz",
       "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
     },
+    "node_modules/@primer/react": {
+      "version": "34.6.0",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz",
+      "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==",
+      "dependencies": {
+        "@primer/behaviors": "1.1.0",
+        "@primer/octicons-react": "16.1.1",
+        "@primer/primitives": "7.1.1",
+        "@radix-ui/react-polymorphic": "0.0.14",
+        "@react-aria/ssr": "3.1.0",
+        "@styled-system/css": "5.1.5",
+        "@styled-system/props": "5.1.5",
+        "@styled-system/theme-get": "5.1.2",
+        "@types/styled-components": "5.1.11",
+        "@types/styled-system": "5.1.12",
+        "@types/styled-system__css": "5.0.16",
+        "@types/styled-system__theme-get": "5.0.1",
+        "classnames": "2.3.1",
+        "color2k": "1.2.4",
+        "deepmerge": "4.2.2",
+        "focus-visible": "5.2.0",
+        "history": "5.0.0",
+        "styled-system": "5.1.5"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "styled-components": "4.x || 5.x"
+      }
+    },
+    "node_modules/@primer/react/node_modules/@primer/octicons-react": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz",
@@ -3978,11 +3994,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/history": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
-      "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA=="
-    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -10725,6 +10736,14 @@
       "resolved": "https://registry.npmjs.org/highlightjs-graphql/-/highlightjs-graphql-1.0.2.tgz",
       "integrity": "sha512-jShTftpKQDwMXc+7OHOpHXRYSweT08EO2YOIcLbwU00e9yuwJMYXGLF1eiDO0aUPeQU4/5EjAh5HtPt3ly7rvg=="
     },
+    "node_modules/history": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz",
+      "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -25243,29 +25262,10 @@
         "@octokit/openapi-types": "^11.2.0"
       }
     },
-    "@primer/components": {
-      "version": "33.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/components/-/components-33.1.0.tgz",
-      "integrity": "sha512-q+Eky5DMiv8PKSCjor/ChJ8wlHCreczDCku5B/GHLzqQXwtjGLsGOK7Qn+c/BYfpVh7am+FfqqHZRlpcMATdQw==",
-      "requires": {
-        "@primer/octicons-react": "^16.1.0",
-        "@primer/primitives": "7.1.1",
-        "@radix-ui/react-polymorphic": "0.0.14",
-        "@react-aria/ssr": "3.1.0",
-        "@styled-system/css": "5.1.5",
-        "@styled-system/props": "5.1.5",
-        "@styled-system/theme-get": "5.1.2",
-        "@types/history": "4.7.8",
-        "@types/styled-components": "5.1.11",
-        "@types/styled-system": "5.1.12",
-        "@types/styled-system__css": "5.0.16",
-        "@types/styled-system__theme-get": "5.0.1",
-        "classnames": "2.3.1",
-        "color2k": "1.2.4",
-        "deepmerge": "4.2.2",
-        "focus-visible": "5.2.0",
-        "styled-system": "5.1.5"
-      }
+    "@primer/behaviors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz",
+      "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ=="
     },
     "@primer/css": {
       "version": "19.1.1",
@@ -25301,6 +25301,39 @@
       "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz",
       "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw=="
     },
+    "@primer/react": {
+      "version": "34.6.0",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz",
+      "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==",
+      "requires": {
+        "@primer/behaviors": "1.1.0",
+        "@primer/octicons-react": "16.1.1",
+        "@primer/primitives": "7.1.1",
+        "@radix-ui/react-polymorphic": "0.0.14",
+        "@react-aria/ssr": "3.1.0",
+        "@styled-system/css": "5.1.5",
+        "@styled-system/props": "5.1.5",
+        "@styled-system/theme-get": "5.1.2",
+        "@types/styled-components": "5.1.11",
+        "@types/styled-system": "5.1.12",
+        "@types/styled-system__css": "5.0.16",
+        "@types/styled-system__theme-get": "5.0.1",
+        "classnames": "2.3.1",
+        "color2k": "1.2.4",
+        "deepmerge": "4.2.2",
+        "focus-visible": "5.2.0",
+        "history": "5.0.0",
+        "styled-system": "5.1.5"
+      },
+      "dependencies": {
+        "@primer/octicons-react": {
+          "version": "16.1.1",
+          "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+          "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
+          "requires": {}
+        }
+      }
+    },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz",
@@ -25603,11 +25636,6 @@
         "@types/unist": "*"
       }
     },
-    "@types/history": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
-      "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA=="
-    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -30989,6 +31017,14 @@
       "resolved": "https://registry.npmjs.org/highlightjs-graphql/-/highlightjs-graphql-1.0.2.tgz",
       "integrity": "sha512-jShTftpKQDwMXc+7OHOpHXRYSweT08EO2YOIcLbwU00e9yuwJMYXGLF1eiDO0aUPeQU4/5EjAh5HtPt3ly7rvg=="
     },
+    "history": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz",
+      "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
diff --git a/package.json b/package.json
index 88b3a63c9a06..320e0c50606b 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
   ],
   "dependencies": {
     "@github/failbot": "0.8.0",
-    "@primer/components": "^33.1.0",
     "@primer/css": "^19.1.1",
     "@primer/octicons": "^16.3.0",
     "@primer/octicons-react": "^16.3.0",
+    "@primer/react": "^34.6.0",
     "@react-aria/ssr": "^3.1.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.9.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bbad0c45a6f0..2c5e47499ad0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
-import { useTheme, ThemeProvider } from '@primer/components'
+import { useTheme, ThemeProvider } from '@primer/react'
 import { SSRProvider } from '@react-aria/ssr'
 import { defaultComponentThemeProps, getThemeProps } from 'components/lib/getThemeProps'