diff --git a/src/shared/ui/ComboControl/ComboControl.stories.svelte b/src/shared/ui/ComboControl/ComboControl.stories.svelte
new file mode 100644
index 0000000..fb0d6c7
--- /dev/null
+++ b/src/shared/ui/ComboControl/ComboControl.stories.svelte
@@ -0,0 +1,38 @@
+<script module>
+import { createTypographyControl } from '$shared/lib';
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import ComboControl from './ComboControl.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/ComboControl',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, step: 1 });
+const atMinimumControl = createTypographyControl({ value: 0, min: 0, max: 100, step: 1 });
+const atMaximumControl = createTypographyControl({ value: 100, min: 0, max: 100, step: 1 });
+const withFloatControl = createTypographyControl({ value: 77.5, min: 0, max: 100, step: 0.1 });
+</script>
+
+<Story name="Default">
+    <ComboControl control={defaultControl} />
+</Story>
+
+<Story name="At Minimum">
+    <ComboControl control={atMinimumControl} />
+</Story>
+
+<Story name="At Maximum">
+    <ComboControl control={atMaximumControl} />
+</Story>
+
+<Story name="With Float">
+    <ComboControl control={withFloatControl} />
+</Story>
diff --git a/src/shared/ui/ContentEditable/ContentEditable.stories.svelte b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte
new file mode 100644
index 0000000..6438345
--- /dev/null
+++ b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte
@@ -0,0 +1,22 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import ContentEditable from './ContentEditable.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/ContentEditable',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let value = $state('Here we can type and edit the content. Try it!');
+</script>
+
+<Story name="Default">
+    <ContentEditable bind:text={value} />
+</Story>
diff --git a/src/shared/ui/SearchBar/SearchBar.stories.svelte b/src/shared/ui/SearchBar/SearchBar.stories.svelte
new file mode 100644
index 0000000..8b47710
--- /dev/null
+++ b/src/shared/ui/SearchBar/SearchBar.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import SearchBar from './SearchBar.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/SearchBar',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let value = $state('');
+</script>
+
+<Story name="Default">
+    <SearchBar bind:value={value} placeholder="Type here...">
+        Here will be the search result
+        <br />
+        Popover closes only when the user clicks outside the search bar or presses the Escape key.
+    </SearchBar>
+</Story>
diff --git a/src/shared/ui/VirtualList/VirtualList.stories.svelte b/src/shared/ui/VirtualList/VirtualList.stories.svelte
new file mode 100644
index 0000000..eb9c710
--- /dev/null
+++ b/src/shared/ui/VirtualList/VirtualList.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import VirtualList from './VirtualList.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/VirtualList',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+const items = Array.from({ length: 10000 }, (_, i) => `${i + 1}) I will not waste chalk.`);
+</script>
+
+<Story name="Default">
+    <VirtualList items={items} itemHeight={40}>
+        {#snippet children({ item })}
+            <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
+        {/snippet}
+    </VirtualList>
+</Story>