diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index 14e739ff1f5b49..77f1184259d9c1 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -17,7 +17,7 @@ export const _default = () => {
 				<View>Item</View>
 			</Flex>
 			<Flex direction={ [ 'column', 'row' ] } gap={ 3 }>
-				<View css={ { width: '180px' } }>Item</View>
+				<View style={ { width: '180px' } }>Item</View>
 				<FlexItem isBlock>
 					<View>Item</View>
 				</FlexItem>
diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md
index 197bd4421d2b00..6765ff856b3d0d 100644
--- a/packages/components/src/grid/README.md
+++ b/packages/components/src/grid/README.md
@@ -7,14 +7,17 @@
 ## Usage
 
 ```jsx
-import { __experimentalGrid as Grid, __experimentalView as View } from '@wordpress/components';
+import {
+	__experimentalGrid as Grid,
+	__experimentalText as Text
+} from '@wordpress/components';
 
 function Example() {
 	return (
 		<Grid columns={ 3 }>
-			<View>Code</View>
-			<View>is</View>
-			<View>Poetry</View>
+			<Text>Code</Text>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</Grid>
 	);
 }
diff --git a/packages/components/src/grid/component.js b/packages/components/src/grid/component.js
index ca59b817ad8258..5abe522a0d7797 100644
--- a/packages/components/src/grid/component.js
+++ b/packages/components/src/grid/component.js
@@ -9,14 +9,17 @@ import useGrid from './hook';
  *
  * @example
  * ```jsx
- * import { __experimentalGrid as Grid, __experimentalView as View } from `@wordpress/components`;
+ * import {
+ * 	__experimentalGrid as Grid,
+ * 	__experimentalText as Text
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
  * 		<Grid columns={ 3 }>
- * 			<View>Code</View>
- * 			<View>is</View>
- * 			<View>Poetry</View>
+ * 			<Text>Code</Text>
+ * 			<Text>is</Text>
+ * 			<Text>Poetry</Text>
  * 		</Grid>
  * 	);
  * }
diff --git a/packages/components/src/h-stack/README.md b/packages/components/src/h-stack/README.md
index 8ced1105d6c9c0..99182bb3e7b9ae 100644
--- a/packages/components/src/h-stack/README.md
+++ b/packages/components/src/h-stack/README.md
@@ -12,21 +12,14 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Code</Text>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }
@@ -93,21 +86,16 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer>
-				<Text>is</Text>
+			<Text>is</Text>
 			</Spacer>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }
@@ -120,22 +108,15 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer />
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }
diff --git a/packages/components/src/h-stack/component.js b/packages/components/src/h-stack/component.js
index 24a5b658f9265b..c26ae1c05abc6a 100644
--- a/packages/components/src/h-stack/component.js
+++ b/packages/components/src/h-stack/component.js
@@ -14,21 +14,14 @@ import { useHStack } from './hook';
  * import {
  * 	__experimentalHStack as HStack,
  * 	__experimentalText as Text,
- * 	__experimentalView as View,
  * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
  * 		<HStack>
- * 			<View>
- * 				<Text>Code</Text>
- * 			</View>
- * 			<View>
- * 				<Text>is</Text>
- * 			</View>
- * 			<View>
- * 				<Text>Poetry</Text>
- * 			</View>
+ * 			<Text>Code</Text>
+ * 			<Text>is</Text>
+ * 			<Text>Poetry</Text>
  * 		</HStack>
  * 	);
  * }
diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts
index 0e22ef94a79e8b..aa58ac90890208 100644
--- a/packages/components/src/heading/hook.ts
+++ b/packages/components/src/heading/hook.ts
@@ -31,18 +31,18 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 	 *
 	 * @example
 	 * ```jsx
-	 * import { Heading, View } from `@wordpress/components`
+	 * import { __experimentalHeading as Heading } from `@wordpress/components`
 	 *
 	 * function Example() {
 	 *   return (
-	 *     <View>
+	 *     <div>
 	 *       <Heading level="1">Code is Poetry</Heading>
 	 *       <Heading level="2">Code is Poetry</Heading>
 	 *       <Heading level="3">Code is Poetry</Heading>
 	 *       <Heading level="4">Code is Poetry</Heading>
 	 *       <Heading level="5">Code is Poetry</Heading>
 	 *       <Heading level="6">Code is Poetry</Heading>
-	 *     </View>
+	 *     </div>
 	 *   );
 	 * }
 	 * ```
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index a9772b0bbf69d0..a6485fe0e95593 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -128,7 +128,6 @@ export {
 export { default as TreeSelect } from './tree-select';
 export { Truncate as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
-export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';
diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js
index e6edf7f0836442..9f169ad4df40f4 100644
--- a/packages/components/src/ui/card/component.js
+++ b/packages/components/src/ui/card/component.js
@@ -35,7 +35,7 @@ function Card( props, forwardedRef ) {
 
 	return (
 		<View { ...otherProps } ref={ forwardedRef }>
-			<View css={ styles.Content }>{ children }</View>
+			<View className={ styles.Content }>{ children }</View>
 			<Elevation
 				className={ elevationClassName }
 				isInteractive={ false }
diff --git a/packages/components/src/ui/popover/component.js b/packages/components/src/ui/popover/component.js
index bf69f4196dd4ed..70638993796ae8 100644
--- a/packages/components/src/ui/popover/component.js
+++ b/packages/components/src/ui/popover/component.js
@@ -111,14 +111,12 @@ function Popover( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Button, Popover, View, Text } from `@wordpress/components/ui`;
+ * import { Button, Popover, Text } from `@wordpress/components/ui`;
  
  * function Example() {
  * 	return (
  * 		<Popover trigger={ <Button>Popover</Button> }>
- * 			<View>
- * 				<Text>Code is Poetry</Text>
- * 			</View>
+ *			<Text>Code is Poetry</Text>
  * 		</Popover>
  * 	);
  * }
diff --git a/packages/components/src/ui/scrollable/component.js b/packages/components/src/ui/scrollable/component.js
index 71aa440432a85b..842521cb6d28ef 100644
--- a/packages/components/src/ui/scrollable/component.js
+++ b/packages/components/src/ui/scrollable/component.js
@@ -9,12 +9,12 @@ import { useScrollable } from './hook';
  *
  * @example
  * ```jsx
- * import { Scrollable, View } from `@wordpress/components/ui`;
+ * import { Scrollable } from `@wordpress/components/ui`;
  
  * function Example() {
  * 	return (
  * 		<Scrollable style={ { maxHeight: 200 } }>
- * 			<View style={ { height: 500 } }>...</View>
+ * 			<div style={ { height: 500 } }>...</div>
  * 		</Scrollable>
  * 	);
  * }
diff --git a/packages/components/src/v-stack/README.md b/packages/components/src/v-stack/README.md
index a1ae16ecae3237..ba2132804f78f2 100644
--- a/packages/components/src/v-stack/README.md
+++ b/packages/components/src/v-stack/README.md
@@ -11,22 +11,15 @@
 ```jsx
 import {
 	__experimentalText as Text,
-	__experimentalView as View
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<View>
-				<Text>Code</Text>
-			</View>
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Code</Text>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</VStack>
 	);
 }
@@ -92,22 +85,17 @@ When a `Spacer` is used within an `VStack`, the `Spacer` adaptively expands to t
 import {
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer>
-				<Text>is</Text>
+			<Text>is</Text>
 			</Spacer>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Poetry</Text>
 		</VStack>
 	);
 }
@@ -119,23 +107,16 @@ function Example() {
 import {
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer />
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</VStack>
 	);
 }
diff --git a/packages/components/src/v-stack/component.js b/packages/components/src/v-stack/component.js
index 631cd0f103634c..a37186a04df172 100644
--- a/packages/components/src/v-stack/component.js
+++ b/packages/components/src/v-stack/component.js
@@ -13,22 +13,15 @@ import { useVStack } from './hook';
  * ```jsx
  * import {
  * 	__experimentalText as Text,
- * 	__experimentalView as View,
  * 	__experimentalVStack as VStack,
  * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
  * 		<VStack>
- * 			<View>
- * 				<Text>Code</Text>
- * 			</View>
- * 			<View>
- * 				<Text>is</Text>
- * 			</View>
- * 			<View>
- * 				<Text>Poetry</Text>
- * 			</View>
+ * 			<Text>Code</Text>
+ * 			<Text>is</Text>
+ * 			<Text>Poetry</Text>
  * 		</VStack>
  * 	);
  * }