diff --git a/.changeset/lucky-facts-obey.md b/.changeset/lucky-facts-obey.md
new file mode 100644
index 00000000000..35bd9d1dd09
--- /dev/null
+++ b/.changeset/lucky-facts-obey.md
@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+'@primer/styled-react': patch
+---
+
+Update Truncate component to no longer support sx, add sx wrapper to @primer/styled-react.
diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
index 2db37e74ac7..c4624c6f061 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/packages/react/src/ActionList/Description.tsx
@@ -61,7 +61,6 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
-        sx={sx}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"
diff --git a/packages/react/src/Truncate/Truncate.docs.json b/packages/react/src/Truncate/Truncate.docs.json
index f33678d4afc..b13b35b1a3b 100644
--- a/packages/react/src/Truncate/Truncate.docs.json
+++ b/packages/react/src/Truncate/Truncate.docs.json
@@ -21,7 +21,7 @@
   "props": [
     {
       "name": "maxWidth",
-      "type": "number",
+      "type": "number | string | (number | string)[]",
       "defaultValue": "125",
       "description": "Sets the max-width of the text."
     },
@@ -41,11 +41,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "'div'"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
diff --git a/packages/react/src/Truncate/Truncate.stories.tsx b/packages/react/src/Truncate/Truncate.stories.tsx
index 0f1d0b24e27..ea95707c01e 100644
--- a/packages/react/src/Truncate/Truncate.stories.tsx
+++ b/packages/react/src/Truncate/Truncate.stories.tsx
@@ -41,12 +41,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   theme: {
     controls: false,
     table: {
diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx
index 4ece1eaf59f..1ee3f522d21 100644
--- a/packages/react/src/Truncate/Truncate.tsx
+++ b/packages/react/src/Truncate/Truncate.tsx
@@ -1,27 +1,23 @@
 import React from 'react'
 import {clsx} from 'clsx'
-import type {MaxWidthProps} from 'styled-system'
-import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Truncate.module.css'
 
 type TruncateProps = React.HTMLAttributes<HTMLElement> & {
   title: string
   inline?: boolean
   expandable?: boolean
-} & MaxWidthProps &
-  SxProp
+  maxWidth?: number | string | (number | string)[]
+}
 
 const Truncate = React.forwardRef(function Truncate(
-  {as, children, className, title, inline, expandable, maxWidth = 125, style, sx, ...rest},
+  {as: Component = 'div', children, className, title, inline, expandable, maxWidth = 125, style, ...rest},
   ref,
 ) {
   return (
-    <BoxWithFallback
+    <Component
       {...rest}
       ref={ref}
-      as={as}
       className={clsx(className, classes.Truncate)}
       data-expandable={expandable}
       data-inline={inline}
@@ -33,10 +29,9 @@ const Truncate = React.forwardRef(function Truncate(
             typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined,
         } as React.CSSProperties
       }
-      sx={sx}
     >
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }) as PolymorphicForwardRefComponent<'div', TruncateProps>
 
diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
index b4c0bcfd038..8cb85f3e5e1 100644
--- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`@primer/styled-react exports 1`] = `
 [
   "ToggleSwitch",
+  "Truncate",
   "ActionList",
   "ActionMenu",
   "Autocomplete",
@@ -49,7 +50,6 @@ exports[`@primer/styled-react exports 1`] = `
   "Timeline",
   "Token",
   "Tooltip",
-  "Truncate",
   "UnderlineNav",
   "Box",
   "sx",
diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts
index 3f2f0ef90e7..59e4d4c4bdc 100644
--- a/packages/styled-react/src/index.ts
+++ b/packages/styled-react/src/index.ts
@@ -1,8 +1,9 @@
-import {ToggleSwitch as PrimerToggleSwitch} from '@primer/react'
+import {Truncate as PrimerTruncate, ToggleSwitch as PrimerToggleSwitch} from '@primer/react'
 import {createStyledComponent} from './utils/createStyledComponent'
 
+const Truncate: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerTruncate)
 const ToggleSwitch: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerToggleSwitch)
-export {ToggleSwitch}
+export {ToggleSwitch, Truncate}
 
 export {
   ActionList,
@@ -51,7 +52,6 @@ export {
   Timeline,
   Token,
   Tooltip,
-  Truncate,
   UnderlineNav,
 
   // styled-components components or types