diff --git a/packages/components/src/resizable-box/README.md b/packages/components/src/resizable-box/README.md
index 3860c1d802ce10..c313ece517a835 100644
--- a/packages/components/src/resizable-box/README.md
+++ b/packages/components/src/resizable-box/README.md
@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 19fab8eeec19cf..0955c29c537786 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -124,4 +123,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;
diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js
deleted file mode 100644
index 44f4a5f5fa6331..00000000000000
--- a/packages/components/src/resizable-box/stories/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ResizableBox from '../';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default {
-	title: 'Components/ResizableBox',
-	component: ResizableBox,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Example = ( props ) => {
-	const [ attributes, setAttributes ] = useState( {
-		height: 200,
-		width: 400,
-	} );
-	const { height, width } = attributes;
-	const { children, ...restProps } = props;
-
-	return (
-		<div style={ { margin: 30 } }>
-			<ResizableBox
-				{ ...restProps }
-				size={ {
-					height,
-					width,
-				} }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						height: parseInt( height + delta.height, 10 ),
-						width: parseInt( width + delta.width, 10 ),
-					} );
-				} }
-			>
-				{ children }
-			</ResizableBox>
-		</div>
-	);
-};
-
-export const _default = () => {
-	const content = text( 'Example: Content', 'Resize' );
-	const showHandle = boolean( 'showHandle', true );
-	const minHeight = number( 'minHeight', 50 );
-	const minWidth = number( 'minWidth', 50 );
-	const enable = {
-		top: boolean( 'enable.top', false ),
-		right: boolean( 'enable.right', true ),
-		bottom: boolean( 'enable.bottom', true ),
-		left: boolean( 'enable.left', false ),
-		topRight: boolean( 'enable.topRight', false ),
-		bottomRight: boolean( 'enable.bottomRight', true ),
-		bottomLeft: boolean( 'enable.bottomLeft', false ),
-		topLeft: boolean( 'enable.topLeft', false ),
-	};
-	const __experimentalShowTooltip = boolean(
-		'__experimentalShowTooltip',
-		false
-	);
-
-	const props = {
-		enable,
-		minHeight,
-		minWidth,
-		showHandle,
-		__experimentalShowTooltip,
-	};
-
-	return (
-		<Example { ...props }>
-			<div
-				style={ {
-					background: '#eee',
-					display: 'flex',
-					height: '100%',
-					width: '100%',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<span>{ content }</span>
-			</div>
-		</Example>
-	);
-};
diff --git a/packages/components/src/resizable-box/stories/index.tsx b/packages/components/src/resizable-box/stories/index.tsx
new file mode 100644
index 00000000000000..77b98ce67bbded
--- /dev/null
+++ b/packages/components/src/resizable-box/stories/index.tsx
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: ComponentMeta< typeof ResizableBox > = {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: { type: null } },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};