diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
new file mode 100644
index 00000000000000..c6953ca8c2e45c
--- /dev/null
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../';
+
+export default { title: 'FontSizePicker', component: FontSizePicker };
+
+const FontSizePickerWithState = ( { ...props } ) => {
+	const [ fontSize, setFontSize ] = useState( 16 );
+	const fontSizes = [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	];
+	const fallbackFontSize = 16;
+
+	return (
+		<FontSizePicker
+			{ ...props }
+			fontSizes={ fontSizes }
+			fallbackFontSize={ fallbackFontSize }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const _default = () => {
+	return (
+		<FontSizePickerWithState />
+	);
+};
+
+export const withSlider = () => {
+	return (
+		<FontSizePickerWithState
+			withSlider={ true }
+		/>
+	);
+};
+
+export const withoutCustomSizes = () => {
+	return (
+		<FontSizePickerWithState
+			disableCustomFontSizes={ true }
+		/>
+	);
+};