diff --git a/src/shared/ui/CheckboxFilter/CheckboxFilter.stories.svelte b/src/shared/ui/CheckboxFilter/CheckboxFilter.stories.svelte
index 2d0df2f..08df45a 100644
--- a/src/shared/ui/CheckboxFilter/CheckboxFilter.stories.svelte
+++ b/src/shared/ui/CheckboxFilter/CheckboxFilter.stories.svelte
@@ -65,9 +65,13 @@ const selectedFilter = createFilter({
 </script>
 
 <Story name="Default">
-    <CheckboxFilter filter={defaultFilter} displayedLabel="Zoo" />
+    {#snippet template(args)}
+        <CheckboxFilter filter={defaultFilter} displayedLabel="Zoo" {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Selected">
-    <CheckboxFilter filter={selectedFilter} displayedLabel="Shopping list" />
+    {#snippet template(args)}
+        <CheckboxFilter filter={selectedFilter} displayedLabel="Shopping list" {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/ComboControl/ComboControl.stories.svelte b/src/shared/ui/ComboControl/ComboControl.stories.svelte
index c697da4..8adc9e2 100644
--- a/src/shared/ui/ComboControl/ComboControl.stories.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.stories.svelte
@@ -51,7 +51,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
         control: defaultControl,
     }}
 >
-    <ComboControl control={defaultControl} />
+    {#snippet template(args)}
+        <ComboControl control={defaultControl} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -60,7 +62,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
         control: atMinimumControl,
     }}
 >
-    <ComboControl control={atMinimumControl} />
+    {#snippet template(args)}
+        <ComboControl control={atMinimumControl} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -69,7 +73,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
         control: atMaximumControl,
     }}
 >
-    <ComboControl control={atMaximumControl} />
+    {#snippet template(args)}
+        <ComboControl control={atMaximumControl} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -78,7 +84,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
         control: withFloatControl,
     }}
 >
-    <ComboControl control={withFloatControl} />
+    {#snippet template(args)}
+        <ComboControl control={withFloatControl} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -90,10 +98,13 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
         controlLabel: 'Open font size controls',
     }}
 >
-    <ComboControl
-        control={customLabelsControl}
-        decreaseLabel="Decrease font size"
-        increaseLabel="Increase font size"
-        controlLabel="Open font size controls"
-    />
+    {#snippet template(args)}
+        <ComboControl
+            control={customLabelsControl}
+            decreaseLabel="Decrease font size"
+            increaseLabel="Increase font size"
+            controlLabel="Open font size controls"
+            {...args}
+        />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/ComboControlV2/ComboControlV2.stories.svelte b/src/shared/ui/ComboControlV2/ComboControlV2.stories.svelte
index 232fadc..0c04937 100644
--- a/src/shared/ui/ComboControlV2/ComboControlV2.stories.svelte
+++ b/src/shared/ui/ComboControlV2/ComboControlV2.stories.svelte
@@ -52,7 +52,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Size',
     }}
 >
-    <ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" />
+    {#snippet template(args)}
+        <ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -63,7 +65,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Size',
     }}
 >
-    <ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" />
+    {#snippet template(args)}
+        <ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -74,7 +78,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Opacity',
     }}
 >
-    <ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" />
+    {#snippet template(args)}
+        <ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -85,7 +91,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Size',
     }}
 >
-    <ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" />
+    {#snippet template(args)}
+        <ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -96,7 +104,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Size',
     }}
 >
-    <ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" />
+    {#snippet template(args)}
+        <ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -107,5 +117,7 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
         label: 'Scale',
     }}
 >
-    <ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" />
+    {#snippet template(args)}
+        <ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/ContentEditable/ContentEditable.stories.svelte b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte
index c839f86..da3c1db 100644
--- a/src/shared/ui/ContentEditable/ContentEditable.stories.svelte
+++ b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte
@@ -55,7 +55,9 @@ let longValue = $state(
         letterSpacing: 0,
     }}
 >
-    <ContentEditable bind:text={value} />
+    {#snippet template(args)}
+        <ContentEditable bind:text={value} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -67,7 +69,9 @@ let longValue = $state(
         letterSpacing: 0,
     }}
 >
-    <ContentEditable bind:text={smallValue} />
+    {#snippet template(args)}
+        <ContentEditable bind:text={smallValue} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -79,7 +83,9 @@ let longValue = $state(
         letterSpacing: 0,
     }}
 >
-    <ContentEditable bind:text={largeValue} />
+    {#snippet template(args)}
+        <ContentEditable bind:text={largeValue} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -91,7 +97,9 @@ let longValue = $state(
         letterSpacing: 0.3,
     }}
 >
-    <ContentEditable bind:text={spacedValue} />
+    {#snippet template(args)}
+        <ContentEditable bind:text={spacedValue} {...args} />
+    {/snippet}
 </Story>
 
 <Story
@@ -103,5 +111,7 @@ let longValue = $state(
         letterSpacing: 0,
     }}
 >
-    <ContentEditable bind:text={longValue} />
+    {#snippet template(args)}
+        <ContentEditable bind:text={longValue} {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
index aacfa84..3514d84 100644
--- a/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
+++ b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
@@ -59,7 +59,7 @@ const { Story } = defineMeta({
 </script>
 {/* @ts-ignore */ null}
 <Story name="With hidden content">
-    {#snippet children(args)}
+    {#snippet template(args)}
         <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
             <ExpandableWrapper
                 {...args}
@@ -71,7 +71,7 @@ const { Story } = defineMeta({
 
 {/* @ts-ignore */ null}
 <Story name="Disabled" args={{ disabled: true }}>
-    {#snippet children(args)}
+    {#snippet template(args)}
         <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
             <ExpandableWrapper
                 {...args}
@@ -84,7 +84,7 @@ const { Story } = defineMeta({
 
 {/* @ts-ignore */ null}
 <Story name="With badge" args={{ badge: badgeSnippet }}>
-    {#snippet children(args)}
+    {#snippet template(args)}
         <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
             <ExpandableWrapper
                 {...args}
diff --git a/src/shared/ui/Footnote/Footnote.stories.svelte b/src/shared/ui/Footnote/Footnote.stories.svelte
index 9ef397b..c3f065b 100644
--- a/src/shared/ui/Footnote/Footnote.stories.svelte
+++ b/src/shared/ui/Footnote/Footnote.stories.svelte
@@ -17,15 +17,19 @@ const { Story } = defineMeta({
 </script>
 
 <Story name="Default">
-    <Footnote>
-        Footnote
-    </Footnote>
+    {#snippet template(args)}
+        <Footnote {...args}>
+            Footnote
+        </Footnote>
+    {/snippet}
 </Story>
 
 <Story name="With custom render">
-    <Footnote>
-        {#snippet render({ class: className })}
-            <span class={className}>Footnote</span>
-        {/snippet}
-    </Footnote>
+    {#snippet template(args)}
+        <Footnote {...args}>
+            {#snippet render({ class: className })}
+                <span class={className}>Footnote</span>
+            {/snippet}
+        </Footnote>
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/IconButton/IconButton.stories.svelte b/src/shared/ui/IconButton/IconButton.stories.svelte
index b485dde..b1e8b30 100644
--- a/src/shared/ui/IconButton/IconButton.stories.svelte
+++ b/src/shared/ui/IconButton/IconButton.stories.svelte
@@ -77,11 +77,13 @@ import XIcon from '@lucide/svelte/icons/x';
         icon: chevronRightIcon,
     }}
 >
-    <IconButton onclick={() => console.log('Default clicked')}>
-        {#snippet icon({ className })}
-            <ChevronRight class={className} />
-        {/snippet}
-    </IconButton>
+    {#snippet template(args)}
+        <IconButton onclick={() => console.log('Default clicked')} {...args}>
+            {#snippet icon({ className })}
+                <ChevronRight class={className} />
+            {/snippet}
+        </IconButton>
+    {/snippet}
 </Story>
 
 <Story
@@ -91,11 +93,13 @@ import XIcon from '@lucide/svelte/icons/x';
         disabled: true,
     }}
 >
-    <div class="flex flex-col gap-4 items-center">
-        <IconButton disabled>
-            {#snippet icon({ className })}
-                <ChevronRight class={className} />
-            {/snippet}
-        </IconButton>
-    </div>
+    {#snippet template(args)}
+        <div class="flex flex-col gap-4 items-center">
+            <IconButton disabled {...args}>
+                {#snippet icon({ className })}
+                    <ChevronRight class={className} />
+                {/snippet}
+            </IconButton>
+        </div>
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/Input/Input.stories.svelte b/src/shared/ui/Input/Input.stories.svelte
index ed7fbd1..6d9f9fb 100644
--- a/src/shared/ui/Input/Input.stories.svelte
+++ b/src/shared/ui/Input/Input.stories.svelte
@@ -50,33 +50,47 @@ const placeholder = 'Enter text';
 
 <!-- Default Story -->
 <Story name="Default" args={{ placeholder }}>
-    <Input bind:value={valueDefault} {placeholder} />
+    {#snippet template(args)}
+        <Input bind:value={valueDefault} {placeholder} {...args} />
+    {/snippet}
 </Story>
 
 <!-- Size Variants -->
 <Story name="Small" args={{ placeholder }}>
-    <Input bind:value={valueSm} {placeholder} size="sm" />
+    {#snippet template(args)}
+        <Input bind:value={valueSm} {placeholder} size="sm" {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Medium" args={{ placeholder }}>
-    <Input bind:value={valueMd} {placeholder} size="md" />
+    {#snippet template(args)}
+        <Input bind:value={valueMd} {placeholder} size="md" {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Large" args={{ placeholder }}>
-    <Input bind:value={valueLg} {placeholder} size="lg" />
+    {#snippet template(args)}
+        <Input bind:value={valueLg} {placeholder} size="lg" {...args} />
+    {/snippet}
 </Story>
 
 <!-- Ghost Variant with Sizes -->
 <Story name="Ghost Small" args={{ placeholder }}>
-    <Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" />
+    {#snippet template(args)}
+        <Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Ghost Medium" args={{ placeholder }}>
-    <Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" />
+    {#snippet template(args)}
+        <Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Ghost Large" args={{ placeholder }}>
-    <Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" />
+    {#snippet template(args)}
+        <Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" {...args} />
+    {/snippet}
 </Story>
 
 <!-- Size Comparison -->
diff --git a/src/shared/ui/Loader/Loader.stories.svelte b/src/shared/ui/Loader/Loader.stories.svelte
index 37739e3..26fc0b2 100644
--- a/src/shared/ui/Loader/Loader.stories.svelte
+++ b/src/shared/ui/Loader/Loader.stories.svelte
@@ -29,5 +29,7 @@ const { Story } = defineMeta({
 </script>
 
 <Story name="Default">
-    <Loader />
+    {#snippet template(args)}
+        <Loader {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/Logo/Logo.stories.svelte b/src/shared/ui/Logo/Logo.stories.svelte
index 28ecda6..1e94cf0 100644
--- a/src/shared/ui/Logo/Logo.stories.svelte
+++ b/src/shared/ui/Logo/Logo.stories.svelte
@@ -17,5 +17,7 @@ const { Story } = defineMeta({
 </script>
 
 <Story name="Default">
-    <Logo />
+    {#snippet template(args)}
+        <Logo {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/SearchBar/SearchBar.stories.svelte b/src/shared/ui/SearchBar/SearchBar.stories.svelte
index ab5f839..254f162 100644
--- a/src/shared/ui/SearchBar/SearchBar.stories.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.stories.svelte
@@ -39,5 +39,7 @@ let defaultSearchValue = $state('');
         placeholder: 'Type here...',
     }}
 >
-    <SearchBar bind:value={defaultSearchValue} placeholder="Type here..." />
+    {#snippet template(args)}
+        <SearchBar bind:value={defaultSearchValue} placeholder="Type here..." {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/Section/Section.stories.svelte b/src/shared/ui/Section/Section.stories.svelte
index 9e58126..50b9596 100644
--- a/src/shared/ui/Section/Section.stories.svelte
+++ b/src/shared/ui/Section/Section.stories.svelte
@@ -192,21 +192,23 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: welcomeContent,
     }}
 >
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section index={1}>
-            {#snippet title({ className })}
-                <h2 class={className}>Welcome</h2>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-lg text-text-muted">
-                        This is the default section layout with a title and content area. The section uses a 2-column
-                        grid layout with the title on the left and content on the right.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section index={1} {...args}>
+                {#snippet title({ className })}
+                    <h2 class={className}>Welcome</h2>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-lg text-text-muted">
+                            This is the default section layout with a title and content area. The section uses a
+                            2-column grid layout with the title on the left and content on the right.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
 
 <Story
@@ -216,50 +218,53 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: stickyContent,
     }}
 >
-    <div class="h-[200vh]">
-        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-            <Section
-                id="sticky-section"
-                index={1}
-                stickyTitle={true}
-                stickyOffset="20px"
-            >
-                {#snippet title({ className })}
-                    <h2 class={className}>Sticky Title</h2>
-                {/snippet}
-                {#snippet content({ className })}
-                    <div class={cn(className, 'min-w-128')}>
-                        <p class="text-lg text-text-muted mb-4">
-                            This section has a sticky title that stays fixed while you scroll through the content. Try
-                            scrolling down to see the effect.
-                        </p>
-                        <div class="space-y-4">
-                            <p class="text-text-muted">
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua.
-                            </p>
-                            <p class="text-text-muted">
-                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-                                commodo consequat.
-                            </p>
-                            <p class="text-text-muted">
-                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                                nulla pariatur.
-                            </p>
-                            <p class="text-text-muted">
-                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-                                mollim anim id est laborum.
-                            </p>
-                            <p class="text-text-muted">
-                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-                                laudantium.
+    {#snippet template(args)}
+        <div class="h-[200vh]">
+            <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+                <Section
+                    id="sticky-section"
+                    index={1}
+                    stickyTitle={true}
+                    stickyOffset="20px"
+                    {...args}
+                >
+                    {#snippet title({ className })}
+                        <h2 class={className}>Sticky Title</h2>
+                    {/snippet}
+                    {#snippet content({ className })}
+                        <div class={cn(className, 'min-w-128')}>
+                            <p class="text-lg text-text-muted mb-4">
+                                This section has a sticky title that stays fixed while you scroll through the content.
+                                Try scrolling down to see the effect.
                             </p>
+                            <div class="space-y-4">
+                                <p class="text-text-muted">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                </p>
+                                <p class="text-text-muted">
+                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat.
+                                </p>
+                                <p class="text-text-muted">
+                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                                    fugiat nulla pariatur.
+                                </p>
+                                <p class="text-text-muted">
+                                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+                                    mollim anim id est laborum.
+                                </p>
+                                <p class="text-text-muted">
+                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+                                    doloremque laudantium.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                {/snippet}
-            </Section>
+                    {/snippet}
+                </Section>
+            </div>
         </div>
-    </div>
+    {/snippet}
 </Story>
 
 <Story
@@ -271,103 +276,110 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: searchFontsContent,
     }}
 >
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section index={1}>
-            {#snippet title({ className })}
-                <h2 class={className}>Search Fonts</h2>
-            {/snippet}
-            {#snippet icon({ className })}
-                <SearchIcon class={className} />
-            {/snippet}
-            {#snippet description({ className })}
-                <span class={className}>Find your perfect typeface</span>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-lg text-text-muted">
-                        Use the search bar to find fonts by name, or use the filters to browse by category, subset, or
-                        provider.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section index={1} {...args}>
+                {#snippet title({ className })}
+                    <h2 class={className}>Search Fonts</h2>
+                {/snippet}
+                {#snippet icon({ className })}
+                    <SearchIcon class={className} />
+                {/snippet}
+                {#snippet description({ className })}
+                    <span class={className}>Find your perfect typeface</span>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-lg text-text-muted">
+                            Use the search bar to find fonts by name, or use the filters to browse by category, subset,
+                            or provider.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
 
 <Story name="Multiple Sections" tags={['!autodocs']}>
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section
-            id="section-1"
-            index={1}
-            stickyTitle={true}
-        >
-            {#snippet title({ className })}
-                <h2 class={className}>Typography</h2>
-            {/snippet}
-            {#snippet icon({ className })}
-                <SettingsIcon class={className} />
-            {/snippet}
-            {#snippet description({ className })}
-                <span class={className}>Adjust text appearance</span>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-lg text-text-muted">
-                        Control the size, weight, and line height of your text. These settings apply across the
-                        comparison view.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section
+                id="section-1"
+                index={1}
+                stickyTitle={true}
+                {...args}
+            >
+                {#snippet title({ className })}
+                    <h2 class={className}>Typography</h2>
+                {/snippet}
+                {#snippet icon({ className })}
+                    <SettingsIcon class={className} />
+                {/snippet}
+                {#snippet description({ className })}
+                    <span class={className}>Adjust text appearance</span>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-lg text-text-muted">
+                            Control the size, weight, and line height of your text. These settings apply across the
+                            comparison view.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
 
-        <Section
-            id="section-2"
-            index={2}
-            stickyTitle={true}
-        >
-            {#snippet title({ className })}
-                <h2 class={className}>Font Search</h2>
-            {/snippet}
-            {#snippet icon({ className })}
-                <SearchIcon class={className} />
-            {/snippet}
-            {#snippet description({ className })}
-                <span class={className}>Browse available typefaces</span>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-lg text-text-muted">
-                        Search through our collection of fonts from Google Fonts and Fontshare. Use filters to narrow
-                        down your selection.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
+            <Section
+                id="section-2"
+                index={2}
+                stickyTitle={true}
+                {...args}
+            >
+                {#snippet title({ className })}
+                    <h2 class={className}>Font Search</h2>
+                {/snippet}
+                {#snippet icon({ className })}
+                    <SearchIcon class={className} />
+                {/snippet}
+                {#snippet description({ className })}
+                    <span class={className}>Browse available typefaces</span>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-lg text-text-muted">
+                            Search through our collection of fonts from Google Fonts and Fontshare. Use filters to
+                            narrow down your selection.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
 
-        <Section
-            id="section-3"
-            index={3}
-            stickyTitle={true}
-        >
-            {#snippet title({ className })}
-                <h2 class={className}>Sample List</h2>
-            {/snippet}
-            {#snippet icon({ className })}
-                <ListIcon class={className} />
-            {/snippet}
-            {#snippet description({ className })}
-                <span class={className}>Preview font samples</span>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-lg text-text-muted">
-                        Browse through font samples with your custom text. The list is virtualized for optimal
-                        performance.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+            <Section
+                id="section-3"
+                index={3}
+                stickyTitle={true}
+                {...args}
+            >
+                {#snippet title({ className })}
+                    <h2 class={className}>Sample List</h2>
+                {/snippet}
+                {#snippet icon({ className })}
+                    <ListIcon class={className} />
+                {/snippet}
+                {#snippet description({ className })}
+                    <span class={className}>Preview font samples</span>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-lg text-text-muted">
+                            Browse through font samples with your custom text. The list is virtualized for optimal
+                            performance.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
 
 <Story
@@ -377,44 +389,48 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: longContent,
     }}
 >
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section
-            index={1}
-            stickyTitle={true}
-            stickyOffset="0px"
-        >
-            {#snippet title({ className })}
-                <h2 class={className}>Long Content</h2>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <div class="space-y-6">
-                        <p class="text-lg text-text-muted">
-                            This section demonstrates how the sticky title behaves with longer content. As you scroll
-                            through this content, the title remains visible at the top of the viewport.
-                        </p>
-                        <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
-                            <span class="text-text-muted">Content block 1</span>
-                        </div>
-                        <p class="text-text-muted">
-                            The sticky position is achieved using CSS position: sticky with a configurable top offset.
-                            This is useful for long sections where you want to maintain context while scrolling.
-                        </p>
-                        <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
-                            <span class="text-text-muted">Content block 2</span>
-                        </div>
-                        <p class="text-text-muted">
-                            The Intersection Observer API is used to detect when the section title scrolls out of view,
-                            triggering the optional onTitleStatusChange callback.
-                        </p>
-                        <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
-                            <span class="text-text-muted">Content block 3</span>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section
+                index={1}
+                stickyTitle={true}
+                stickyOffset="0px"
+                {...args}
+            >
+                {#snippet title({ className })}
+                    <h2 class={className}>Long Content</h2>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <div class="space-y-6">
+                            <p class="text-lg text-text-muted">
+                                This section demonstrates how the sticky title behaves with longer content. As you
+                                scroll through this content, the title remains visible at the top of the viewport.
+                            </p>
+                            <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
+                                <span class="text-text-muted">Content block 1</span>
+                            </div>
+                            <p class="text-text-muted">
+                                The sticky position is achieved using CSS position: sticky with a configurable top
+                                offset. This is useful for long sections where you want to maintain context while
+                                scrolling.
+                            </p>
+                            <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
+                                <span class="text-text-muted">Content block 2</span>
+                            </div>
+                            <p class="text-text-muted">
+                                The Intersection Observer API is used to detect when the section title scrolls out of
+                                view, triggering the optional onTitleStatusChange callback.
+                            </p>
+                            <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
+                                <span class="text-text-muted">Content block 3</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
 
 <Story
@@ -424,20 +440,22 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: minimalContent,
     }}
 >
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section>
-            {#snippet title({ className })}
-                <h2 class={className}>Minimal Section</h2>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <p class="text-text-muted">
-                        A minimal section without index, icon, or description. Just the essentials.
-                    </p>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section {...args}>
+                {#snippet title({ className })}
+                    <h2 class={className}>Minimal Section</h2>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <p class="text-text-muted">
+                            A minimal section without index, icon, or description. Just the essentials.
+                        </p>
+                    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
 
 <Story
@@ -448,28 +466,30 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
         content: customContent,
     }}
 >
-    <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
-        <Section index={42}>
-            {#snippet title({ className })}
-                <h2 class={className}>Custom Content</h2>
-            {/snippet}
-            {#snippet description({ className })}
-                <span class={className}>With interactive elements</span>
-            {/snippet}
-            {#snippet content({ className })}
-                <div class={cn(className, 'min-w-128')}>
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="p-4 bg-background-40 rounded-lg">
-                            <h3 class="font-semibold mb-2">Card 1</h3>
-                            <p class="text-sm text-text-muted">Some content here</p>
-                        </div>
-                        <div class="p-4 bg-background-40 rounded-lg">
-                            <h3 class="font-semibold mb-2">Card 2</h3>
-                            <p class="text-sm text-text-muted">More content here</p>
+    {#snippet template(args)}
+        <div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
+            <Section index={42} {...args}>
+                {#snippet title({ className })}
+                    <h2 class={className}>Custom Content</h2>
+                {/snippet}
+                {#snippet description({ className })}
+                    <span class={className}>With interactive elements</span>
+                {/snippet}
+                {#snippet content({ className })}
+                    <div class={cn(className, 'min-w-128')}>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="p-4 bg-background-40 rounded-lg">
+                                <h3 class="font-semibold mb-2">Card 1</h3>
+                                <p class="text-sm text-text-muted">Some content here</p>
+                            </div>
+                            <div class="p-4 bg-background-40 rounded-lg">
+                                <h3 class="font-semibold mb-2">Card 2</h3>
+                                <p class="text-sm text-text-muted">More content here</p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            {/snippet}
-        </Section>
-    </div>
+                {/snippet}
+            </Section>
+        </div>
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/Skeleton/Skeleton.stories.svelte b/src/shared/ui/Skeleton/Skeleton.stories.svelte
index 24c3635..15c2cef 100644
--- a/src/shared/ui/Skeleton/Skeleton.stories.svelte
+++ b/src/shared/ui/Skeleton/Skeleton.stories.svelte
@@ -29,13 +29,15 @@ const { Story } = defineMeta({
         animate: true,
     }}
 >
-    <div class="flex flex-col gap-4 p-4 w-full">
-        <div class="flex flex-col gap-2 p-4 border rounded-xl border-border-subtle bg-background-40">
-            <div class="flex items-center justify-between mb-4">
-                <Skeleton class="h-8 w-1/3" />
-                <Skeleton class="h-8 w-8 rounded-full" />
+    {#snippet template(args)}
+        <div class="flex flex-col gap-4 p-4 w-full">
+            <div class="flex flex-col gap-2 p-4 border rounded-xl border-border-subtle bg-background-40">
+                <div class="flex items-center justify-between mb-4">
+                    <Skeleton class="h-8 w-1/3" {...args} />
+                    <Skeleton class="h-8 w-8 rounded-full" {...args} />
+                </div>
+                <Skeleton class="h-32 w-full" {...args} />
             </div>
-            <Skeleton class="h-32 w-full" />
         </div>
-    </div>
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/Slider/Slider.stories.svelte b/src/shared/ui/Slider/Slider.stories.svelte
index 3495c3f..062fa7f 100644
--- a/src/shared/ui/Slider/Slider.stories.svelte
+++ b/src/shared/ui/Slider/Slider.stories.svelte
@@ -44,13 +44,19 @@ let value = $state(50);
 </script>
 
 <Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
-    <Slider bind:value />
+    {#snippet template(args)}
+        <Slider bind:value {...args} />
+    {/snippet}
 </Story>
 
 <Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
-    <Slider bind:value />
+    {#snippet template(args)}
+        <Slider bind:value {...args} />
+    {/snippet}
 </Story>
 
 <Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
-    <Slider bind:value />
+    {#snippet template(args)}
+        <Slider bind:value {...args} />
+    {/snippet}
 </Story>
diff --git a/src/shared/ui/VirtualList/VirtualList.stories.svelte b/src/shared/ui/VirtualList/VirtualList.stories.svelte
index cb835d6..de7f6a1 100644
--- a/src/shared/ui/VirtualList/VirtualList.stories.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.stories.svelte
@@ -46,29 +46,35 @@ const emptyDataSet: string[] = [];
 </script>
 
 <Story name="Small Dataset">
-    <div class="h-[400px]">
-        <VirtualList items={smallDataSet} itemHeight={40}>
-            {#snippet children({ item })}
-                <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
-            {/snippet}
-        </VirtualList>
-    </div>
+    {#snippet template(args)}
+        <div class="h-[400px]">
+            <VirtualList items={smallDataSet} itemHeight={40} {...args}>
+                {#snippet children({ item })}
+                    <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
+                {/snippet}
+            </VirtualList>
+        </div>
+    {/snippet}
 </Story>
 
 <Story name="Medium Dataset (200 items)">
-    <div class="h-[400px]">
-        <VirtualList items={mediumDataSet} itemHeight={40}>
+    {#snippet template(args)}
+        <div class="h-[400px]">
+            <VirtualList items={mediumDataSet} itemHeight={40} {...args}>
+                {#snippet children({ item })}
+                    <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
+                {/snippet}
+            </VirtualList>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Empty Dataset">
+    {#snippet template(args)}
+        <VirtualList items={emptyDataSet} itemHeight={40} {...args}>
             {#snippet children({ item })}
                 <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
             {/snippet}
         </VirtualList>
-    </div>
-</Story>
-
-<Story name="Empty Dataset">
-    <VirtualList items={emptyDataSet} itemHeight={40}>
-        {#snippet children({ item })}
-            <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
-        {/snippet}
-    </VirtualList>
+    {/snippet}
 </Story>