diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 989fe32e8f491..306d711bf33c4 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -531,58 +531,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		) { /* ... */ }
 		```
 
-	7. If the component doesn't forwards its ref yet, wrap the component in a `forwardRed` call. Alternatively, if you want to take advantage of the [Context system](#context-system), you can use the `contextConnect` utility function (which also takes care of adding ref forwarding)
-
-		```tsx
-		// With `forwardRef`
-		import type { ForwardedRef } from 'react';
-		import { forwardRef } from '@wordpress/element';
-		import type { WordPressComponentProps } from '../ui/context';
-		import type { ComponentOwnProps } from './types';
-
-		function UnforwardedMyComponent(
-			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
-			forwardedRef: ForwardedRef< any >
-		) { /* ... */ }
-
-
-		/**
-		 * MyComponent JSDoc
-		 */
-		export const MyComponent = forwardRef( UnforwardedMyComponent );
-
-		export default MyComponent;
-		```
-
-		```tsx
-		// With `contextConnect`
-		import type { ForwardedRef } from 'react';
-		import {
-			contextConnect,
-			useContextSystem,
-			WordPressComponentProps,
-		} from '../ui/context';
-		import type { ComponentOwnProps } from './types';
-
-		function UnconnectedMyComponent(
-			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
-			forwardedRef: ForwardedRef< any >
-		) {
-			const contextProps = useContextSystem( props, 'MyComponent' );
-
-			/* ... */
-		}
-
-
-		/**
-		 * MyComponent JSDoc
-		 */
-		export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
-
-		export default MyComponent;
-		```
-
-	8. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
+	7. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
 
 		```jsx
 		function UnconnectedMyComponent() { /* ... */ }
@@ -592,8 +541,8 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		export default MyComponent;
 		```
 
-	9. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
-	10. Prefer `unknown` to `any`, and in general avoid it when possible.
+	8. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
+	9. Prefer `unknown` to `any`, and in general avoid it when possible.
 8. On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 9. Make sure that:
 	1. tests still pass;
diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap
index 10083db050517..8004af489ee7c 100644
--- a/packages/components/src/card/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap
@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+     class="components-card__body components-card-body css-kqnlb3-View-Body-borderRadius-medium-shady em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-kqnlb3-View-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-1xx98hc-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-1xx98hc-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-gg08fg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-gg08fg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__header components-card-header css-121pfkj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-121pfkj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -93,19 +93,19 @@ Snapshot Diff:
 @@ -5,18 +5,18 @@
   >
     <div
-      class="css-mgwsf4-View-Content em57xhy0"
+      class="css-mgwsf4-View-Content e19lxcc00"
     >
       <div
--       class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+       class="components-flex components-card__header components-card-header css-1e8ifbz-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
+-       class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++       class="components-flex components-card__header components-card-header css-1e8ifbz-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Header
       </div>
       <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
+-       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="CardBody"
       >
@@ -138,27 +138,27 @@ Snapshot Diff:
 @@ -6,25 +6,25 @@
     >
       <div
-        class="css-mgwsf4-View-Content em57xhy0"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-cwhos2-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-cwhos2-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,33 +174,33 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-mgwsf4-View-Content em57xhy0"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-oc4v7j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-oc4v7j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -786,15 +786,15 @@ Snapshot Diff:
     </div>
     <div
       aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index fd6f27551fea4..3ea0d7e0e7e77 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -40,12 +40,7 @@ import type { WordPressComponentProps } from '../ui/context';
  * ```
  */
 export function CheckboxControl(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to CheckboxControl.
-	props: Omit<
-		WordPressComponentProps< CheckboxControlProps, 'input', false >,
-		'ref'
-	>
+	props: WordPressComponentProps< CheckboxControlProps, 'input', false >
 ) {
 	const {
 		label,
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 10618c19de93f..9b8fdd230fb20 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/packages/components/src/disabled/index.tsx
@@ -54,7 +54,7 @@ function Disabled( {
 	children,
 	isDisabled = true,
 	...props
-}: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) {
+}: WordPressComponentProps< DisabledProps, 'div' > ) {
 	const ref = useDisabled();
 
 	if ( ! isDisabled ) {
diff --git a/packages/components/src/flex/test/__snapshots__/index.tsx.snap b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
index bf25fd33670ea..5f144b3106dc9 100644
--- a/packages/components/src/flex/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+    class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base em57xhy0"
+      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View em57xhy0"
+-     class="css-1mm2cvy-View e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block em57xhy0"
+      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index d51a3ee571934..e7ee1ae0bebde 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -31,12 +31,7 @@ export const noop = () => {};
  * ```
  */
 export function FormToggle(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to FormToggle.
-	props: Omit<
-		WordPressComponentProps< FormToggleProps, 'input', false >,
-		'ref'
-	>
+	props: WordPressComponentProps< FormToggleProps, 'input', false >
 ) {
 	const {
 		className,
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index f6e84366baaba..227174e810459 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-bsdqin-View-medium-item em57xhy0"
-+     class="components-item css-1ohjtsa-View-large-item em57xhy0"
+-     class="components-item css-bsdqin-View-medium-item e19lxcc00"
++     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -110,8 +110,8 @@ Snapshot Diff:
 
 @@ -1,17 +1,17 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-18qvw1m-View-separated-rounded em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
@@ -121,8 +121,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-bsdqin-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-bsdqin-View-medium-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -137,8 +137,8 @@ Snapshot Diff:
 
 @@ -1,17 +1,17 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-acyoj6-View-bordered-rounded em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
@@ -148,8 +148,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-bsdqin-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++       class="components-item css-bsdqin-View-medium-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -164,8 +164,8 @@ Snapshot Diff:
 
 @@ -1,7 +1,7 @@
   <div
--   class="components-item-group css-kj8mvb-View-rounded em57xhy0"
-+   class="components-item-group css-1mm2cvy-View em57xhy0"
+-   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++   class="components-item-group css-1mm2cvy-View e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
diff --git a/packages/components/src/placeholder/index.tsx b/packages/components/src/placeholder/index.tsx
index cc9f33fe4f603..fe22bb5a3df0e 100644
--- a/packages/components/src/placeholder/index.tsx
+++ b/packages/components/src/placeholder/index.tsx
@@ -39,11 +39,10 @@ const PlaceholderIllustration = (
  * ```
  */
 export function Placeholder< IconProps = unknown >(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to Placeholder.
-	props: Omit<
-		WordPressComponentProps< PlaceholderProps< IconProps >, 'div', false >,
-		'ref'
+	props: WordPressComponentProps<
+		PlaceholderProps< IconProps >,
+		'div',
+		false
 	>
 ) {
 	const {
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index 6b4c1df8d30e0..f6b5fc1a1e201 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -42,12 +42,7 @@ import type { RadioControlProps } from './types';
  * ```
  */
 export function RadioControl(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to RadioControl.
-	props: Omit<
-		WordPressComponentProps< RadioControlProps, 'input', false >,
-		'ref'
-	>
+	props: WordPressComponentProps< RadioControlProps, 'input', false >
 ) {
 	const {
 		label,
diff --git a/packages/components/src/surface/test/__snapshots__/index.tsx.snap b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
index fc61465bc2569..d394711944f64 100644
--- a/packages/components/src/surface/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
@@ -6,8 +6,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-pt58n0-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -21,8 +21,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1vckp4o-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -36,8 +36,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-sw9dzi-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -51,8 +51,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-123k66h-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -82,8 +82,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 3ce656af2ad7c..10b79f8188709 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -40,12 +40,7 @@ import type { WordPressComponentProps } from '../ui/context';
  * ```
  */
 export function TextareaControl(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to TextareaControl.
-	props: Omit<
-		WordPressComponentProps< TextareaControlProps, 'textarea', false >,
-		'ref'
-	>
+	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >
 ) {
 	const {
 		label,
diff --git a/packages/components/src/ui/context/test/wordpress-component.tsx b/packages/components/src/ui/context/test/wordpress-component.tsx
new file mode 100644
index 0000000000000..e648dd78fc9c7
--- /dev/null
+++ b/packages/components/src/ui/context/test/wordpress-component.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../wordpress-component';
+
+// Static TypeScript checks
+describe( 'WordPressComponentProps', () => {
+	it( 'should not accept a ref', () => {
+		const Foo = ( props: WordPressComponentProps< {}, 'div' > ) => (
+			<div { ...props } />
+		);
+
+		// @ts-expect-error The ref prop should trigger an error.
+		<Foo ref={ null } />;
+	} );
+
+	it( 'should accept a ref if wrapped by a forwardRef()', () => {
+		const Foo = (
+			props: WordPressComponentProps< {}, 'div' >,
+			ref: ForwardedRef< any >
+		) => <div { ...props } ref={ ref } />;
+		const ForwardedFoo = forwardRef( Foo );
+
+		<ForwardedFoo ref={ null } />;
+	} );
+} );
diff --git a/packages/components/src/ui/context/wordpress-component.ts b/packages/components/src/ui/context/wordpress-component.ts
index 1cf549c76f5c4..5c0c60978f88b 100644
--- a/packages/components/src/ui/context/wordpress-component.ts
+++ b/packages/components/src/ui/context/wordpress-component.ts
@@ -3,19 +3,19 @@
  */
 import type * as React from 'react';
 
-/**
- * Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
- *
- * The `children` prop is being explicitely omitted since it is otherwise implicitly added
- * by `ComponentPropsWithRef`. The context is that components should require the `children`
- * prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
- */
+// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
 export type WordPressComponentProps<
+	/** Prop types. */
 	P,
+	/** The HTML element to inherit props from. */
 	T extends React.ElementType,
+	/** Supports polymorphism through the `as` prop. */
 	IsPolymorphic extends boolean = true
 > = P &
-	Omit< React.ComponentPropsWithRef< T >, 'as' | keyof P | 'children' > &
+	// The `children` prop is being explicitly omitted since it is otherwise implicitly added
+	// by `ComponentPropsWithRef`. The context is that components should require the `children`
+	// prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
+	Omit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &
 	( IsPolymorphic extends true
 		? {
 				/** The HTML element or React component to render the component as. */
@@ -47,7 +47,13 @@ export type WordPressComponent<
 	selector: `.${ string }`;
 };
 
-export type WordPressComponentFromProps< Props > =
-	Props extends WordPressComponentProps< infer P, infer T, infer I >
-		? WordPressComponent< T, P, I >
-		: never;
+export type WordPressComponentFromProps<
+	Props,
+	ForwardsRef extends boolean = true
+> = Props extends WordPressComponentProps< infer P, infer T, infer I >
+	? WordPressComponent<
+			T,
+			P & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),
+			I
+	  >
+	: never;
diff --git a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap b/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap
index e65364b96bf9b..10653f783e2aa 100644
--- a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap
@@ -10,13 +10,13 @@ Snapshot Diff:
     class="components-unit-control-wrapper css-zi0c81-Root e1bagdl33"
   >
     <div
--     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
-+     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles e19lxcc00"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Flex"
     >
       <div
-        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper e19lxcc00"
 @@ -15,11 +15,11 @@
         class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
       >
diff --git a/packages/components/src/view/component.js b/packages/components/src/view/component.tsx
similarity index 59%
rename from packages/components/src/view/component.js
rename to packages/components/src/view/component.tsx
index 4d7808807bd1f..02f79a2673d0e 100644
--- a/packages/components/src/view/component.js
+++ b/packages/components/src/view/component.tsx
@@ -2,6 +2,13 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import type { RefAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponent } from '../ui/context/wordpress-component';
+import type { ViewProps } from './types';
 
 /**
  * `View` is a core component that renders everything in the library.
@@ -19,11 +26,13 @@ import styled from '@emotion/styled';
  * 	);
  * }
  * ```
- *
- * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>}
  */
-// @ts-ignore
-const View = styled.div``;
+// @ts-expect-error
+export const View: WordPressComponent<
+	'div',
+	ViewProps & RefAttributes< any >
+> = styled.div``;
+
 View.selector = '.components-view';
 View.displayName = 'View';
 
diff --git a/packages/components/src/view/stories/index.tsx b/packages/components/src/view/stories/index.tsx
new file mode 100644
index 0000000000000..fb27e29433470
--- /dev/null
+++ b/packages/components/src/view/stories/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '..';
+
+const meta: ComponentMeta< typeof View > = {
+	component: View,
+	title: 'Components (Experimental)/View',
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof View > = ( args ) => {
+	return <View { ...args } />;
+};
+
+export const Default: ComponentStory< typeof View > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};
diff --git a/packages/components/src/view/types.ts b/packages/components/src/view/types.ts
new file mode 100644
index 0000000000000..6c7e1508812c8
--- /dev/null
+++ b/packages/components/src/view/types.ts
@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ViewProps = { children?: ReactNode };