diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index e6359c2b975c..526a405b6dde 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -296,42 +296,32 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Expand,
-        loadChildren: async () =>
-            (await import('../components/expand/expand.module')).ExampleTuiExpandModule,
+        loadComponent: async () => import('../components/expand'),
         title: 'Expand',
     }),
     route({
         path: DemoRoute.ElasticContainer,
-        loadChildren: async () =>
-            (await import('../components/elastic-container/elastic-container.module'))
-                .ExampleTuiElasticContainerModule,
+        loadComponent: async () => import('../components/elastic-container'),
         title: 'ElasticContainer',
     }),
     route({
         path: DemoRoute.FieldError,
-        loadChildren: async () =>
-            (await import('../pipes/field-error/field-error.module'))
-                .ExampleTuiFieldErrorModule,
+        loadComponent: async () => import('../pipes/field-error'),
         title: 'FieldError',
     }),
     route({
         path: DemoRoute.InputFiles,
-        loadChildren: async () =>
-            (await import('../components/input-files/input-files.module'))
-                .ExampleTuiFilesModule,
+        loadComponent: async () => import('../components/input-files'),
         title: 'InputFiles',
     }),
     route({
         path: DemoRoute.Group,
-        loadChildren: async () =>
-            (await import('../components/group/group.module')).ExampleTuiGroupModule,
+        loadComponent: async () => import('../components/group'),
         title: 'Group',
     }),
     route({
         path: DemoRoute.HostedDropdown,
-        loadChildren: async () =>
-            (await import('../components/hosted-dropdown/hosted-dropdown.module'))
-                .ExampleTuiHostedDropdownModule,
+        loadComponent: async () => import('../components/hosted-dropdown'),
         title: 'HostedDropdown',
     }),
     route({
@@ -341,36 +331,27 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.DropdownOpen,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-open/dropdown-open.module'))
-                .ExampleTuiDropdownOpenModule,
+        loadComponent: async () => import('../directives/dropdown-open'),
         title: 'DropdownOpen',
     }),
     route({
         path: DemoRoute.DropdownContext,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-context/dropdown-context.module'))
-                .ExampleTuiDropdownContextModule,
+        loadComponent: async () => import('../directives/dropdown-context'),
         title: 'DropdownContext',
     }),
     route({
         path: DemoRoute.DropdownHover,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-hover/dropdown-hover.module'))
-                .ExampleTuiDropdownHoverModule,
+        loadComponent: async () => import('../directives/dropdown-hover'),
         title: 'DropdownHover',
     }),
     route({
         path: DemoRoute.DropdownSelection,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-selection/dropdown-selection.module'))
-                .ExampleTuiDropdownSelectionModule,
+        loadComponent: async () => import('../directives/dropdown-selection'),
         title: 'DropdownSelection',
     }),
     route({
         path: DemoRoute.Fade,
-        loadChildren: async () =>
-            (await import('../directives/fade/fade.module')).ExampleTuiFadeDirective,
+        loadComponent: async () => import('../directives/fade'),
         title: 'Fade',
     }),
     route({
@@ -930,16 +911,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.HintPointer,
-        loadChildren: async () =>
-            (await import('../directives/hint-pointer/hint-pointer.module'))
-                .ExampleTuiHintPointerModule,
+        loadComponent: async () => import('../directives/hint-pointer'),
         title: 'HintPointer',
     }),
     route({
         path: DemoRoute.LazyLoading,
-        loadChildren: async () =>
-            (await import('../directives/lazy-loading/lazy-loading.module'))
-                .ExampleTuiLazyLoadingModule,
+        loadComponent: async () => import('../directives/lazy-loading'),
         title: 'LazyLoading',
     }),
     route({
@@ -969,9 +946,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Present,
-        loadChildren: async () =>
-            (await import('../directives/present/present.module'))
-                .ExampleTuiPresentDirective,
+        loadComponent: async () => import('../directives/present'),
         title: 'Present',
     }),
     route({
@@ -1016,9 +991,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Validator,
-        loadChildren: async () =>
-            (await import('../directives/validator/validator.module'))
-                .ExampleTuiValidatorModule,
+        loadComponent: async () => import('../directives/validator'),
         title: 'Validator',
     }),
     route({
@@ -1028,8 +1001,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Media,
-        loadChildren: async () =>
-            (await import('../directives/media/media.module')).ExampleTuiMediaModule,
+        loadComponent: async () => import('../directives/media'),
         title: 'Media',
     }),
     route({
@@ -1039,16 +1011,13 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.AutoFocus,
-        loadChildren: async () =>
-            (await import('../directives/auto-focus/auto-focus.module'))
-                .ExampleTuiAutoFocusModule,
+        loadComponent: async () => import('../directives/auto-focus'),
         title: 'AutoFocus',
     }),
     // PIPES
     route({
         path: DemoRoute.Currency,
-        loadChildren: async () =>
-            (await import('../pipes/currency/currency.module')).ExampleTuiCurrencyModule,
+        loadComponent: async () => import('../pipes/currency'),
         title: 'Currency',
     }),
     route({
diff --git a/projects/demo/src/modules/components/elastic-container/elastic-container.component.ts b/projects/demo/src/modules/components/elastic-container/elastic-container.component.ts
deleted file mode 100644
index a092955d8f66..000000000000
--- a/projects/demo/src/modules/components/elastic-container/elastic-container.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-elastic-container',
-    templateUrl: './elastic-container.template.html',
-    changeDetection,
-})
-export class ExampleTuiElasticContainerComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/components/elastic-container/elastic-container.module.ts b/projects/demo/src/modules/components/elastic-container/elastic-container.module.ts
deleted file mode 100644
index c117f596ee46..000000000000
--- a/projects/demo/src/modules/components/elastic-container/elastic-container.module.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiRepeatTimesDirective} from '@taiga-ui/cdk';
-import {TuiButtonDirective, TuiExpand, TuiLinkDirective} from '@taiga-ui/core';
-import {TuiChevronDirective, TuiElasticContainerModule} from '@taiga-ui/kit';
-import {TuiInputModule} from '@taiga-ui/legacy';
-
-import {ExampleTuiElasticContainerComponent} from './elastic-container.component';
-import {TuiElasticContainerExample1} from './examples/1';
-import {TuiElasticContainerExample2} from './examples/2';
-import {TuiElasticContainerExample3} from './examples/3';
-import {TuiElasticContainerExample4} from './examples/4';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiInputModule,
-        TuiElasticContainerModule,
-        TuiRepeatTimesDirective,
-        TuiExpand,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiElasticContainerComponent)),
-        TuiChevronDirective,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiElasticContainerComponent,
-        TuiElasticContainerExample1,
-        TuiElasticContainerExample2,
-        TuiElasticContainerExample3,
-        TuiElasticContainerExample4,
-    ],
-    exports: [ExampleTuiElasticContainerComponent],
-})
-export class ExampleTuiElasticContainerModule {}
diff --git a/projects/demo/src/modules/components/elastic-container/examples/1/index.ts b/projects/demo/src/modules/components/elastic-container/examples/1/index.ts
index 206d3711e7e3..51fbc3c3c160 100644
--- a/projects/demo/src/modules/components/elastic-container/examples/1/index.ts
+++ b/projects/demo/src/modules/components/elastic-container/examples/1/index.ts
@@ -1,14 +1,17 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLinkDirective} from '@taiga-ui/core';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-1',
+    standalone: true,
+    imports: [TuiElasticContainerModule, TuiLinkDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample1 {
+export default class ExampleComponent {
     protected readonly more =
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ipsum in elit mattis consectetur. Maecenas venenatis ligula libero, lobortis rhoncus eros aliquam a. Vivamus blandit scelerisque urna, eu euismod ipsum ultricies non. Aenean fringilla tincidunt luctus. Phasellus eleifend a enim vel aliquet. Donec accumsan orci ac nunc suscipit posuere in a turpis. Fusce hendrerit in lectus eu egestas. Donec nisl ipsum, faucibus sit amet elit eu, vehicula hendrerit purus. Duis tempus pulvinar pharetra. In volutpat, odio dictum ornare iaculis, arcu turpis blandit quam, sit amet malesuada nisl enim nec tortor. In eleifend arcu diam, ut dignissim risus elementum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pellentesque elit ac feugiat posuere. Aliquam diam ante, condimentum eget nisi nec, suscipit efficitur velit. Cras sed dolor eu tortor dapibus condimentum.';
 
diff --git a/projects/demo/src/modules/components/elastic-container/examples/2/index.ts b/projects/demo/src/modules/components/elastic-container/examples/2/index.ts
index 216436e6fe37..2458cf6ee8eb 100644
--- a/projects/demo/src/modules/components/elastic-container/examples/2/index.ts
+++ b/projects/demo/src/modules/components/elastic-container/examples/2/index.ts
@@ -1,12 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-2',
+    standalone: true,
+    imports: [TuiElasticContainerModule],
     templateUrl: './index.html',
     styleUrls: ['index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample2 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/elastic-container/examples/3/index.ts b/projects/demo/src/modules/components/elastic-container/examples/3/index.ts
index bba4be4f0074..d5d05fcc2a2b 100644
--- a/projects/demo/src/modules/components/elastic-container/examples/3/index.ts
+++ b/projects/demo/src/modules/components/elastic-container/examples/3/index.ts
@@ -1,15 +1,19 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimesDirective} from '@taiga-ui/cdk';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-3',
+    standalone: true,
+    imports: [TuiElasticContainerModule, TuiRepeatTimesDirective, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample3 {
+export default class ExampleComponent {
     protected content = 1;
 
     protected add(): void {
diff --git a/projects/demo/src/modules/components/elastic-container/examples/4/index.ts b/projects/demo/src/modules/components/elastic-container/examples/4/index.ts
index bfcddca3e75e..fca336b4c868 100644
--- a/projects/demo/src/modules/components/elastic-container/examples/4/index.ts
+++ b/projects/demo/src/modules/components/elastic-container/examples/4/index.ts
@@ -1,16 +1,30 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiArrayRemove} from '@taiga-ui/cdk';
+import {TuiButtonDirective, TuiExpand} from '@taiga-ui/core';
+import {TuiChevronDirective, TuiElasticContainerModule} from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-elastic-container-example-4',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiElasticContainerModule,
+        NgForOf,
+        TuiChevronDirective,
+        TuiExpand,
+        TuiInputModule,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample4 {
+export default class ExampleComponent {
     protected items = [
         {
             expanded: false,
diff --git a/projects/demo/src/modules/components/elastic-container/examples/import/import-module.md b/projects/demo/src/modules/components/elastic-container/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/elastic-container/examples/import/import-module.md
rename to projects/demo/src/modules/components/elastic-container/examples/import/import.md
diff --git a/projects/demo/src/modules/components/elastic-container/examples/import/insert-template.md b/projects/demo/src/modules/components/elastic-container/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/elastic-container/examples/import/insert-template.md
rename to projects/demo/src/modules/components/elastic-container/examples/import/template.md
diff --git a/projects/demo/src/modules/components/elastic-container/elastic-container.template.html b/projects/demo/src/modules/components/elastic-container/index.html
similarity index 50%
rename from projects/demo/src/modules/components/elastic-container/elastic-container.template.html
rename to projects/demo/src/modules/components/elastic-container/index.html
index e6703845addb..0daf86eb9a0c 100644
--- a/projects/demo/src/modules/components/elastic-container/elastic-container.template.html
+++ b/projects/demo/src/modules/components/elastic-container/index.html
@@ -9,40 +9,31 @@
         <tui-doc-example
             id="more"
             heading="Show more"
-            [content]="example1"
-        >
-            <tui-elastic-container-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="contenteditable"
             heading="contenteditable"
-            [content]="example2"
-        >
-            <tui-elastic-container-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="dynamic"
             heading="Add and remove content"
-            [content]="example3"
-        >
-            <tui-elastic-container-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="expand"
             heading="With animations inside"
-            [content]="example4"
-        >
-            <tui-elastic-container-example-4 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
         />
     </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/elastic-container/index.ts b/projects/demo/src/modules/components/elastic-container/index.ts
new file mode 100644
index 000000000000..926e795dfdb3
--- /dev/null
+++ b/projects/demo/src/modules/components/elastic-container/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/components/expand/examples/1/index.ts b/projects/demo/src/modules/components/expand/examples/1/index.ts
index ba457eb457c2..49c1af2c3455 100644
--- a/projects/demo/src/modules/components/expand/examples/1/index.ts
+++ b/projects/demo/src/modules/components/expand/examples/1/index.ts
@@ -1,14 +1,17 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButtonDirective, TuiExpand} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-expand-example-1',
+    standalone: true,
+    imports: [TuiButtonDirective, TuiExpand, NgForOf],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiExpandExample1 {
+export default class ExampleComponent {
     protected expanded = false;
 
     protected subpages = ['page1', 'page2', 'page3'];
diff --git a/projects/demo/src/modules/components/expand/examples/import/import-module.md b/projects/demo/src/modules/components/expand/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/expand/examples/import/import-module.md
rename to projects/demo/src/modules/components/expand/examples/import/import.md
diff --git a/projects/demo/src/modules/components/expand/examples/import/insert-template.md b/projects/demo/src/modules/components/expand/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/expand/examples/import/insert-template.md
rename to projects/demo/src/modules/components/expand/examples/import/template.md
diff --git a/projects/demo/src/modules/components/expand/expand.module.ts b/projects/demo/src/modules/components/expand/expand.module.ts
deleted file mode 100644
index f3d783863b00..000000000000
--- a/projects/demo/src/modules/components/expand/expand.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiButtonDirective, TuiExpand} from '@taiga-ui/core';
-
-import {TuiExpandExample1} from './examples/1';
-import {ExampleTuiExpandComponent} from './expand.component';
-
-@NgModule({
-    imports: [
-        TuiExpand,
-        TuiButtonDirective,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiExpandComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [ExampleTuiExpandComponent, TuiExpandExample1],
-    exports: [ExampleTuiExpandComponent],
-})
-export class ExampleTuiExpandModule {}
diff --git a/projects/demo/src/modules/components/expand/expand.template.html b/projects/demo/src/modules/components/expand/index.html
similarity index 92%
rename from projects/demo/src/modules/components/expand/expand.template.html
rename to projects/demo/src/modules/components/expand/index.html
index c11abfb33be9..964f4d7d4e65 100644
--- a/projects/demo/src/modules/components/expand/expand.template.html
+++ b/projects/demo/src/modules/components/expand/index.html
@@ -9,10 +9,9 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-expand-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -73,10 +72,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/expand/expand.style.less b/projects/demo/src/modules/components/expand/index.less
similarity index 100%
rename from projects/demo/src/modules/components/expand/expand.style.less
rename to projects/demo/src/modules/components/expand/index.less
diff --git a/projects/demo/src/modules/components/expand/expand.component.ts b/projects/demo/src/modules/components/expand/index.ts
similarity index 65%
rename from projects/demo/src/modules/components/expand/expand.component.ts
rename to projects/demo/src/modules/components/expand/index.ts
index ee412d8fb20d..1aed2fb480f7 100644
--- a/projects/demo/src/modules/components/expand/expand.component.ts
+++ b/projects/demo/src/modules/components/expand/index.ts
@@ -8,31 +8,24 @@ import {
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TUI_EXPAND_LOADED, TuiExpandComponent} from '@taiga-ui/core';
+import {TuiDemo} from '@demo/utils';
+import {TUI_EXPAND_LOADED, TuiExpand, TuiExpandComponent} from '@taiga-ui/core';
 import {timer} from 'rxjs';
 
 @Component({
-    selector: 'example-expand',
-    templateUrl: './expand.template.html',
-    styleUrls: ['./expand.style.less'],
+    standalone: true,
+    imports: [TuiDemo, TuiExpand],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection,
 })
-export class ExampleTuiExpandComponent {
+export default class PageComponent {
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
     @ViewChild(TuiExpandComponent, {read: ElementRef})
     protected expand?: ElementRef;
 
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
     protected expanded = false;
 
     protected async = false;
diff --git a/projects/demo/src/modules/components/experimental/navigation/examples/1/index.ts b/projects/demo/src/modules/components/experimental/navigation/examples/1/index.ts
index a52dd0f5b8ec..69265b198d5e 100644
--- a/projects/demo/src/modules/components/experimental/navigation/examples/1/index.ts
+++ b/projects/demo/src/modules/components/experimental/navigation/examples/1/index.ts
@@ -10,7 +10,7 @@ import {
     TuiDropdownDirective,
     TuiDropdownOpenDirective,
     TuiDropdownPositionSidedDirective,
-    TuiExpandComponent,
+    TuiExpand,
     TuiIconComponent,
     TuiOptionComponent,
     TuiSurfaceDirective,
@@ -46,7 +46,7 @@ import {TuiCardLargeDirective, TuiHeaderDirective} from '@taiga-ui/layout';
         RouterLinkActive,
         TuiAppearanceDirective,
         TuiDropdownPositionSidedDirective,
-        TuiExpandComponent,
+        TuiExpand,
         TuiBadgeDirective,
         TuiTabsHorizontalDirective,
         TuiTabDirective,
diff --git a/projects/demo/src/modules/components/group/examples/1/index.style.less b/projects/demo/src/modules/components/group/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/components/group/examples/1/index.style.less
rename to projects/demo/src/modules/components/group/examples/1/index.less
diff --git a/projects/demo/src/modules/components/group/examples/1/index.ts b/projects/demo/src/modules/components/group/examples/1/index.ts
index 79ec39aa3fae..55e2fc266c4c 100644
--- a/projects/demo/src/modules/components/group/examples/1/index.ts
+++ b/projects/demo/src/modules/components/group/examples/1/index.ts
@@ -1,16 +1,37 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiErrorComponent,
+    TuiGroupDirective,
+    TuiHintOptionsDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiDataListWrapperModule, TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputModule, TuiMultiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-group-example-1',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiGroupDirective,
+        TuiInputModule,
+        TuiHintOptionsDirective,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+        TuiMultiSelectModule,
+        TuiTextfieldControllerModule,
+        TuiDataListWrapperModule,
+    ],
     templateUrl: './index.html',
-    styleUrls: ['./index.style.less'],
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiGroupExample1 {
+export default class ExampleComponent {
     protected readonly items = ['Option 1', 'Option 2', 'Option 3'];
 
     protected testForm = new FormGroup({
diff --git a/projects/demo/src/modules/components/group/examples/2/index.ts b/projects/demo/src/modules/components/group/examples/2/index.ts
index d09b0cca35c5..7ddc9a288d6d 100644
--- a/projects/demo/src/modules/components/group/examples/2/index.ts
+++ b/projects/demo/src/modules/components/group/examples/2/index.ts
@@ -1,12 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButtonDirective, TuiGroupDirective} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-group-example-2',
+    standalone: true,
+    imports: [TuiGroupDirective, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiGroupExample2 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/group/examples/3/index.ts b/projects/demo/src/modules/components/group/examples/3/index.ts
index e9b907be66d9..e358d6f9ffa1 100644
--- a/projects/demo/src/modules/components/group/examples/3/index.ts
+++ b/projects/demo/src/modules/components/group/examples/3/index.ts
@@ -1,15 +1,23 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiGroupDirective} from '@taiga-ui/core';
+import {TuiBlockDirective, TuiRadioComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-group-example-3',
+    standalone: true,
+    imports: [
+        TuiGroupDirective,
+        ReactiveFormsModule,
+        TuiBlockDirective,
+        TuiRadioComponent,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiGroupExample3 {
+export default class ExampleComponent {
     protected testForm = new FormGroup({
         testValue: new FormControl('orange'),
     });
diff --git a/projects/demo/src/modules/components/group/examples/4/index.ts b/projects/demo/src/modules/components/group/examples/4/index.ts
index bc1d4774ab57..06dc31c0b1b9 100644
--- a/projects/demo/src/modules/components/group/examples/4/index.ts
+++ b/projects/demo/src/modules/components/group/examples/4/index.ts
@@ -1,16 +1,25 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiGroupDirective, TuiTitleDirective} from '@taiga-ui/core';
+import {TuiBlockDirective, TuiRadioComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-group-example-4',
+    standalone: true,
+    imports: [
+        TuiGroupDirective,
+        ReactiveFormsModule,
+        TuiBlockDirective,
+        TuiTitleDirective,
+        TuiRadioComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiGroupExample4 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(''),
     });
diff --git a/projects/demo/src/modules/components/group/examples/import/import-module.md b/projects/demo/src/modules/components/group/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/group/examples/import/import-module.md
rename to projects/demo/src/modules/components/group/examples/import/import.md
diff --git a/projects/demo/src/modules/components/group/examples/import/insert-template.md b/projects/demo/src/modules/components/group/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/group/examples/import/insert-template.md
rename to projects/demo/src/modules/components/group/examples/import/template.md
diff --git a/projects/demo/src/modules/components/group/group.component.ts b/projects/demo/src/modules/components/group/group.component.ts
deleted file mode 100644
index 1ea60936d449..000000000000
--- a/projects/demo/src/modules/components/group/group.component.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import type {TuiOrientation, TuiSizeL} from '@taiga-ui/core';
-
-@Component({
-    selector: 'example-group',
-    templateUrl: './group.template.html',
-    styleUrls: ['./group.style.less'],
-    changeDetection,
-})
-export class ExampleTuiGroupComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.style.less?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    protected rounded = true;
-    protected collapsed = false;
-
-    protected readonly orientationVariants: readonly TuiOrientation[] = [
-        'horizontal',
-        'vertical',
-    ];
-
-    protected orientation: TuiOrientation = this.orientationVariants[0];
-
-    protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
-
-    protected size: TuiSizeL = this.sizeVariants[0];
-}
diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts
deleted file mode 100644
index c3c15cb03ab3..000000000000
--- a/projects/demo/src/modules/components/group/group.module.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiErrorComponent,
-    TuiGroupDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiTextfieldControllerModule,
-    TuiTitleDirective,
-} from '@taiga-ui/core';
-import {
-    TuiBadgeDirective,
-    TuiBlockDirective,
-    TuiDataListWrapperModule,
-    TuiFieldErrorPipeModule,
-    TuiRadioComponent,
-} from '@taiga-ui/kit';
-import {
-    TuiComboBoxModule,
-    TuiInputModule,
-    TuiInputNumberModule,
-    TuiMultiSelectModule,
-    TuiSelectModule,
-} from '@taiga-ui/legacy';
-
-import {TuiGroupExample1} from './examples/1';
-import {TuiGroupExample2} from './examples/2';
-import {TuiGroupExample3} from './examples/3';
-import {TuiGroupExample4} from './examples/4';
-import {ExampleTuiGroupComponent} from './group.component';
-
-@NgModule({
-    imports: [
-        TuiLinkDirective,
-        TuiBadgeDirective,
-        TuiButtonDirective,
-        TuiSelectModule,
-        TuiGroupDirective,
-        TuiInputModule,
-        TuiErrorComponent,
-        TuiFieldErrorPipeModule,
-        TuiComboBoxModule,
-        TuiCurrencyPipe,
-        TuiInputNumberModule,
-        TuiDataList,
-        TuiDataListWrapperModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiMultiSelectModule,
-        TuiBlockDirective,
-        TuiRadioComponent,
-        tuiGetDocModules(ExampleTuiGroupComponent),
-        TuiTitleDirective,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiGroupComponent,
-        TuiGroupExample1,
-        TuiGroupExample2,
-        TuiGroupExample3,
-        TuiGroupExample4,
-    ],
-    exports: [ExampleTuiGroupComponent],
-})
-export class ExampleTuiGroupModule {}
diff --git a/projects/demo/src/modules/components/group/group.template.html b/projects/demo/src/modules/components/group/index.html
similarity index 87%
rename from projects/demo/src/modules/components/group/group.template.html
rename to projects/demo/src/modules/components/group/index.html
index 3e1250e0969b..077a889fe932 100644
--- a/projects/demo/src/modules/components/group/group.template.html
+++ b/projects/demo/src/modules/components/group/index.html
@@ -43,35 +43,31 @@
         <tui-doc-example
             id="inputs"
             heading="Inputs"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
             [fullsize]="true"
-        >
-            <tui-group-example-1 />
-        </tui-doc-example>
+        />
 
         <tui-doc-example
             id="buttons"
             heading="ButtonGroup"
-            [content]="example2"
-        >
-            <tui-group-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="vertical"
             heading="Vertical group"
-            [content]="example3"
-        >
-            <tui-group-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="directive"
             heading="Directive"
-            [content]="example4"
-        >
-            <tui-group-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -153,10 +149,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/group/group.style.less b/projects/demo/src/modules/components/group/index.less
similarity index 100%
rename from projects/demo/src/modules/components/group/group.style.less
rename to projects/demo/src/modules/components/group/index.less
diff --git a/projects/demo/src/modules/components/group/index.ts b/projects/demo/src/modules/components/group/index.ts
new file mode 100644
index 000000000000..c9a993df8b58
--- /dev/null
+++ b/projects/demo/src/modules/components/group/index.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import type {TuiOrientation, TuiSizeL} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiGroupDirective, TuiLinkDirective} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        RouterLink,
+        TuiLinkDirective,
+        TuiGroupDirective,
+        TuiButtonDirective,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+})
+export default class PageComponent {
+    protected rounded = true;
+    protected collapsed = false;
+
+    protected readonly orientationVariants: readonly TuiOrientation[] = [
+        'horizontal',
+        'vertical',
+    ];
+
+    protected orientation: TuiOrientation = this.orientationVariants[0];
+
+    protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
+
+    protected size: TuiSizeL = this.sizeVariants[0];
+}
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/1/index.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/1/index.ts
index c5df8143b337..2ebecf492a12 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/1/index.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/1/index.ts
@@ -1,16 +1,32 @@
+import {NgForOf} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHostedDropdownComponent} from '@taiga-ui/core';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiHostedDropdownComponent,
+    TuiHostedDropdownModule,
+    TuiOptGroupDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-hosted-dropdown-example-1',
+    standalone: true,
+    imports: [
+        TuiHostedDropdownModule,
+        TuiButtonDirective,
+        TuiDataListComponent,
+        TuiOptGroupDirective,
+        TuiOptionComponent,
+        NgForOf,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiHostedDropdownExample1 {
+export default class ExampleComponent {
     @ViewChild(TuiHostedDropdownComponent)
     protected component?: TuiHostedDropdownComponent;
 
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/2/index.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/2/index.ts
index 2723243a6a42..8279a0bf92c3 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/2/index.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/2/index.ts
@@ -1,16 +1,42 @@
+import {NgForOf} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHostedDropdownComponent} from '@taiga-ui/core';
+import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiGroupDirective,
+    TuiHostedDropdownComponent,
+    TuiHostedDropdownModule,
+    TuiOptionComponent,
+    TuiSvgComponent,
+} from '@taiga-ui/core';
+import {TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-hosted-dropdown-example-2',
+    standalone: true,
+    imports: [
+        TuiHostedDropdownModule,
+        TuiGroupDirective,
+        TuiButtonDirective,
+        TuiSvgComponent,
+        TuiSelectModule,
+        TuiActiveZoneDirective,
+        FormsModule,
+        TuiDataListWrapperModule,
+        TuiDataListComponent,
+        TuiOptionComponent,
+        NgForOf,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiHostedDropdownExample2 {
+export default class ExampleComponent {
     @ViewChild(TuiHostedDropdownComponent)
     protected component?: TuiHostedDropdownComponent;
 
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/3/index.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/3/index.ts
index c211ef4c5aea..a063a5a1279e 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/3/index.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/3/index.ts
@@ -1,15 +1,34 @@
+import {NgForOf, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiDataListComponent,
+    TuiHostedDropdownModule,
+    TuiLinkDirective,
+    TuiOptGroupDirective,
+    TuiOptionComponent,
+    TuiSvgComponent,
+} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-hosted-dropdown-example-3',
+    standalone: true,
+    imports: [
+        TuiHostedDropdownModule,
+        TuiSvgComponent,
+        TuiLinkDirective,
+        TuiDataListComponent,
+        TuiOptGroupDirective,
+        NgForOf,
+        TuiOptionComponent,
+        NgIf,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiHostedDropdownExample3 {
+export default class ExampleComponent {
     protected open = false;
 
     protected readonly items = [
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/4/index.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/4/index.ts
index 73f002dbb5a6..0510dadd032b 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/4/index.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/4/index.ts
@@ -1,15 +1,25 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButtonDirective, TuiHostedDropdownModule} from '@taiga-ui/core';
+import {TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiMultiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-hosted-dropdown-example-4',
+    standalone: true,
+    imports: [
+        TuiHostedDropdownModule,
+        ReactiveFormsModule,
+        TuiButtonDirective,
+        TuiDataListWrapperModule,
+        TuiMultiSelectModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiHostedDropdownExample4 {
+export default class ExampleComponent {
     protected readonly form = new FormGroup({
         control: new FormControl<string[]>([]),
     });
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts
deleted file mode 100644
index 866246d8c315..000000000000
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Directive} from '@angular/core';
-import {tuiInjectElement} from '@taiga-ui/cdk';
-import type {TuiPoint} from '@taiga-ui/core';
-import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core';
-
-@Directive({
-    selector: '[topRight]',
-    providers: [tuiAsPositionAccessor(TopRightDirective)],
-})
-export class TopRightDirective extends TuiPositionAccessor {
-    private readonly el = tuiInjectElement();
-
-    public readonly type = 'dropdown';
-
-    public getPosition({height}: ClientRect): TuiPoint {
-        const {right, top} = this.el.getBoundingClientRect();
-
-        return [top - height, right];
-    }
-}
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/5/index.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/5/index.ts
index 8f3734e01cf1..0ea9f4c9d697 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/5/index.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/5/index.ts
@@ -1,12 +1,38 @@
-import {Component} from '@angular/core';
+import {Component, Directive} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiInjectElement} from '@taiga-ui/cdk';
+import {
+    tuiAsPositionAccessor,
+    TuiButtonDirective,
+    TuiHostedDropdownModule,
+    type TuiPoint,
+    TuiPositionAccessor,
+} from '@taiga-ui/core';
+
+@Directive({
+    standalone: true,
+    selector: '[topRight]',
+    providers: [tuiAsPositionAccessor(TopRightDirective)],
+})
+class TopRightDirective extends TuiPositionAccessor {
+    private readonly el = tuiInjectElement();
+
+    public readonly type = 'dropdown';
+
+    public getPosition({height}: ClientRect): TuiPoint {
+        const {right, top} = this.el.getBoundingClientRect();
+
+        return [top - height, right];
+    }
+}
 
 @Component({
-    selector: 'tui-hosted-dropdown-example-5',
+    standalone: true,
+    imports: [TuiHostedDropdownModule, TopRightDirective, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiHostedDropdownExample5 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.md b/projects/demo/src/modules/components/hosted-dropdown/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.md
rename to projects/demo/src/modules/components/hosted-dropdown/examples/import/import.md
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.md b/projects/demo/src/modules/components/hosted-dropdown/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.md
rename to projects/demo/src/modules/components/hosted-dropdown/examples/import/template.md
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts
deleted file mode 100644
index 5d3cdc2ab7d2..000000000000
--- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {Component, forwardRef} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-import {AbstractExampleTuiDropdown} from '../abstract/dropdown';
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-tui-hosted-dropdown',
-    templateUrl: './hosted-dropdown.template.html',
-    styleUrls: ['./hosted-dropdown.style.less'],
-    changeDetection,
-    providers: [
-        {
-            provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiHostedDropdownComponent),
-        },
-    ],
-})
-export class ExampleTuiHostedDropdownComponent extends AbstractExampleTuiDropdown {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-        'accessor.ts': import('./examples/5/accessor.ts?raw'),
-    };
-
-    protected open = false;
-
-    protected sided = false;
-
-    protected input = '';
-
-    protected canOpenVariants = [true, 'getter this.input.length > 2'];
-
-    protected canOpenSelected = this.canOpenVariants[0];
-
-    protected readonly contentVariants = ['Template', 'Custom string'];
-
-    protected content = this.contentVariants[0];
-
-    protected get template(): boolean {
-        return this.content === 'Template';
-    }
-
-    protected get canOpen(): boolean {
-        return this.canOpenSelected === true || this.input.length > 2;
-    }
-
-    protected onInput(input: string): void {
-        this.input = input;
-        this.open = this.canOpen;
-    }
-
-    protected onClick(): void {
-        this.open = false;
-    }
-}
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts
deleted file mode 100644
index 38fd0af2accd..000000000000
--- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiGroupDirective,
-    TuiHostedDropdownModule,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiSvgComponent,
-} from '@taiga-ui/core';
-import {TuiDataListWrapperModule, TuiTabsModule} from '@taiga-ui/kit';
-import {TuiInputModule, TuiMultiSelectModule, TuiSelectModule} from '@taiga-ui/legacy';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {DropdownDocumentationModule} from '../abstract/dropdown-documentation/dropdown-documentation.module';
-import {TuiHostedDropdownExample1} from './examples/1';
-import {TuiHostedDropdownExample2} from './examples/2';
-import {TuiHostedDropdownExample3} from './examples/3';
-import {TuiHostedDropdownExample4} from './examples/4';
-import {TuiHostedDropdownExample5} from './examples/5';
-import {TopRightDirective} from './examples/5/accessor';
-import {ExampleTuiHostedDropdownComponent} from './hosted-dropdown.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        PolymorpheusModule,
-        FormsModule,
-        TuiHostedDropdownModule,
-        TuiNotificationComponent,
-        TuiTabsModule,
-        TuiInputModule,
-        TuiButtonDirective,
-        TuiGroupDirective,
-        TuiSvgComponent,
-        TuiLinkDirective,
-        TuiSelectModule,
-        TuiActiveZoneDirective,
-        TuiDropdownModule,
-        TuiDataList,
-        TuiDataListWrapperModule,
-        DropdownDocumentationModule,
-        TuiAddonDoc,
-        TuiMultiSelectModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHostedDropdownComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [
-        TuiHostedDropdownExample1,
-        TuiHostedDropdownExample2,
-        TuiHostedDropdownExample3,
-        TuiHostedDropdownExample4,
-        TuiHostedDropdownExample5,
-        TopRightDirective,
-        ExampleTuiHostedDropdownComponent,
-    ],
-    exports: [ExampleTuiHostedDropdownComponent],
-})
-export class ExampleTuiHostedDropdownModule {}
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html b/projects/demo/src/modules/components/hosted-dropdown/index.html
similarity index 86%
rename from projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html
rename to projects/demo/src/modules/components/hosted-dropdown/index.html
index 33873b2eafca..3c8df687d236 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html
+++ b/projects/demo/src/modules/components/hosted-dropdown/index.html
@@ -24,42 +24,37 @@
         <tui-doc-example
             id="menu"
             heading="Menu"
-            [content]="example1"
-        >
-            <tui-hosted-dropdown-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
 
         <tui-doc-example
             id="tui-dropdown-host"
             heading="With custom host"
-            [content]="example2"
-        >
-            <tui-hosted-dropdown-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="native"
             heading="With link"
-            [content]="example3"
-        >
-            <tui-hosted-dropdown-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="complex"
             heading="Complex example"
-            [content]="example4"
-        >
-            <tui-hosted-dropdown-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="position"
             heading="Custom positioning"
-            [content]="example5"
-        >
-            <tui-hosted-dropdown-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -150,10 +145,5 @@
         <dropdown-documentation />
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.style.less b/projects/demo/src/modules/components/hosted-dropdown/index.less
similarity index 100%
rename from projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.style.less
rename to projects/demo/src/modules/components/hosted-dropdown/index.less
diff --git a/projects/demo/src/modules/components/hosted-dropdown/index.ts b/projects/demo/src/modules/components/hosted-dropdown/index.ts
new file mode 100644
index 000000000000..350bc60a2692
--- /dev/null
+++ b/projects/demo/src/modules/components/hosted-dropdown/index.ts
@@ -0,0 +1,63 @@
+import {Component, forwardRef} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiButtonDirective, TuiHostedDropdownModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/legacy';
+
+import {AbstractExampleTuiDropdown} from '../abstract/dropdown';
+import {DropdownDocumentationModule} from '../abstract/dropdown-documentation/dropdown-documentation.module';
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiHostedDropdownModule,
+        TuiInputModule,
+        FormsModule,
+        TuiButtonDirective,
+        DropdownDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => PageComponent),
+        },
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiDropdown {
+    protected open = false;
+
+    protected sided = false;
+
+    protected input = '';
+
+    protected canOpenVariants = [true, 'getter this.input.length > 2'];
+
+    protected canOpenSelected = this.canOpenVariants[0];
+
+    protected readonly contentVariants = ['Template', 'Custom string'];
+
+    protected content = this.contentVariants[0];
+
+    protected get template(): boolean {
+        return this.content === 'Template';
+    }
+
+    protected get canOpen(): boolean {
+        return this.canOpenSelected === true || this.input.length > 2;
+    }
+
+    protected onInput(input: string): void {
+        this.input = input;
+        this.open = this.canOpen;
+    }
+
+    protected onClick(): void {
+        this.open = false;
+    }
+}
diff --git a/projects/demo/src/modules/components/icons/icons-mapping/index.ts b/projects/demo/src/modules/components/icons/icons-mapping/index.ts
index dcf47722172e..3671760d2e94 100644
--- a/projects/demo/src/modules/components/icons/icons-mapping/index.ts
+++ b/projects/demo/src/modules/components/icons/icons-mapping/index.ts
@@ -4,7 +4,7 @@ import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiButtonDirective, TuiExpandComponent, TuiLinkDirective} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiExpand, TuiLinkDirective} from '@taiga-ui/core';
 import {tuiKitIcons} from '@taiga-ui/icons';
 
 @Component({
@@ -14,7 +14,7 @@ import {tuiKitIcons} from '@taiga-ui/icons';
         TuiLinkDirective,
         RouterLink,
         TuiButtonDirective,
-        TuiExpandComponent,
+        TuiExpand,
         ClipboardModule,
     ],
     templateUrl: './index.html',
diff --git a/projects/demo/src/modules/components/input-files/examples/1/index.ts b/projects/demo/src/modules/components/input-files/examples/1/index.ts
index af30b87a2588..ba445a9be960 100644
--- a/projects/demo/src/modules/components/input-files/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/1/index.ts
@@ -1,18 +1,36 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiFileLike} from '@taiga-ui/kit';
+import {
+    TuiFileComponent,
+    TuiFileRejectedPipe,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 import type {Observable} from 'rxjs';
 import {finalize, map, of, Subject, switchMap, timer} from 'rxjs';
 
 @Component({
-    selector: 'tui-input-files-example-1',
+    standalone: true,
+    imports: [
+        NgIf,
+        TuiInputFilesComponent,
+        ReactiveFormsModule,
+        TuiInputFilesDirective,
+        TuiFilesComponent,
+        TuiFileComponent,
+        TuiFileRejectedPipe,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiFileLike | null>(null);
     protected readonly failedFiles$ = new Subject<TuiFileLike | null>();
     protected readonly loadingFiles$ = new Subject<TuiFileLike | null>();
diff --git a/projects/demo/src/modules/components/input-files/examples/2/index.ts b/projects/demo/src/modules/components/input-files/examples/2/index.ts
index e47bc0e5c6a5..1f3323b765ad 100644
--- a/projects/demo/src/modules/components/input-files/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/2/index.ts
@@ -1,19 +1,41 @@
+import {AsyncPipe, NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import type {AbstractControl, ValidatorFn} from '@angular/forms';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiValidationError} from '@taiga-ui/cdk';
-import {tuiFilesAccepted} from '@taiga-ui/kit';
+import {TuiErrorComponent} from '@taiga-ui/core';
+import {
+    TuiFieldErrorPipeModule,
+    TuiFileComponent,
+    TuiFileRejectedPipe,
+    tuiFilesAccepted,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 @Component({
-    selector: 'tui-input-files-example-2',
+    standalone: true,
+    imports: [
+        TuiInputFilesComponent,
+        TuiInputFilesDirective,
+        ReactiveFormsModule,
+        TuiFilesComponent,
+        TuiFileComponent,
+        NgForOf,
+        AsyncPipe,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        TuiFileRejectedPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample2 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<File[]>([], [maxFilesLength(5)]);
     protected readonly accepted$ = this.control.valueChanges.pipe(
         map(() => tuiFilesAccepted(this.control)),
diff --git a/projects/demo/src/modules/components/input-files/examples/3/index.ts b/projects/demo/src/modules/components/input-files/examples/3/index.ts
index 849bf165bf1d..b5a62cec1e4b 100644
--- a/projects/demo/src/modules/components/input-files/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/3/index.ts
@@ -1,17 +1,29 @@
+import {NgForOf, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_IS_E2E} from '@taiga-ui/cdk';
+import {TUI_IS_E2E, TuiItemDirective} from '@taiga-ui/cdk';
+import {TuiLinkDirective, TuiSvgComponent} from '@taiga-ui/core';
 import type {TuiFileLike} from '@taiga-ui/kit';
+import {TuiFileComponent, TuiFilesComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-files-example-3',
+    standalone: true,
+    imports: [
+        TuiFilesComponent,
+        TuiFileComponent,
+        NgForOf,
+        NgIf,
+        TuiItemDirective,
+        TuiLinkDirective,
+        TuiSvgComponent,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample3 {
+export default class ExampleComponent {
     protected readonly isE2E = inject(TUI_IS_E2E);
 
     protected readonly control = new FormControl<TuiFileLike | null>(null);
diff --git a/projects/demo/src/modules/components/input-files/examples/4/index.ts b/projects/demo/src/modules/components/input-files/examples/4/index.ts
index 1f7d9287f240..847bcda92465 100644
--- a/projects/demo/src/modules/components/input-files/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/4/index.ts
@@ -1,15 +1,19 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiItemDirective} from '@taiga-ui/cdk';
 import type {TuiFileLike} from '@taiga-ui/kit';
+import {TuiFileComponent, TuiFilesComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-files-example-4',
+    standalone: true,
+    imports: [TuiFilesComponent, TuiFileComponent, NgForOf, TuiItemDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample4 {
+export default class ExampleComponent {
     protected height = 3;
 
     protected readonly files: readonly TuiFileLike[] = [
diff --git a/projects/demo/src/modules/components/input-files/examples/5/index.ts b/projects/demo/src/modules/components/input-files/examples/5/index.ts
index e9dc1cd6190a..77a3408f81cd 100644
--- a/projects/demo/src/modules/components/input-files/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/5/index.ts
@@ -1,17 +1,37 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLinkDirective, TuiSvgComponent} from '@taiga-ui/core';
 import type {TuiFileLike} from '@taiga-ui/kit';
+import {
+    TuiAvatarComponent,
+    TuiFileComponent,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-files-example-5',
+    standalone: true,
+    imports: [
+        TuiInputFilesComponent,
+        TuiInputFilesDirective,
+        ReactiveFormsModule,
+        NgIf,
+        TuiAvatarComponent,
+        TuiLinkDirective,
+        TuiFilesComponent,
+        TuiFileComponent,
+        TuiSvgComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample5 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiFileLike | null>(null);
 
     protected readonly file: TuiFileLike = {
diff --git a/projects/demo/src/modules/components/input-files/examples/6/index.ts b/projects/demo/src/modules/components/input-files/examples/6/index.ts
index 94464318ffa7..69cb0f2257bc 100644
--- a/projects/demo/src/modules/components/input-files/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/6/index.ts
@@ -1,16 +1,32 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiFileLike} from '@taiga-ui/kit';
+import {
+    TuiFileComponent,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-files-example-6',
+    standalone: true,
+    imports: [
+        NgIf,
+        TuiInputFilesComponent,
+        TuiInputFilesDirective,
+        ReactiveFormsModule,
+        TuiFilesComponent,
+        TuiFileComponent,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample6 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiFileLike | null>(null);
 
     protected removeFile(): void {
diff --git a/projects/demo/src/modules/components/input-files/examples/7/index.ts b/projects/demo/src/modules/components/input-files/examples/7/index.ts
index d2ec9a816d46..27fc9426c992 100644
--- a/projects/demo/src/modules/components/input-files/examples/7/index.ts
+++ b/projects/demo/src/modules/components/input-files/examples/7/index.ts
@@ -1,14 +1,33 @@
+import {AsyncPipe, NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiFileComponent,
+    TuiFileRejectedPipe,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-files-example-7',
+    standalone: true,
+    imports: [
+        TuiInputFilesComponent,
+        TuiInputFilesDirective,
+        FormsModule,
+        TuiFilesComponent,
+        TuiFileComponent,
+        NgForOf,
+        TuiFileRejectedPipe,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputFilesExample7 {
+export default class ExampleComponent {
     protected files: File[] = [];
     protected rejected: File[] = [];
 
diff --git a/projects/demo/src/modules/components/input-files/examples/import/import-module.md b/projects/demo/src/modules/components/input-files/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/input-files/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-files/examples/import/import.md
diff --git a/projects/demo/src/modules/components/input-files/examples/import/insert-template.md b/projects/demo/src/modules/components/input-files/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-files/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-files/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-files/input-files.template.html b/projects/demo/src/modules/components/input-files/index.html
similarity index 89%
rename from projects/demo/src/modules/components/input-files/input-files.template.html
rename to projects/demo/src/modules/components/input-files/index.html
index 888142bf6f87..4a848562270c 100644
--- a/projects/demo/src/modules/components/input-files/input-files.template.html
+++ b/projects/demo/src/modules/components/input-files/index.html
@@ -9,47 +9,43 @@
         <tui-doc-example
             id="single"
             heading="Basic single"
-            [content]="example1"
-        >
-            <tui-input-files-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="multiple"
             heading="multiple"
-            [content]="example2"
-        >
-            <tui-input-files-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="standalone-files"
             heading="Standalone files"
-            [content]="example3"
-        >
-            <tui-input-files-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="with-button"
             heading="With button"
-            [content]="example4"
-        >
-            <tui-input-files-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="custom"
             heading="Custom content"
-            [content]="example5"
-        >
-            <tui-input-files-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
 
         <tui-doc-example
             id="front-camera"
             heading="Camera capture"
-            [content]="example6"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample: 'html,ts'"
         >
             <tui-notification
                 status="warning"
@@ -57,16 +53,14 @@
             >
                 The capture attribute works only on mobile browsers
             </tui-notification>
-            <tui-input-files-example-6 />
         </tui-doc-example>
 
         <tui-doc-example
             id="model"
             heading="ngModel"
-            [content]="example7"
-        >
-            <tui-input-files-example-7 />
-        </tui-doc-example>
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -229,10 +223,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/input-files/input-files.component.ts b/projects/demo/src/modules/components/input-files/index.ts
similarity index 50%
rename from projects/demo/src/modules/components/input-files/input-files.component.ts
rename to projects/demo/src/modules/components/input-files/index.ts
index 6511d1247614..3ad0dbc16d1c 100644
--- a/projects/demo/src/modules/components/input-files/input-files.component.ts
+++ b/projects/demo/src/modules/components/input-files/index.ts
@@ -1,65 +1,45 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import {tuiProvide} from '@taiga-ui/cdk';
+import {TuiDemo} from '@demo/utils';
+import {TuiItemDirective, tuiProvide} from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
-import {tuiFilesAccepted} from '@taiga-ui/kit';
+import {TuiNotificationComponent} from '@taiga-ui/core';
+import {
+    TuiFileComponent,
+    TuiFileRejectedPipe,
+    tuiFilesAccepted,
+    TuiFilesComponent,
+    TuiInputFilesComponent,
+    TuiInputFilesDirective,
+} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
 @Component({
-    selector: 'example-tui-input-files',
-    templateUrl: './input-files.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputFilesComponent,
+        TuiInputFilesDirective,
+        ReactiveFormsModule,
+        TuiFilesComponent,
+        TuiFileComponent,
+        TuiItemDirective,
+        TuiFileRejectedPipe,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputFilesComponent)],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export class ExampleTuiInputFilesComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public override readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
     public override size = this.sizeVariants[0];
     public readonly control = new FormControl<File[] | null>(null);
 
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
-    protected readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-    };
-
-    protected readonly example7: TuiDocExample = {
-        TypeScript: import('./examples/7/index.ts?raw'),
-        HTML: import('./examples/7/index.html?raw'),
-    };
-
     protected readonly files$ = this.control.valueChanges.pipe(
         map(() => tuiFilesAccepted(this.control)),
     );
diff --git a/projects/demo/src/modules/components/input-files/input-files.module.ts b/projects/demo/src/modules/components/input-files/input-files.module.ts
deleted file mode 100644
index 3533945f2dbd..000000000000
--- a/projects/demo/src/modules/components/input-files/input-files.module.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiErrorComponent,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiSvgComponent,
-} from '@taiga-ui/core';
-import {TuiAvatarComponent, TuiFieldErrorPipeModule, TuiFilesModule} from '@taiga-ui/kit';
-
-import {TuiInputFilesExample1} from './examples/1';
-import {TuiInputFilesExample2} from './examples/2';
-import {TuiInputFilesExample3} from './examples/3';
-import {TuiInputFilesExample4} from './examples/4';
-import {TuiInputFilesExample5} from './examples/5';
-import {TuiInputFilesExample6} from './examples/6';
-import {TuiInputFilesExample7} from './examples/7';
-import {ExampleTuiInputFilesComponent} from './input-files.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        TuiFilesModule,
-        TuiLinkDirective,
-        TuiButtonDirective,
-        TuiSvgComponent,
-        TuiErrorComponent,
-        TuiFieldErrorPipeModule,
-        TuiNotificationComponent,
-        TuiAvatarComponent,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputFilesComponent)),
-        FormsModule,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiInputFilesComponent,
-        TuiInputFilesExample1,
-        TuiInputFilesExample2,
-        TuiInputFilesExample3,
-        TuiInputFilesExample4,
-        TuiInputFilesExample5,
-        TuiInputFilesExample6,
-        TuiInputFilesExample7,
-    ],
-    exports: [ExampleTuiInputFilesComponent],
-})
-export class ExampleTuiFilesModule {}
diff --git a/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts b/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts
deleted file mode 100644
index a9b3f8c15f23..000000000000
--- a/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-auto-focus',
-    templateUrl: './auto-focus.template.html',
-    styleUrls: ['./auto-focus.component.less'],
-    changeDetection,
-})
-export class ExampleTuiAutoFocusComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleTs = import('./examples/import/insert-component.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/auto-focus/auto-focus.module.ts b/projects/demo/src/modules/directives/auto-focus/auto-focus.module.ts
deleted file mode 100644
index 21c5c31aad2c..000000000000
--- a/projects/demo/src/modules/directives/auto-focus/auto-focus.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiAutoFocusDirective} from '@taiga-ui/cdk';
-import {TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core';
-import {TuiInputModule} from '@taiga-ui/legacy';
-
-import {ExampleTuiAutoFocusComponent} from './auto-focus.component';
-import {TuiAutoFocusExample1} from './examples/1';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiInputModule,
-        TuiAutoFocusDirective,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAutoFocusComponent)),
-    ],
-    declarations: [ExampleTuiAutoFocusComponent, TuiAutoFocusExample1],
-    exports: [ExampleTuiAutoFocusComponent],
-})
-export class ExampleTuiAutoFocusModule {}
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/1/index.ts b/projects/demo/src/modules/directives/auto-focus/examples/1/index.ts
index ae40a2610812..f581814882e1 100644
--- a/projects/demo/src/modules/directives/auto-focus/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/auto-focus/examples/1/index.ts
@@ -1,14 +1,26 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAutoFocusDirective} from '@taiga-ui/cdk';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-auto-focus-example-1',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiInputModule,
+        NgIf,
+        TuiAutoFocusDirective,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiAutoFocusExample1 {
+export default class ExampleComponent {
     protected showInput = false;
     protected model = 'Focused after its appearance';
 
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md b/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md
deleted file mode 100644
index 2fe719922fa5..000000000000
--- a/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```ts
-import {TuiAutoFocusDirective} from '@taiga-ui/cdk';
-
-// ...
-
-@Component({
-  standalone: true,
-  imports: [
-    // ...
-    TuiAutoFocusDirective,
-  ],
-  // ...
-})
-export class MyComponent {}
-```
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-component.md b/projects/demo/src/modules/directives/auto-focus/examples/import/import.md
similarity index 67%
rename from projects/demo/src/modules/directives/auto-focus/examples/import/insert-component.md
rename to projects/demo/src/modules/directives/auto-focus/examples/import/import.md
index 069bf36f5647..1482823fb22c 100644
--- a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-component.md
+++ b/projects/demo/src/modules/directives/auto-focus/examples/import/import.md
@@ -1,7 +1,10 @@
 ```ts
 @Component({
-  selector: 'my',
-  // [...]
+  standalone: true,
+  imports: [
+    // ...
+    TuiAutoFocusDirective,
+  ],
   providers: [
     tuiAutoFocusOptionsProvider({
       delay: 300, // NaN = no delay/sync
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.md b/projects/demo/src/modules/directives/auto-focus/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/auto-focus/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/auto-focus/auto-focus.template.html b/projects/demo/src/modules/directives/auto-focus/index.html
similarity index 56%
rename from projects/demo/src/modules/directives/auto-focus/auto-focus.template.html
rename to projects/demo/src/modules/directives/auto-focus/index.html
index e17d54570d2b..a4b5126cb915 100644
--- a/projects/demo/src/modules/directives/auto-focus/auto-focus.template.html
+++ b/projects/demo/src/modules/directives/auto-focus/index.html
@@ -12,10 +12,9 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-auto-focus-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="ios"
@@ -50,38 +49,5 @@
         </tui-doc-example>
     </ng-template>
 
-    <ng-template pageTab="Setup">
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiAutoFocus</code>
-                    into a module where you want to use our directive
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>Optional delay for autofocus:</p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleTs"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/auto-focus/auto-focus.component.less b/projects/demo/src/modules/directives/auto-focus/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/auto-focus/auto-focus.component.less
rename to projects/demo/src/modules/directives/auto-focus/index.less
diff --git a/projects/demo/src/modules/directives/auto-focus/index.ts b/projects/demo/src/modules/directives/auto-focus/index.ts
new file mode 100644
index 000000000000..8eb41c9667e1
--- /dev/null
+++ b/projects/demo/src/modules/directives/auto-focus/index.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiLinkDirective} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiLinkDirective],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts
deleted file mode 100644
index fcbcd3bd5f86..000000000000
--- a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Component, forwardRef} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-dropdown-context',
-    templateUrl: './dropdown-context.component.html',
-    changeDetection,
-    providers: [
-        {
-            provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiDropdownContextComponent),
-        },
-    ],
-})
-export class ExampleTuiDropdownContextComponent extends AbstractExampleTuiDropdown {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly exampleBasic: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-
-    protected readonly exampleContextMenu: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly exampleReportMistakeForm: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.module.ts b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.module.ts
deleted file mode 100644
index 9013941829ff..000000000000
--- a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.module.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiTable} from '@taiga-ui/addon-table';
-import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiLinkDirective,
-    TuiSvgComponent,
-} from '@taiga-ui/core';
-import {TuiDataListDropdownManagerModule} from '@taiga-ui/kit';
-import {TuiTextareaModule} from '@taiga-ui/legacy';
-
-import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
-import {ExampleTuiDropdownContextComponent} from './dropdown-context.component';
-import {TuiDropdownContextExample1} from './examples/1';
-import {TuiDropdownContextExample2} from './examples/2';
-import {TuiDropdownContextExample3} from './examples/3';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDoc,
-        TuiDataList,
-        TuiSvgComponent,
-        TuiTable,
-        TuiDataListDropdownManagerModule,
-        TuiTextareaModule,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiDropdownModule,
-        TuiActiveZoneDirective,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiDropdownContextComponent)),
-        ReactiveFormsModule,
-        DropdownDocumentationModule,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiDropdownContextComponent,
-        TuiDropdownContextExample1,
-        TuiDropdownContextExample2,
-        TuiDropdownContextExample3,
-    ],
-})
-export class ExampleTuiDropdownContextModule {}
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/1/index.ts b/projects/demo/src/modules/directives/dropdown-context/examples/1/index.ts
index b88f520f38ca..0817f5af08d1 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/1/index.ts
@@ -1,12 +1,24 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiButtonDirective,
+    TuiDropdownContextDirective,
+    TuiDropdownDirective,
+    TuiSvgComponent,
+} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-dropdown-context-example-1',
+    standalone: true,
+    imports: [
+        TuiSvgComponent,
+        TuiDropdownContextDirective,
+        TuiDropdownDirective,
+        TuiButtonDirective,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownContextExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
index abd1625a65c9..e20809608365 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
@@ -1,16 +1,38 @@
+import {NgForOf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDialogService} from '@taiga-ui/core';
+import {
+    TuiDataListComponent,
+    TuiDialogService,
+    TuiDropdownContextDirective,
+    TuiDropdownDirective,
+    TuiDropdownOptionsDirective,
+    TuiDropdownPositionSidedDirective,
+    TuiOptionComponent,
+    TuiSvgComponent,
+} from '@taiga-ui/core';
+import {TuiDataListDropdownManagerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-dropdown-context-example-2',
+    standalone: true,
+    imports: [
+        NgForOf,
+        TuiDropdownContextDirective,
+        TuiDropdownDirective,
+        TuiDataListDropdownManagerModule,
+        TuiOptionComponent,
+        TuiSvgComponent,
+        TuiDropdownPositionSidedDirective,
+        TuiDropdownOptionsDirective,
+        TuiDataListComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownContextExample2 {
+export default class ExampleComponent {
     private readonly dialogs = inject(TuiDialogService);
 
     protected readonly menuItems = [
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/3/index.ts b/projects/demo/src/modules/directives/dropdown-context/examples/3/index.ts
index dff3e69acd5b..b4c5b18086c9 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/3/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/3/index.ts
@@ -1,16 +1,29 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiButtonDirective,
+    TuiDropdownContextDirective,
+    TuiDropdownDirective,
+} from '@taiga-ui/core';
+import {TuiTextareaModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-dropdown-context-example-3',
+    standalone: true,
+    imports: [
+        TuiDropdownContextDirective,
+        TuiDropdownDirective,
+        ReactiveFormsModule,
+        TuiTextareaModule,
+        TuiButtonDirective,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownContextExample3 {
+export default class ExampleComponent {
     protected testForm = new FormGroup({
         reportText: new FormControl('Misspell HERE!'),
     });
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-context/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-context/examples/import/import-module.md
rename to projects/demo/src/modules/directives/dropdown-context/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-context/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-context/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/dropdown-context/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.html b/projects/demo/src/modules/directives/dropdown-context/index.html
similarity index 79%
rename from projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.html
rename to projects/demo/src/modules/directives/dropdown-context/index.html
index 504226a72d59..8a9369fe8b5f 100644
--- a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.html
+++ b/projects/demo/src/modules/directives/dropdown-context/index.html
@@ -31,27 +31,24 @@ <h3>To close dropdown:</h3>
         <tui-doc-example
             id="basic"
             heading="Basic"
-            [content]="exampleBasic"
-        >
-            <tui-dropdown-context-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
 
         <tui-doc-example
             id="context-menu"
             heading="Context menu"
-            [content]="exampleContextMenu"
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
             [fullsize]="true"
-        >
-            <tui-dropdown-context-example-2 />
-        </tui-doc-example>
+        />
 
         <tui-doc-example
             id="report-mistake-form"
             heading="Report mistake form"
-            [content]="exampleReportMistakeForm"
-        >
-            <tui-dropdown-context-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -74,10 +71,5 @@ <h3>To close dropdown:</h3>
         <dropdown-documentation />
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/dropdown-context/index.ts b/projects/demo/src/modules/directives/dropdown-context/index.ts
new file mode 100644
index 000000000000..64d59289588d
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-context/index.ts
@@ -0,0 +1,32 @@
+import {Component, forwardRef} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {
+    TuiDropdownContextDirective,
+    TuiDropdownDirective,
+    TuiDropdownOptionsDirective,
+} from '@taiga-ui/core';
+
+import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
+import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
+import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiDropdownContextDirective,
+        TuiDropdownDirective,
+        TuiDropdownOptionsDirective,
+        DropdownDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => PageComponent),
+        },
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiDropdown {}
diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.component.ts b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.component.ts
deleted file mode 100644
index 379c3f12f609..000000000000
--- a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Component, forwardRef} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-tui-dropdown-hover',
-    templateUrl: './dropdown-hover.template.html',
-    changeDetection,
-    providers: [
-        {
-            provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiDropdownHoverComponent),
-        },
-    ],
-})
-export class ExampleTuiDropdownHoverComponent extends AbstractExampleTuiDropdown {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
-    protected showDelay = 200;
-
-    protected hideDelay = 500;
-}
diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.module.ts b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.module.ts
deleted file mode 100644
index da8c8cefd338..000000000000
--- a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.module.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {TuiSetupComponent} from '@demo/utils';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiGroupDirective,
-} from '@taiga-ui/core';
-import {
-    TuiChevronDirective,
-    TuiDataListWrapperModule,
-    TuiSwitchComponent,
-    TuiTabsModule,
-} from '@taiga-ui/kit';
-import {TuiSelectModule} from '@taiga-ui/legacy';
-
-import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
-import {ExampleTuiDropdownHoverComponent} from './dropdown-hover.component';
-import {TuiDropdownHoverExample1} from './examples/1';
-import {TuiDropdownHoverExample2} from './examples/2';
-import {TuiDropdownHoverExample3} from './examples/3';
-import {TuiDropdownHoverExample4} from './examples/4';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        TuiButtonDirective,
-        TuiDropdownModule,
-        TuiTabsModule,
-        TuiSelectModule,
-        TuiDataListWrapperModule,
-        TuiActiveZoneDirective,
-        TuiSwitchComponent,
-        TuiDataList,
-        TuiGroupDirective,
-        TuiChevronDirective,
-        DropdownDocumentationModule,
-        tuiGetDocModules(ExampleTuiDropdownHoverComponent),
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiDropdownHoverComponent,
-        TuiDropdownHoverExample1,
-        TuiDropdownHoverExample2,
-        TuiDropdownHoverExample3,
-        TuiDropdownHoverExample4,
-    ],
-    exports: [ExampleTuiDropdownHoverComponent],
-})
-export class ExampleTuiDropdownHoverModule {}
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/1/index.ts b/projects/demo/src/modules/directives/dropdown-hover/examples/1/index.ts
index 20407b1de1cc..e053c398587e 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/1/index.ts
@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDropdownDirective, TuiDropdownHoverDirective} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-dropdown-hover-example-1',
+    standalone: true,
+    imports: [TuiDropdownDirective, TuiDropdownHoverDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownHoverExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.ts
index c60d566d6c16..b92f6fca857b 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.ts
@@ -1,16 +1,41 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownHoverDirective,
+    TuiDropdownOpenDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {
+    TuiChevronDirective,
+    TuiSwitchComponent,
+    TuiTabDirective,
+    TuiTabsHorizontalDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-dropdown-hover-example-2',
+    standalone: true,
+    imports: [
+        TuiTabsHorizontalDirective,
+        TuiTabDirective,
+        TuiChevronDirective,
+        TuiDropdownHoverDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiDataListComponent,
+        TuiOptionComponent,
+        ReactiveFormsModule,
+        TuiSwitchComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownHoverExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         option: new FormControl(false),
     });
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/3/index.ts b/projects/demo/src/modules/directives/dropdown-hover/examples/3/index.ts
index 3a4b3d0a2d1f..bc0d6acb34af 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/3/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/3/index.ts
@@ -1,15 +1,40 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownHoverDirective,
+    TuiDropdownOpenDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-dropdown-hover-example-3',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiDropdownHoverDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiSelectModule,
+        ReactiveFormsModule,
+        TuiActiveZoneDirective,
+        TuiDataListWrapperModule,
+        TuiDataListComponent,
+        NgForOf,
+        TuiOptionComponent,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownHoverExample3 {
+export default class ExampleComponent {
     protected readonly items = ['Edit', 'Download', 'Rename', 'Delete'];
 
     protected readonly selectItems = ['Item 1', 'Item 2'];
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.html b/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.html
index 9055e91b263c..16302dd26689 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.html
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.html
@@ -12,7 +12,6 @@
         Won't open here
     </button>
     <button
-        #tuiDropdownHost
         tuiButton
         type="button"
     >
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.ts b/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.ts
index 64148deb70b9..f660e888e698 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/4/index.ts
@@ -1,11 +1,27 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownHoverDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiGroupDirective,
+} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-dropdown-hover-example-4',
+    standalone: true,
+    imports: [
+        TuiDropdownDirective,
+        TuiDropdownHoverDirective,
+        TuiDropdownOptionsDirective,
+        TuiDropdownOpenDirective,
+        TuiGroupDirective,
+        TuiButtonDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownHoverExample4 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-hover/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-hover/examples/import/import-module.md
rename to projects/demo/src/modules/directives/dropdown-hover/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-hover/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-hover/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/dropdown-hover/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html b/projects/demo/src/modules/directives/dropdown-hover/index.html
similarity index 81%
rename from projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html
rename to projects/demo/src/modules/directives/dropdown-hover/index.html
index 377f5c3e8190..3e1a62ff0d93 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html
+++ b/projects/demo/src/modules/directives/dropdown-hover/index.html
@@ -12,33 +12,29 @@
         <tui-doc-example
             id="basic"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-dropdown-hover-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="hosted-dropdown"
             heading="HostedDropdown"
-            [content]="example2"
-        >
-            <tui-dropdown-hover-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="nested"
             heading="Nested"
-            [content]="example3"
-        >
-            <tui-dropdown-hover-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
         <tui-doc-example
             id="custom-host"
             heading="With custom host"
-            [content]="example4"
-        >
-            <tui-dropdown-hover-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -92,10 +88,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/dropdown-hover/index.ts b/projects/demo/src/modules/directives/dropdown-hover/index.ts
new file mode 100644
index 000000000000..8d222a715b56
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-hover/index.ts
@@ -0,0 +1,38 @@
+import {Component, forwardRef} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownHoverDirective,
+    TuiDropdownOptionsDirective,
+} from '@taiga-ui/core';
+
+import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
+import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
+import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiDropdownHoverDirective,
+        TuiDropdownDirective,
+        TuiDropdownOptionsDirective,
+        TuiButtonDirective,
+        DropdownDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => PageComponent),
+        },
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiDropdown {
+    protected showDelay = 200;
+
+    protected hideDelay = 500;
+}
diff --git a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.component.ts b/projects/demo/src/modules/directives/dropdown-open/dropdown-open.component.ts
deleted file mode 100644
index d9d9ce82d855..000000000000
--- a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.component.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {Component, forwardRef} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-tui-dropdown-open',
-    templateUrl: './dropdown-open.template.html',
-    styleUrls: ['./dropdown-open.style.less'],
-    changeDetection,
-    providers: [
-        {
-            provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiDropdownOpenComponent),
-        },
-    ],
-})
-export class ExampleTuiDropdownOpenComponent extends AbstractExampleTuiDropdown {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-        'accessor.ts': import('./examples/5/accessor.ts?raw'),
-    };
-
-    protected open = false;
-
-    protected sided = false;
-
-    protected input = '';
-
-    protected enabledVariants = [true, 'getter this.input.length > 2'];
-
-    protected enabledSelected = this.enabledVariants[0];
-
-    protected readonly contentVariants = ['Template', 'Custom string'];
-
-    protected content = this.contentVariants[0];
-
-    protected get template(): boolean {
-        return this.content === 'Template';
-    }
-
-    protected get enabled(): boolean {
-        return this.enabledSelected === true || this.input.length > 2;
-    }
-
-    protected onInput(input: string): void {
-        this.input = input;
-        this.open = this.enabled;
-    }
-
-    protected onClick(): void {
-        this.open = false;
-    }
-}
diff --git a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.module.ts b/projects/demo/src/modules/directives/dropdown-open/dropdown-open.module.ts
deleted file mode 100644
index 08445ccef341..000000000000
--- a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.module.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiGroupDirective,
-    TuiIconComponent,
-    TuiLinkDirective,
-} from '@taiga-ui/core';
-import {TuiChevronDirective, TuiDataListWrapperModule} from '@taiga-ui/kit';
-import {TuiInputModule, TuiMultiSelectModule, TuiSelectModule} from '@taiga-ui/legacy';
-
-import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
-import {ExampleTuiDropdownOpenComponent} from './dropdown-open.component';
-import {TuiDropdownOpenExample1} from './examples/1';
-import {TuiDropdownOpenExample2} from './examples/2';
-import {TuiDropdownOpenExample3} from './examples/3';
-import {TuiDropdownOpenExample4} from './examples/4';
-import {TuiDropdownOpenExample5} from './examples/5';
-import {TopRightDirective} from './examples/5/accessor';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        TuiInputModule,
-        TuiButtonDirective,
-        TuiGroupDirective,
-        TuiIconComponent,
-        TuiLinkDirective,
-        TuiSelectModule,
-        TuiActiveZoneDirective,
-        TuiDataList,
-        TuiDataListWrapperModule,
-        TuiDropdownModule,
-        TuiMultiSelectModule,
-        DropdownDocumentationModule,
-        tuiGetDocModules(ExampleTuiDropdownOpenComponent),
-        TuiChevronDirective,
-    ],
-    declarations: [
-        TuiDropdownOpenExample1,
-        TuiDropdownOpenExample2,
-        TuiDropdownOpenExample3,
-        TuiDropdownOpenExample4,
-        TuiDropdownOpenExample5,
-        TopRightDirective,
-        ExampleTuiDropdownOpenComponent,
-    ],
-    exports: [ExampleTuiDropdownOpenComponent],
-})
-export class ExampleTuiDropdownOpenModule {}
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/1/index.ts b/projects/demo/src/modules/directives/dropdown-open/examples/1/index.ts
index ff82971fed11..efa850ab3b7d 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/1/index.ts
@@ -1,14 +1,36 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiDropdownPositionSidedDirective,
+    TuiOptGroupDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-dropdown-open-example-1',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiDropdownOptionsDirective,
+        TuiDropdownDirective,
+        TuiDropdownPositionSidedDirective,
+        TuiDropdownOpenDirective,
+        TuiDataListComponent,
+        TuiOptGroupDirective,
+        NgForOf,
+        TuiOptionComponent,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownOpenExample1 {
+export default class ExampleComponent {
     protected readonly items = ['Edit', 'Download', 'Rename', 'Delete'];
 
     protected open = false;
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/2/index.html b/projects/demo/src/modules/directives/dropdown-open/examples/2/index.html
index d673d8ec860f..0f3ffb99d495 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/2/index.html
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/2/index.html
@@ -13,7 +13,6 @@
         Button that does not open dropdown
     </button>
     <button
-        #tuiDropdownHost
         size="l"
         tuiChevron
         tuiIconButton
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-open/examples/2/index.ts
index 7dcd6c3116e8..95c5181a08f5 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/2/index.ts
@@ -1,16 +1,45 @@
+import {NgForOf} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHostedDropdownComponent} from '@taiga-ui/core';
+import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiGroupDirective,
+    TuiHostedDropdownComponent,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {TuiChevronDirective, TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-dropdown-open-example-2',
+    standalone: true,
+    imports: [
+        TuiDropdownOptionsDirective,
+        TuiGroupDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiButtonDirective,
+        TuiChevronDirective,
+        TuiSelectModule,
+        TuiActiveZoneDirective,
+        FormsModule,
+        TuiDataListWrapperModule,
+        TuiDataListComponent,
+        NgForOf,
+        TuiOptionComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownOpenExample2 {
+export default class ExampleComponent {
     @ViewChild(TuiHostedDropdownComponent)
     protected component?: TuiHostedDropdownComponent;
 
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/3/index.ts b/projects/demo/src/modules/directives/dropdown-open/examples/3/index.ts
index cda941a2f5cc..512bbd089c56 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/3/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/3/index.ts
@@ -1,15 +1,40 @@
+import {NgForOf, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiIconComponent,
+    TuiLinkDirective,
+    TuiOptGroupDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {TuiChevronDirective} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-dropdown-open-example-3',
+    standalone: true,
+    imports: [
+        TuiChevronDirective,
+        TuiDropdownOptionsDirective,
+        TuiLinkDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiDataListComponent,
+        TuiOptGroupDirective,
+        NgForOf,
+        TuiOptionComponent,
+        TuiIconComponent,
+        NgIf,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownOpenExample3 {
+export default class ExampleComponent {
     protected open = false;
 
     protected readonly items = [
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.ts b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.ts
index e0eee865a6bb..5072be08e8da 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.ts
@@ -1,15 +1,31 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+} from '@taiga-ui/core';
+import {TuiChevronDirective, TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiMultiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-dropdown-open-example-4',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiButtonDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiChevronDirective,
+        TuiDataListWrapperModule,
+        TuiMultiSelectModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownOpenExample4 {
+export default class ExampleComponent {
     protected readonly form = new FormGroup({
         control: new FormControl<string[]>([]),
     });
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts b/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts
deleted file mode 100644
index 31cfe58da3c2..000000000000
--- a/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Directive} from '@angular/core';
-import {tuiInjectElement} from '@taiga-ui/cdk';
-import type {TuiPoint} from '@taiga-ui/core';
-import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core';
-
-@Directive({
-    selector: '[topRight]',
-    providers: [tuiAsPositionAccessor(TopRightDirective)],
-})
-export class TopRightDirective extends TuiPositionAccessor {
-    private readonly el = tuiInjectElement();
-
-    public readonly type = 'dropdown';
-
-    public getPosition({height}: DOMRect): TuiPoint {
-        const {right, top} = this.el.getBoundingClientRect();
-
-        return [top - height, right];
-    }
-}
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/5/index.ts b/projects/demo/src/modules/directives/dropdown-open/examples/5/index.ts
index 773be2f69a10..40bf687f9347 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/5/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/5/index.ts
@@ -1,12 +1,44 @@
-import {Component} from '@angular/core';
+import {Component, Directive} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiInjectElement} from '@taiga-ui/cdk';
+import {
+    tuiAsPositionAccessor,
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    type TuiPoint,
+    TuiPositionAccessor,
+} from '@taiga-ui/core';
+
+@Directive({
+    standalone: true,
+    selector: '[topRight]',
+    providers: [tuiAsPositionAccessor(TopRightDirective)],
+})
+class TopRightDirective extends TuiPositionAccessor {
+    private readonly el = tuiInjectElement();
+
+    public readonly type = 'dropdown';
+
+    public getPosition({height}: DOMRect): TuiPoint {
+        const {right, top} = this.el.getBoundingClientRect();
+
+        return [top - height, right];
+    }
+}
 
 @Component({
-    selector: 'tui-dropdown-open-example-5',
+    standalone: true,
+    imports: [
+        TopRightDirective,
+        TuiDropdownOpenDirective,
+        TuiButtonDirective,
+        TuiDropdownDirective,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownOpenExample5 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-open/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-open/examples/import/import-module.md
rename to projects/demo/src/modules/directives/dropdown-open/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-open/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-open/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/dropdown-open/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.template.html b/projects/demo/src/modules/directives/dropdown-open/index.html
similarity index 72%
rename from projects/demo/src/modules/directives/dropdown-open/dropdown-open.template.html
rename to projects/demo/src/modules/directives/dropdown-open/index.html
index 7a31cf5a3cff..ad611c6ee0da 100644
--- a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.template.html
+++ b/projects/demo/src/modules/directives/dropdown-open/index.html
@@ -28,42 +28,37 @@
         <tui-doc-example
             id="menu"
             heading="Menu"
-            [content]="example1"
-        >
-            <tui-dropdown-open-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="tui-dropdown-host"
             heading="With custom host"
-            [content]="example2"
-        >
-            <tui-dropdown-open-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="native"
             heading="With link"
-            [content]="example3"
-        >
-            <tui-dropdown-open-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="complex"
             heading="Complex example"
-            [content]="example4"
-        >
-            <tui-dropdown-open-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="position"
             heading="Custom positioning"
-            [content]="example5"
-        >
-            <tui-dropdown-open-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -142,38 +137,5 @@
         <dropdown-documentation />
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiDropdownModule</code>
-                    and
-                    <code>PolymorpheusTemplate</code>
-                    .
-                </p>
-
-                <p>
-                    <strong>Important:</strong>
-                    for proper change detection propagation use
-                    <code>polymorpheus</code>
-                    directive on your template
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/dropdown-open/dropdown-open.style.less b/projects/demo/src/modules/directives/dropdown-open/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-open/dropdown-open.style.less
rename to projects/demo/src/modules/directives/dropdown-open/index.less
diff --git a/projects/demo/src/modules/directives/dropdown-open/index.ts b/projects/demo/src/modules/directives/dropdown-open/index.ts
new file mode 100644
index 000000000000..19114c4923a3
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-open/index.ts
@@ -0,0 +1,70 @@
+import {Component, forwardRef} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/legacy';
+
+import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
+import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
+import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiInputModule,
+        FormsModule,
+        TuiDropdownDirective,
+        TuiDropdownOptionsDirective,
+        TuiDropdownOpenDirective,
+        TuiButtonDirective,
+        DropdownDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => PageComponent),
+        },
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiDropdown {
+    protected open = false;
+
+    protected sided = false;
+
+    protected input = '';
+
+    protected enabledVariants = [true, 'getter this.input.length > 2'];
+
+    protected enabledSelected = this.enabledVariants[0];
+
+    protected readonly contentVariants = ['Template', 'Custom string'];
+
+    protected content = this.contentVariants[0];
+
+    protected get template(): boolean {
+        return this.content === 'Template';
+    }
+
+    protected get enabled(): boolean {
+        return this.enabledSelected === true || this.input.length > 2;
+    }
+
+    protected onInput(input: string): void {
+        this.input = input;
+        this.open = this.enabled;
+    }
+
+    protected onClick(): void {
+        this.open = false;
+    }
+}
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts
deleted file mode 100644
index 6d3937033318..000000000000
--- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Component, forwardRef} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import type {TuiDropdownPosition} from '@taiga-ui/kit';
-
-import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-tui-dropdown-selection',
-    templateUrl: './dropdown-selection.template.html',
-    styleUrls: ['./dropdown-selection.style.less'],
-    changeDetection,
-    providers: [
-        {
-            provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiDropdownSelectionComponent),
-        },
-    ],
-})
-export class ExampleTuiDropdownSelectionComponent extends AbstractExampleTuiDropdown {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected positionVariants: TuiDropdownPosition[] = ['selection', 'word', 'tag'];
-
-    protected position = this.positionVariants[0];
-}
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts
deleted file mode 100644
index f86a94a6247a..000000000000
--- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiInitialsPipe,
-} from '@taiga-ui/core';
-import {TuiAvatarComponent} from '@taiga-ui/kit';
-import {TuiTextareaModule} from '@taiga-ui/legacy';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
-import {ExampleTuiDropdownSelectionComponent} from './dropdown-selection.component';
-import {TuiDropdownSelectionExample1} from './examples/1';
-import {TuiDropdownSelectionExample2} from './examples/2';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        PolymorpheusModule,
-        TuiDropdownModule,
-        TuiButtonDirective,
-        TuiTextareaModule,
-        TuiAvatarComponent,
-        TuiDataList,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiDropdownSelectionComponent)),
-        DropdownDocumentationModule,
-        TuiInitialsPipe,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiDropdownSelectionComponent,
-        TuiDropdownSelectionExample1,
-        TuiDropdownSelectionExample2,
-    ],
-    exports: [ExampleTuiDropdownSelectionComponent],
-})
-export class ExampleTuiDropdownSelectionModule {}
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/1/index.ts b/projects/demo/src/modules/directives/dropdown-selection/examples/1/index.ts
index 9463d32f0a07..3c809b93b642 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-selection/examples/1/index.ts
@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDropdownDirective, TuiDropdownSelectionDirective} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-dropdown-selection-example-1',
+    standalone: true,
+    imports: [TuiDropdownDirective, TuiDropdownSelectionDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownSelectionExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts
index 56c0e2d432a0..7c7719841515 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts
@@ -1,11 +1,23 @@
+import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
 import type {QueryList} from '@angular/core';
 import {Component, ElementRef, ViewChild, ViewChildren} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {assets} from '@demo/utils';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {EMPTY_QUERY, tuiPure} from '@taiga-ui/cdk';
-import {TuiDriver, tuiGetWordRange, TuiOptionComponent} from '@taiga-ui/core';
+import {
+    TuiDataListComponent,
+    TuiDriver,
+    TuiDropdownDirective,
+    TuiDropdownSelectionDirective,
+    tuiGetWordRange,
+    TuiInitialsPipe,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiTextareaModule} from '@taiga-ui/legacy';
 import type {Observable} from 'rxjs';
 
 export interface User {
@@ -15,13 +27,26 @@ export interface User {
 }
 
 @Component({
-    selector: 'tui-dropdown-selection-example-2',
+    standalone: true,
+    imports: [
+        TuiTextareaModule,
+        TuiDropdownSelectionDirective,
+        TuiDropdownDirective,
+        FormsModule,
+        AsyncPipe,
+        TuiDataListComponent,
+        NgIf,
+        NgForOf,
+        TuiOptionComponent,
+        TuiAvatarComponent,
+        TuiInitialsPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiDropdownSelectionExample2 {
+export default class ExampleComponent {
     @ViewChildren(TuiOptionComponent, {read: ElementRef})
     private readonly options: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;
 
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-selection/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.md
rename to projects/demo/src/modules/directives/dropdown-selection/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-selection/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/dropdown-selection/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html b/projects/demo/src/modules/directives/dropdown-selection/index.html
similarity index 87%
rename from projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html
rename to projects/demo/src/modules/directives/dropdown-selection/index.html
index 989143a2ebc7..561841469f79 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html
+++ b/projects/demo/src/modules/directives/dropdown-selection/index.html
@@ -12,18 +12,16 @@
         <tui-doc-example
             id="selection"
             heading="Sample"
-            [content]="example1"
-        >
-            <tui-dropdown-selection-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="textarea"
             heading="textarea"
-            [content]="example2"
-        >
-            <tui-dropdown-selection-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -79,10 +77,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.style.less b/projects/demo/src/modules/directives/dropdown-selection/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.style.less
rename to projects/demo/src/modules/directives/dropdown-selection/index.less
diff --git a/projects/demo/src/modules/directives/dropdown-selection/index.ts b/projects/demo/src/modules/directives/dropdown-selection/index.ts
new file mode 100644
index 000000000000..45f42b5e83d0
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-selection/index.ts
@@ -0,0 +1,40 @@
+import {Component, forwardRef} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {
+    TuiButtonDirective,
+    TuiDropdownDirective,
+    TuiDropdownOptionsDirective,
+    TuiDropdownSelectionDirective,
+} from '@taiga-ui/core';
+import type {TuiDropdownPosition} from '@taiga-ui/kit';
+
+import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
+import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
+import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiDropdownSelectionDirective,
+        TuiDropdownDirective,
+        TuiDropdownOptionsDirective,
+        TuiButtonDirective,
+        DropdownDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    providers: [
+        {
+            provide: ABSTRACT_PROPS_ACCESSOR,
+            useExisting: forwardRef(() => PageComponent),
+        },
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiDropdown {
+    protected positionVariants: TuiDropdownPosition[] = ['selection', 'word', 'tag'];
+
+    protected position = this.positionVariants[0];
+}
diff --git a/projects/demo/src/modules/directives/fade/examples/1/index.ts b/projects/demo/src/modules/directives/fade/examples/1/index.ts
index 111cd5133fc3..f38d0c6fc202 100644
--- a/projects/demo/src/modules/directives/fade/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/fade/examples/1/index.ts
@@ -1,12 +1,15 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiScrollableDirective, TuiScrollbarComponent} from '@taiga-ui/core';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-fade-example-1',
+    standalone: true,
+    imports: [TuiScrollbarComponent, TuiFadeDirective, TuiScrollableDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiFadeExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/fade/examples/2/index.ts b/projects/demo/src/modules/directives/fade/examples/2/index.ts
index 1184eee1da46..aa83c15e2c67 100644
--- a/projects/demo/src/modules/directives/fade/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/fade/examples/2/index.ts
@@ -1,17 +1,20 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiFadeIn} from '@taiga-ui/core';
+import {tuiFadeIn, TuiLinkDirective} from '@taiga-ui/core';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-fade-example-2',
+    standalone: true,
+    imports: [TuiFadeDirective, NgIf, TuiLinkDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
     animations: [tuiFadeIn],
 })
-export class TuiFadeExample2 {
+export default class ExampleComponent {
     protected expanded = false;
 
     protected toggle(): void {
diff --git a/projects/demo/src/modules/directives/fade/examples/3/index.ts b/projects/demo/src/modules/directives/fade/examples/3/index.ts
index 19dc72d19c05..f38d0c6fc202 100644
--- a/projects/demo/src/modules/directives/fade/examples/3/index.ts
+++ b/projects/demo/src/modules/directives/fade/examples/3/index.ts
@@ -1,12 +1,15 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiScrollableDirective, TuiScrollbarComponent} from '@taiga-ui/core';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-fade-example-3',
+    standalone: true,
+    imports: [TuiScrollbarComponent, TuiFadeDirective, TuiScrollableDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiFadeExample3 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/fade/examples/import/import-module.md b/projects/demo/src/modules/directives/fade/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/fade/examples/import/import-module.md
rename to projects/demo/src/modules/directives/fade/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/fade/examples/import/insert-template.md b/projects/demo/src/modules/directives/fade/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/fade/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/fade/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/fade/fade.component.ts b/projects/demo/src/modules/directives/fade/fade.component.ts
deleted file mode 100644
index dddd609084d6..000000000000
--- a/projects/demo/src/modules/directives/fade/fade.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-fade',
-    templateUrl: './fade.template.html',
-    styleUrls: ['./fade.style.less'],
-    changeDetection,
-})
-export class ExampleTuiFadeComponent {
-    protected readonly exampleModule: TuiRawLoaderContent = import(
-        './examples/import/import-module.md?raw'
-    );
-
-    protected readonly exampleHtml: TuiRawLoaderContent = import(
-        './examples/import/insert-template.md?raw'
-    );
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected lineHeight = '100%';
-    protected size = '1.5em';
-    protected offset = '0em';
-}
diff --git a/projects/demo/src/modules/directives/fade/fade.module.ts b/projects/demo/src/modules/directives/fade/fade.module.ts
deleted file mode 100644
index 1468f73f4d9a..000000000000
--- a/projects/demo/src/modules/directives/fade/fade.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {TuiSetupComponent} from '@demo/utils';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiScrollableDirective,
-    TuiScrollbarComponent,
-} from '@taiga-ui/core';
-import {TuiFadeDirective} from '@taiga-ui/kit';
-
-import {TuiFadeExample1} from './examples/1';
-import {TuiFadeExample2} from './examples/2';
-import {TuiFadeExample3} from './examples/3';
-import {ExampleTuiFadeComponent} from './fade.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiFadeDirective,
-        TuiNotificationComponent,
-        TuiScrollbarComponent,
-        TuiLinkDirective,
-        tuiGetDocModules(ExampleTuiFadeComponent),
-        TuiScrollableDirective,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiFadeComponent,
-        TuiFadeExample1,
-        TuiFadeExample2,
-        TuiFadeExample3,
-    ],
-    exports: [ExampleTuiFadeComponent],
-})
-export class ExampleTuiFadeDirective {}
diff --git a/projects/demo/src/modules/directives/fade/fade.template.html b/projects/demo/src/modules/directives/fade/index.html
similarity index 83%
rename from projects/demo/src/modules/directives/fade/fade.template.html
rename to projects/demo/src/modules/directives/fade/index.html
index a017af26f9f4..c0c3fddb43d5 100644
--- a/projects/demo/src/modules/directives/fade/fade.template.html
+++ b/projects/demo/src/modules/directives/fade/index.html
@@ -9,26 +9,23 @@
         <tui-doc-example
             id="basic"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-fade-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
 
         <tui-doc-example
             id="multiline"
             heading="Multiline"
-            [content]="example2"
-        >
-            <tui-fade-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="vertical"
             heading="Vertical"
-            [content]="example3"
-        >
-            <tui-fade-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -80,10 +77,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/fade/fade.style.less b/projects/demo/src/modules/directives/fade/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/fade/fade.style.less
rename to projects/demo/src/modules/directives/fade/index.less
diff --git a/projects/demo/src/modules/directives/fade/index.ts b/projects/demo/src/modules/directives/fade/index.ts
new file mode 100644
index 000000000000..88acecc88814
--- /dev/null
+++ b/projects/demo/src/modules/directives/fade/index.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiFadeDirective} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiFadeDirective],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+})
+export default class PageComponent {
+    protected lineHeight = '100%';
+    protected size = '1.5em';
+    protected offset = '0em';
+}
diff --git a/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
index 552d574eec65..5f016c2b5dde 100644
--- a/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/hint-pointer/examples/1/index.ts
@@ -1,10 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiHint} from '@taiga-ui/core';
+import {TuiIslandModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-hint-pointer-example-1',
+    standalone: true,
+    imports: [TuiIslandModule, TuiHint],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection,
 })
-export class TuiHintPointerExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/hint-pointer/examples/import/import-module.md b/projects/demo/src/modules/directives/hint-pointer/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/hint-pointer/examples/import/import-module.md
rename to projects/demo/src/modules/directives/hint-pointer/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/hint-pointer/examples/import/insert-template.md b/projects/demo/src/modules/directives/hint-pointer/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/hint-pointer/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/hint-pointer/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts
deleted file mode 100644
index cf2e33e4dbdd..000000000000
--- a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import {tuiProvide} from '@taiga-ui/cdk';
-
-import {AbstractExampleTuiHint} from '../../components/abstract/hint';
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-
-@Component({
-    selector: 'example-hint-pointer',
-    templateUrl: './hint-pointer.template.html',
-    changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiHintPointerComponent)],
-})
-export class ExampleTuiHintPointerComponent extends AbstractExampleTuiHint {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected showDelay = 0;
-    protected hideDelay = 0;
-}
diff --git a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts b/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
deleted file mode 100644
index 0664d3932262..000000000000
--- a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiHint, TuiLinkDirective} from '@taiga-ui/core';
-import {TuiIslandModule} from '@taiga-ui/kit';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
-import {TuiHintPointerExample1} from './examples/1';
-import {ExampleTuiHintPointerComponent} from './hint-pointer.component';
-
-@NgModule({
-    imports: [
-        TuiHint,
-        TuiIslandModule,
-        TuiLinkDirective,
-        PolymorpheusModule,
-        CommonModule,
-        InheritedDocumentationModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHintPointerComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [ExampleTuiHintPointerComponent, TuiHintPointerExample1],
-    exports: [ExampleTuiHintPointerComponent],
-})
-export class ExampleTuiHintPointerModule {}
diff --git a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html b/projects/demo/src/modules/directives/hint-pointer/index.html
similarity index 87%
rename from projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html
rename to projects/demo/src/modules/directives/hint-pointer/index.html
index ebd0718cf518..9796e435cbce 100644
--- a/projects/demo/src/modules/directives/hint-pointer/hint-pointer.template.html
+++ b/projects/demo/src/modules/directives/hint-pointer/index.html
@@ -2,6 +2,7 @@
     header="HintPointer"
     package="CORE"
     path="core/directives/hint"
+    type="directives"
 >
     <ng-template pageTab>
         <p>A directive to show a hint above the cursor</p>
@@ -9,10 +10,9 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-hint-pointer-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -56,10 +56,5 @@
         <inherited-documentation />
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/hint-pointer/index.ts b/projects/demo/src/modules/directives/hint-pointer/index.ts
new file mode 100644
index 000000000000..91c6953e2427
--- /dev/null
+++ b/projects/demo/src/modules/directives/hint-pointer/index.ts
@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {tuiProvide} from '@taiga-ui/cdk';
+import {TuiHintDirective, TuiHintPointerDirective} from '@taiga-ui/core';
+
+import {AbstractExampleTuiHint} from '../../components/abstract/hint';
+import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
+import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiHintPointerDirective,
+        TuiHintDirective,
+        InheritedDocumentationModule,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
+})
+export default class PageComponent extends AbstractExampleTuiHint {
+    protected showDelay = 0;
+    protected hideDelay = 0;
+}
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts b/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts
index 56cd8fa9be3f..070098054371 100644
--- a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts
@@ -1,14 +1,16 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-lazy-loading-example-1',
+    standalone: true,
+    imports: [NgForOf],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiLazyLoadingExample1 {
+export default class ExampleComponent {
     protected readonly array = Array.from(
         {length: 100},
         (_, i) => `https://picsum.photos/${250 + i}/200`,
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/import/import-module.md b/projects/demo/src/modules/directives/lazy-loading/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/lazy-loading/examples/import/import-module.md
rename to projects/demo/src/modules/directives/lazy-loading/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/import/insert-template.md b/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/lazy-loading/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/lazy-loading/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/lazy-loading/index.html b/projects/demo/src/modules/directives/lazy-loading/index.html
new file mode 100644
index 000000000000..7ed9474764fa
--- /dev/null
+++ b/projects/demo/src/modules/directives/lazy-loading/index.html
@@ -0,0 +1,22 @@
+<tui-doc-page
+    header="LazyLoading"
+    package="KIT"
+    type="directives"
+>
+    <ng-template pageTab>
+        <p>
+            Directive can be used for image lazy loading. It is the same as
+            <code>loading="lazy"</code>
+            but supports also old browsers
+        </p>
+
+        <tui-doc-example
+            id="usage"
+            heading="Usage"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/directives/lazy-loading/index.ts b/projects/demo/src/modules/directives/lazy-loading/index.ts
new file mode 100644
index 000000000000..926e795dfdb3
--- /dev/null
+++ b/projects/demo/src/modules/directives/lazy-loading/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts b/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts
deleted file mode 100644
index 81347e8d4f2a..000000000000
--- a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-lazy-loading',
-    templateUrl: './lazy-loading.template.html',
-    changeDetection,
-})
-export class ExampleTuiLazyLoadingComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.module.ts b/projects/demo/src/modules/directives/lazy-loading/lazy-loading.module.ts
deleted file mode 100644
index dd35e84b1e92..000000000000
--- a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLazyLoadingModule} from '@taiga-ui/kit';
-
-import {TuiLazyLoadingExample1} from './examples/1';
-import {ExampleTuiLazyLoadingComponent} from './lazy-loading.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiLazyLoadingModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLazyLoadingComponent)),
-    ],
-    declarations: [ExampleTuiLazyLoadingComponent, TuiLazyLoadingExample1],
-    exports: [ExampleTuiLazyLoadingComponent],
-})
-export class ExampleTuiLazyLoadingModule {}
diff --git a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.template.html b/projects/demo/src/modules/directives/lazy-loading/lazy-loading.template.html
deleted file mode 100644
index 46a72d4a775e..000000000000
--- a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.template.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<tui-doc-page
-    header="LazyLoading"
-    package="KIT"
-    type="directives"
->
-    <ng-template pageTab>
-        <p>
-            Directive can be used for image lazy loading. It is the same as
-            <code>loading="lazy"</code>
-            but supports also old browsers
-        </p>
-
-        <tui-doc-example
-            id="usage"
-            heading="Usage"
-            [content]="example1"
-        >
-            <tui-lazy-loading-example-1 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiLazyLoadingModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>
-                    Add
-                    <code>loading="lazy"</code>
-                    for your elements:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/directives/media/examples/1/index.ts b/projects/demo/src/modules/directives/media/examples/1/index.ts
index 2ee9adbeeab9..4621c9d6fe40 100644
--- a/projects/demo/src/modules/directives/media/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/media/examples/1/index.ts
@@ -1,15 +1,17 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiHighDpiDirective, TuiMediaDirective} from '@taiga-ui/cdk';
 
 @Component({
-    selector: 'tui-media-example-1',
+    standalone: true,
+    imports: [TuiMediaDirective, TuiHighDpiDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiMediaExample1 {
+export default class ExampleComponent {
     protected currentTime = 0;
     protected volume = 1;
     protected paused = true;
diff --git a/projects/demo/src/modules/directives/media/examples/2/index.ts b/projects/demo/src/modules/directives/media/examples/2/index.ts
index cb0f2175c75c..b1dc22832d88 100644
--- a/projects/demo/src/modules/directives/media/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/media/examples/2/index.ts
@@ -1,16 +1,20 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {SECONDS_IN_MINUTE} from '@taiga-ui/cdk';
+import {SECONDS_IN_MINUTE, TuiMediaDirective} from '@taiga-ui/cdk';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiSliderModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-media-example-2',
+    standalone: true,
+    imports: [TuiMediaDirective, TuiButtonDirective, TuiSliderModule, FormsModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiMediaExample2 {
+export default class ExampleComponent {
     protected currentTime = 0;
     protected paused = true;
 
diff --git a/projects/demo/src/modules/directives/media/examples/3/index.ts b/projects/demo/src/modules/directives/media/examples/3/index.ts
index 178724b9e036..b8ec8ffcc8be 100644
--- a/projects/demo/src/modules/directives/media/examples/3/index.ts
+++ b/projects/demo/src/modules/directives/media/examples/3/index.ts
@@ -1,14 +1,25 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiMediaDirective} from '@taiga-ui/cdk';
+import {TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core';
+import {TuiSliderModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-media-example-3',
+    standalone: true,
+    imports: [
+        TuiMediaDirective,
+        TuiButtonDirective,
+        TuiLinkDirective,
+        TuiSliderModule,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection,
 })
-export class TuiMediaExample3 {
+export default class ExampleComponent {
     protected currentTime = 0;
     protected paused = true;
 
diff --git a/projects/demo/src/modules/directives/media/examples/import/import-module.md b/projects/demo/src/modules/directives/media/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/media/examples/import/import-module.md
rename to projects/demo/src/modules/directives/media/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/media/examples/import/insert-template.md b/projects/demo/src/modules/directives/media/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/media/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/media/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/media/media.template.html b/projects/demo/src/modules/directives/media/index.html
similarity index 82%
rename from projects/demo/src/modules/directives/media/media.template.html
rename to projects/demo/src/modules/directives/media/index.html
index 448a0716d3ed..93567b925912 100644
--- a/projects/demo/src/modules/directives/media/media.template.html
+++ b/projects/demo/src/modules/directives/media/index.html
@@ -9,26 +9,23 @@
         <tui-doc-example
             id="native"
             heading="Native controls"
-            [content]="example1"
-        >
-            <tui-media-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
 
         <tui-doc-example
             id="video"
             heading="Video"
-            [content]="example2"
-        >
-            <tui-media-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="audio"
             heading="Audio"
-            [content]="example3"
-        >
-            <tui-media-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -78,10 +75,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
-        />
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/media/index.ts b/projects/demo/src/modules/directives/media/index.ts
new file mode 100644
index 000000000000..188e29b560b5
--- /dev/null
+++ b/projects/demo/src/modules/directives/media/index.ts
@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiMediaDirective} from '@taiga-ui/cdk';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiMediaDirective],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {
+    protected readonly volumeVariants: readonly number[] = [1, 0.5, 0.25, 0];
+
+    protected playbackRate = 1;
+    protected currentTime = 0;
+    protected volume = this.volumeVariants[0];
+    protected paused = true;
+}
diff --git a/projects/demo/src/modules/directives/media/media.component.ts b/projects/demo/src/modules/directives/media/media.component.ts
deleted file mode 100644
index 0c75c3ee83e5..000000000000
--- a/projects/demo/src/modules/directives/media/media.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-media',
-    templateUrl: './media.template.html',
-    changeDetection,
-})
-export class ExampleTuiMediaComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly volumeVariants: readonly number[] = [1, 0.5, 0.25, 0];
-
-    protected playbackRate = 1;
-    protected currentTime = 0;
-    protected volume = this.volumeVariants[0];
-    protected paused = true;
-}
diff --git a/projects/demo/src/modules/directives/media/media.module.ts b/projects/demo/src/modules/directives/media/media.module.ts
deleted file mode 100644
index 62333b31e0eb..000000000000
--- a/projects/demo/src/modules/directives/media/media.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiHighDpiDirective, TuiMediaDirective} from '@taiga-ui/cdk';
-import {TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core';
-import {TuiSliderModule} from '@taiga-ui/kit';
-
-import {TuiMediaExample1} from './examples/1';
-import {TuiMediaExample2} from './examples/2';
-import {TuiMediaExample3} from './examples/3';
-import {ExampleTuiMediaComponent} from './media.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiMediaDirective,
-        TuiHighDpiDirective,
-        TuiLinkDirective,
-        TuiButtonDirective,
-        TuiSliderModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiMediaComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiMediaComponent,
-        TuiMediaExample1,
-        TuiMediaExample2,
-        TuiMediaExample3,
-    ],
-    exports: [ExampleTuiMediaComponent],
-})
-export class ExampleTuiMediaModule {}
diff --git a/projects/demo/src/modules/directives/present/examples/1/index.ts b/projects/demo/src/modules/directives/present/examples/1/index.ts
index 14c201b270f8..8371cd1b7ff5 100644
--- a/projects/demo/src/modules/directives/present/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/present/examples/1/index.ts
@@ -1,15 +1,19 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiHoveredDirective} from '@taiga-ui/cdk';
+import {TuiBadgeDirective, TuiPresentDirective} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-present-example-1',
+    standalone: true,
+    imports: [TuiHoveredDirective, TuiPresentDirective, NgIf, TuiBadgeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiPresentExample1 {
+export default class ExampleComponent {
     protected counterCSS = 0;
 
     protected counterIf = 0;
diff --git a/projects/demo/src/modules/directives/present/examples/import/import-module.md b/projects/demo/src/modules/directives/present/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/present/examples/import/import-module.md
rename to projects/demo/src/modules/directives/present/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/present/examples/import/insert-template.md b/projects/demo/src/modules/directives/present/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/present/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/present/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/present/present.template.html b/projects/demo/src/modules/directives/present/index.html
similarity index 58%
rename from projects/demo/src/modules/directives/present/present.template.html
rename to projects/demo/src/modules/directives/present/index.html
index bbe5ebc1a194..e1337259f0cb 100644
--- a/projects/demo/src/modules/directives/present/present.template.html
+++ b/projects/demo/src/modules/directives/present/index.html
@@ -2,6 +2,7 @@
     header="Present"
     package="KIT"
     path="kit/directives/present"
+    type="directives"
 >
     <ng-template pageTab>
         <p>
@@ -12,16 +13,10 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-present-example-1 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
         />
     </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/present/index.ts b/projects/demo/src/modules/directives/present/index.ts
new file mode 100644
index 000000000000..926e795dfdb3
--- /dev/null
+++ b/projects/demo/src/modules/directives/present/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/directives/present/present.component.ts b/projects/demo/src/modules/directives/present/present.component.ts
deleted file mode 100644
index e1dd97bfd77c..000000000000
--- a/projects/demo/src/modules/directives/present/present.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-present',
-    templateUrl: './present.template.html',
-    changeDetection,
-})
-export class ExampleTuiPresentComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/present/present.module.ts b/projects/demo/src/modules/directives/present/present.module.ts
deleted file mode 100644
index dc2ac7628154..000000000000
--- a/projects/demo/src/modules/directives/present/present.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiHoveredDirective, TuiLetDirective} from '@taiga-ui/cdk';
-import {TuiBadgeDirective, TuiPresentDirective} from '@taiga-ui/kit';
-
-import {TuiPresentExample1} from './examples/1';
-import {ExampleTuiPresentComponent} from './present.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiLetDirective,
-        TuiPresentDirective,
-        TuiHoveredDirective,
-        TuiBadgeDirective,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPresentComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [ExampleTuiPresentComponent, TuiPresentExample1],
-    exports: [ExampleTuiPresentComponent],
-})
-export class ExampleTuiPresentDirective {}
diff --git a/projects/demo/src/modules/directives/validator/examples/1/index.ts b/projects/demo/src/modules/directives/validator/examples/1/index.ts
index 280e5d8a90d1..27ed066f2a00 100644
--- a/projects/demo/src/modules/directives/validator/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/validator/examples/1/index.ts
@@ -1,15 +1,35 @@
+import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiValidatorDirective} from '@taiga-ui/cdk';
+import {TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiInputModule, TuiInputPhoneModule, TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-validator-example-1',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputModule,
+        TuiSelectModule,
+        FormsModule,
+        TuiDataListWrapperModule,
+        NgIf,
+        TuiValidatorDirective,
+        TuiInputPhoneModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiValidatorExample1 {
+export default class ExampleComponent {
     protected readonly items = ['Email', 'Phone'];
 
     protected type = this.items[0];
diff --git a/projects/demo/src/modules/directives/validator/examples/import/import-module.md b/projects/demo/src/modules/directives/validator/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/directives/validator/examples/import/import-module.md
rename to projects/demo/src/modules/directives/validator/examples/import/import.md
diff --git a/projects/demo/src/modules/directives/validator/examples/import/insert-template.md b/projects/demo/src/modules/directives/validator/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/validator/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/validator/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/validator/validator.template.html b/projects/demo/src/modules/directives/validator/index.html
similarity index 57%
rename from projects/demo/src/modules/directives/validator/validator.template.html
rename to projects/demo/src/modules/directives/validator/index.html
index b2be345a8483..ab8b91e35e0d 100644
--- a/projects/demo/src/modules/directives/validator/validator.template.html
+++ b/projects/demo/src/modules/directives/validator/index.html
@@ -12,16 +12,10 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-validator-example-1 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         />
     </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/validator/index.ts b/projects/demo/src/modules/directives/validator/index.ts
new file mode 100644
index 000000000000..926e795dfdb3
--- /dev/null
+++ b/projects/demo/src/modules/directives/validator/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}
diff --git a/projects/demo/src/modules/directives/validator/validator.component.ts b/projects/demo/src/modules/directives/validator/validator.component.ts
deleted file mode 100644
index ef3aa9515d6a..000000000000
--- a/projects/demo/src/modules/directives/validator/validator.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-validator',
-    templateUrl: './validator.template.html',
-    changeDetection,
-})
-export class ExampleTuiValidatorComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/directives/validator/validator.module.ts b/projects/demo/src/modules/directives/validator/validator.module.ts
deleted file mode 100644
index 256277286194..000000000000
--- a/projects/demo/src/modules/directives/validator/validator.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiValidatorDirective} from '@taiga-ui/cdk';
-import {TuiDataList} from '@taiga-ui/core';
-import {TuiDataListWrapperModule} from '@taiga-ui/kit';
-import {TuiInputModule, TuiInputPhoneModule, TuiSelectModule} from '@taiga-ui/legacy';
-
-import {TuiValidatorExample1} from './examples/1';
-import {ExampleTuiValidatorComponent} from './validator.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputModule,
-        TuiSelectModule,
-        TuiValidatorDirective,
-        TuiInputPhoneModule,
-        TuiDataList,
-        TuiDataListWrapperModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiValidatorComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [ExampleTuiValidatorComponent, TuiValidatorExample1],
-    exports: [ExampleTuiValidatorComponent],
-})
-export class ExampleTuiValidatorModule {}
diff --git a/projects/demo/src/modules/pipes/currency/currency.component.ts b/projects/demo/src/modules/pipes/currency/currency.component.ts
deleted file mode 100644
index 41e5fc9e2b79..000000000000
--- a/projects/demo/src/modules/pipes/currency/currency.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-tui-currency',
-    templateUrl: './currency.template.html',
-    changeDetection,
-})
-export class ExampleTuiCurrencyComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/template.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/component.ts?raw'),
-        HTML: import('./examples/2/template.html?raw'),
-    };
-
-    protected readonly currencyVariants = [null, 826, 840, 'EUR', 'RUB', 'UGX', 'USD'];
-    protected currency = this.currencyVariants[0];
-
-    protected readonly control = new FormControl(6432, Validators.required);
-}
diff --git a/projects/demo/src/modules/pipes/currency/currency.module.ts b/projects/demo/src/modules/pipes/currency/currency.module.ts
deleted file mode 100644
index 7062273f6b22..000000000000
--- a/projects/demo/src/modules/pipes/currency/currency.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {TuiInputNumberModule} from '@taiga-ui/legacy';
-
-import {ExampleTuiCurrencyComponent} from './currency.component';
-import {TuiCurrencyExample1} from './examples/1/component';
-import {TuiCurrencyExample2} from './examples/2/component';
-
-@NgModule({
-    imports: [
-        TuiTextfieldControllerModule,
-        TuiCurrencyPipe,
-        TuiInputNumberModule,
-        ReactiveFormsModule,
-        FormsModule,
-        TuiLinkDirective,
-        CommonModule,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCurrencyComponent)),
-    ],
-    declarations: [ExampleTuiCurrencyComponent, TuiCurrencyExample2, TuiCurrencyExample1],
-    exports: [ExampleTuiCurrencyComponent],
-})
-export class ExampleTuiCurrencyModule {}
diff --git a/projects/demo/src/modules/pipes/currency/examples/1/template.html b/projects/demo/src/modules/pipes/currency/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/pipes/currency/examples/1/template.html
rename to projects/demo/src/modules/pipes/currency/examples/1/index.html
diff --git a/projects/demo/src/modules/pipes/currency/examples/1/component.ts b/projects/demo/src/modules/pipes/currency/examples/1/index.ts
similarity index 54%
rename from projects/demo/src/modules/pipes/currency/examples/1/component.ts
rename to projects/demo/src/modules/pipes/currency/examples/1/index.ts
index 745477b8e98d..e1f38fa42bd7 100644
--- a/projects/demo/src/modules/pipes/currency/examples/1/component.ts
+++ b/projects/demo/src/modules/pipes/currency/examples/1/index.ts
@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
 
 @Component({
-    selector: 'tui-currency-example1',
-    templateUrl: './template.html',
+    standalone: true,
+    imports: [TuiCurrencyPipe],
+    templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCurrencyExample1 {}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/pipes/currency/examples/2/component.ts b/projects/demo/src/modules/pipes/currency/examples/2/component.ts
deleted file mode 100644
index 341da511427d..000000000000
--- a/projects/demo/src/modules/pipes/currency/examples/2/component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-currency-example2',
-    templateUrl: './template.html',
-    encapsulation,
-    changeDetection,
-})
-export class TuiCurrencyExample2 {
-    protected readonly testForm = new FormGroup({
-        testValue: new FormControl(100),
-    });
-}
diff --git a/projects/demo/src/modules/pipes/currency/examples/2/template.html b/projects/demo/src/modules/pipes/currency/examples/2/index.html
similarity index 100%
rename from projects/demo/src/modules/pipes/currency/examples/2/template.html
rename to projects/demo/src/modules/pipes/currency/examples/2/index.html
diff --git a/projects/demo/src/modules/pipes/currency/examples/2/index.ts b/projects/demo/src/modules/pipes/currency/examples/2/index.ts
new file mode 100644
index 000000000000..6c90345ce0f6
--- /dev/null
+++ b/projects/demo/src/modules/pipes/currency/examples/2/index.ts
@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputNumberModule,
+        TuiCurrencyPipe,
+        TuiTextfieldControllerModule,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly testForm = new FormGroup({
+        testValue: new FormControl(100),
+    });
+}
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/import-module.md b/projects/demo/src/modules/pipes/currency/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/pipes/currency/examples/import/import-module.md
rename to projects/demo/src/modules/pipes/currency/examples/import/import.md
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/insert-template.md b/projects/demo/src/modules/pipes/currency/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/pipes/currency/examples/import/insert-template.md
rename to projects/demo/src/modules/pipes/currency/examples/import/template.md
diff --git a/projects/demo/src/modules/pipes/currency/currency.template.html b/projects/demo/src/modules/pipes/currency/index.html
similarity index 60%
rename from projects/demo/src/modules/pipes/currency/currency.template.html
rename to projects/demo/src/modules/pipes/currency/index.html
index c40bfba5bffd..85057a14b2fa 100644
--- a/projects/demo/src/modules/pipes/currency/currency.template.html
+++ b/projects/demo/src/modules/pipes/currency/index.html
@@ -2,6 +2,7 @@
     header="Currency"
     package="ADDON-COMMERCE"
     path="addon-commerce/pipes/currency.pipe.ts"
+    type="pipes"
 >
     <ng-template pageTab>
         Pipe for transforming number into money. It is usually used with
@@ -14,17 +15,15 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-currency-example1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
         <tui-doc-example
             id="with-input"
             heading="With Input"
-            [content]="example2"
-        >
-            <tui-currency-example2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -51,29 +50,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiCurrencyPipe</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>Use pipe in template with input:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/pipes/currency/index.ts b/projects/demo/src/modules/pipes/currency/index.ts
new file mode 100644
index 000000000000..64b392a18ae5
--- /dev/null
+++ b/projects/demo/src/modules/pipes/currency/index.ts
@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {RouterLink} from '@angular/router';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiLinkDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        RouterLink,
+        TuiLinkDirective,
+        TuiInputNumberModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        TuiCurrencyPipe,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {
+    protected readonly currencyVariants = [null, 826, 840, 'EUR', 'RUB', 'UGX', 'USD'];
+    protected currency = this.currencyVariants[0];
+
+    protected readonly control = new FormControl(6432, Validators.required);
+}
diff --git a/projects/demo/src/modules/pipes/field-error/examples/1/index.ts b/projects/demo/src/modules/pipes/field-error/examples/1/index.ts
index c37ef0830387..831bf7a20742 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/1/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/1/index.ts
@@ -1,8 +1,18 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import type {AbstractControl} from '@angular/forms';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiErrorComponent,
+    TuiLabelDirective,
+    TuiLinkDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 import {distinctUntilChanged} from 'rxjs';
 
 const latinChars = /^[a-zA-Z]+$/;
@@ -24,12 +34,23 @@ export function superComputerValidator(field: AbstractControl): Validators | nul
 }
 
 @Component({
-    selector: 'tui-field-error-pipe-example-1',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiLabelDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+        RouterLink,
+        TuiLinkDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiFieldErrorPipeExample1 {
+export default class ExampleComponent {
     protected readonly testValue1 = new FormControl('', [
         Validators.required,
         passwordValidator,
diff --git a/projects/demo/src/modules/pipes/field-error/examples/2/index.ts b/projects/demo/src/modules/pipes/field-error/examples/2/index.ts
index 3b07b5ae9d64..b0b6f5841819 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/2/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/2/index.ts
@@ -1,13 +1,32 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiIsFalsy} from '@taiga-ui/cdk';
-import {TUI_VALIDATION_ERRORS} from '@taiga-ui/kit';
+import {
+    TuiErrorComponent,
+    TuiLabelDirective,
+    TuiTextfieldControllerModule,
+    TuiTextfieldOptionsDirective,
+} from '@taiga-ui/core';
+import {TUI_VALIDATION_ERRORS, TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputModule, TuiInputNumberModule} from '@taiga-ui/legacy';
 import {interval, map, of, scan, startWith} from 'rxjs';
 
 @Component({
-    selector: 'tui-field-error-pipe-example-2',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiLabelDirective,
+        TuiInputModule,
+        TuiTextfieldOptionsDirective,
+        TuiTextfieldControllerModule,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+        TuiInputNumberModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -30,7 +49,7 @@ import {interval, map, of, scan, startWith} from 'rxjs';
         },
     ],
 })
-export class TuiFieldErrorPipeExample2 {
+export default class ExampleComponent {
     protected readonly testValue1 = new FormControl('', [
         Validators.minLength(4),
         Validators.maxLength(4),
diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.ts b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts
index e8e1423348a0..a771a95186fd 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/3/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts
@@ -1,23 +1,43 @@
+import {AsyncPipe} from '@angular/common';
 import type {OnInit} from '@angular/core';
 import {Component, ViewChild} from '@angular/core';
 import type {AbstractControl, ValidationErrors} from '@angular/forms';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiMarkControlAsTouchedAndValidate, TuiValidationError} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiErrorComponent,
+    TuiLabelDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiCheckboxComponent, TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 const secretRegexTen = /^\d{10}$/;
 const secretRegexTwelve = /^\d{12}$/;
 
 @Component({
-    selector: 'tui-field-error-pipe-example-3',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiLabelDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+        TuiCheckboxComponent,
+        TuiButtonDirective,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiFieldErrorPipeExample3 implements OnInit {
+export default class ExampleComponent implements OnInit {
     @ViewChild('errorContent')
     protected errorContent: PolymorpheusContent;
 
diff --git a/projects/demo/src/modules/pipes/field-error/examples/4/index.ts b/projects/demo/src/modules/pipes/field-error/examples/4/index.ts
index d24ce375b101..7c73a9094763 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/4/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/4/index.ts
@@ -1,19 +1,47 @@
+import {AsyncPipe, NgForOf} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
 import type {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
-import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
+import {
+    FormArray,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiValidationError} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiErrorComponent,
+    TuiLabelDirective,
+    TuiTextfieldControllerModule,
+    TuiTextfieldOptionsDirective,
+} from '@taiga-ui/core';
+import {TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputPhoneModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 @Component({
-    selector: 'tui-field-error-pipe-example-4',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgForOf,
+        TuiLabelDirective,
+        TuiInputPhoneModule,
+        TuiTextfieldOptionsDirective,
+        TuiTextfieldControllerModule,
+        TuiButtonDirective,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiFieldErrorPipeExample4 {
+export default class ExampleComponent {
     @ViewChild('phoneErrorContent')
     protected phoneErrorContent: PolymorpheusContent;
 
diff --git a/projects/demo/src/modules/pipes/field-error/examples/5/index.ts b/projects/demo/src/modules/pipes/field-error/examples/5/index.ts
index 3625e7e0a956..597b7f84c5e9 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/5/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/5/index.ts
@@ -1,9 +1,13 @@
+import {AsyncPipe} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import type {AbstractControl, AsyncValidatorFn, FormGroup} from '@angular/forms';
-import {UntypedFormBuilder, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TUI_IS_E2E, TuiValidationError} from '@taiga-ui/cdk';
+import {TuiErrorComponent} from '@taiga-ui/core';
+import {TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 import {delay, of} from 'rxjs';
 
 const latinChars = /^[a-zA-Z]+$/;
@@ -18,13 +22,20 @@ function asyncValidatorFn(isE2E: boolean): AsyncValidatorFn {
 }
 
 @Component({
-    selector: 'tui-field-error-pipe-example-5',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputModule,
+        TuiErrorComponent,
+        TuiFieldErrorPipeModule,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiFieldErrorPipeExample5 {
+export default class ExampleComponent {
     private readonly fb = inject(UntypedFormBuilder);
 
     protected readonly form: FormGroup;
diff --git a/projects/demo/src/modules/pipes/field-error/examples/6/index.ts b/projects/demo/src/modules/pipes/field-error/examples/6/index.ts
index 480d80b618bb..7fe4b3db9b2f 100644
--- a/projects/demo/src/modules/pipes/field-error/examples/6/index.ts
+++ b/projects/demo/src/modules/pipes/field-error/examples/6/index.ts
@@ -1,11 +1,40 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_VALIDATION_ERRORS} from '@taiga-ui/kit';
+import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {
+    TuiCellDirective,
+    TuiTableDirective,
+    TuiTbodyComponent,
+    TuiTdComponent,
+    TuiThComponent,
+    TuiThGroupComponent,
+    TuiTrComponent,
+} from '@taiga-ui/addon-table';
+import {TuiHintDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TUI_VALIDATION_ERRORS, TuiFieldErrorPipeModule} from '@taiga-ui/kit';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-field-error-content-pipe-example-6',
+    standalone: true,
+    imports: [
+        TuiTableDirective,
+        TuiThGroupComponent,
+        TuiThComponent,
+        TuiTbodyComponent,
+        NgForOf,
+        TuiTrComponent,
+        TuiCellDirective,
+        TuiTdComponent,
+        TuiInputNumberModule,
+        TuiHintDirective,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        TuiFieldErrorPipeModule,
+        TuiCurrencyPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
@@ -21,7 +50,7 @@ import {TUI_VALIDATION_ERRORS} from '@taiga-ui/kit';
         },
     ],
 })
-export class TuiFieldErrorContentPipeExample6 {
+export default class ExampleComponent {
     protected readonly data = [{name: 'Latte'}, {name: 'Cappuccino'}] as const;
 
     protected latteControl = new FormControl<number | null>(null, [
diff --git a/projects/demo/src/modules/pipes/field-error/examples/import/import-module.md b/projects/demo/src/modules/pipes/field-error/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/pipes/field-error/examples/import/import-module.md
rename to projects/demo/src/modules/pipes/field-error/examples/import/import.md
diff --git a/projects/demo/src/modules/pipes/field-error/examples/import/insert-template.md b/projects/demo/src/modules/pipes/field-error/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/pipes/field-error/examples/import/insert-template.md
rename to projects/demo/src/modules/pipes/field-error/examples/import/template.md
diff --git a/projects/demo/src/modules/pipes/field-error/field-error.component.ts b/projects/demo/src/modules/pipes/field-error/field-error.component.ts
deleted file mode 100644
index 86a2ad2080c0..000000000000
--- a/projects/demo/src/modules/pipes/field-error/field-error.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-field-error-pipe',
-    templateUrl: './field-error.template.html',
-    changeDetection,
-})
-export class ExampleTuiFieldErrorPipeComponent {
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
-    protected readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-        LESS: import('./examples/6/index.less?raw'),
-    };
-}
diff --git a/projects/demo/src/modules/pipes/field-error/field-error.module.ts b/projects/demo/src/modules/pipes/field-error/field-error.module.ts
deleted file mode 100644
index 6fb6758ae1c9..000000000000
--- a/projects/demo/src/modules/pipes/field-error/field-error.module.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiTable} from '@taiga-ui/addon-table';
-import {
-    TuiButtonDirective,
-    TuiErrorComponent,
-    TuiHint,
-    TuiLabelDirective,
-    TuiLinkDirective,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiCheckboxComponent, TuiFieldErrorPipeModule} from '@taiga-ui/kit';
-import {
-    TuiInputModule,
-    TuiInputNumberModule,
-    TuiInputPhoneModule,
-} from '@taiga-ui/legacy';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {TuiFieldErrorPipeExample1} from './examples/1';
-import {TuiFieldErrorPipeExample2} from './examples/2';
-import {TuiFieldErrorPipeExample3} from './examples/3';
-import {TuiFieldErrorPipeExample4} from './examples/4';
-import {TuiFieldErrorPipeExample5} from './examples/5';
-import {TuiFieldErrorContentPipeExample6} from './examples/6';
-import {ExampleTuiFieldErrorPipeComponent} from './field-error.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        TuiAddonDoc,
-        TuiTextfieldControllerModule,
-        TuiErrorComponent,
-        TuiFieldErrorPipeModule,
-        TuiLabelDirective,
-        TuiHint,
-        TuiInputModule,
-        TuiButtonDirective,
-        TuiInputPhoneModule,
-        TuiLinkDirective,
-        TuiTable,
-        TuiInputNumberModule,
-        TuiCurrencyPipe,
-        PolymorpheusModule,
-        TuiCheckboxComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiFieldErrorPipeComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiFieldErrorPipeComponent,
-        TuiFieldErrorPipeExample1,
-        TuiFieldErrorPipeExample2,
-        TuiFieldErrorPipeExample3,
-        TuiFieldErrorPipeExample4,
-        TuiFieldErrorPipeExample5,
-        TuiFieldErrorContentPipeExample6,
-    ],
-    exports: [ExampleTuiFieldErrorPipeComponent],
-})
-export class ExampleTuiFieldErrorModule {}
diff --git a/projects/demo/src/modules/pipes/field-error/field-error.template.html b/projects/demo/src/modules/pipes/field-error/index.html
similarity index 61%
rename from projects/demo/src/modules/pipes/field-error/field-error.template.html
rename to projects/demo/src/modules/pipes/field-error/index.html
index 3cad99933f0b..0c6275f16baa 100644
--- a/projects/demo/src/modules/pipes/field-error/field-error.template.html
+++ b/projects/demo/src/modules/pipes/field-error/index.html
@@ -29,56 +29,45 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-field-error-pipe-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="custom-messages"
             heading="With custom messages for validators"
-            [content]="example2"
-        >
-            <tui-field-error-pipe-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="patterns"
             heading="with a template"
-            [content]="example3"
-        >
-            <tui-field-error-pipe-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="form-array"
             heading="With adding new controls (FormArray)"
-            [content]="example4"
-        >
-            <tui-field-error-pipe-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
+        />
 
         <tui-doc-example
             id="async"
             heading="async validator"
-            [content]="example5"
-        >
-            <tui-field-error-pipe-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
 
         <tui-doc-example
             id="content"
             heading="tuiFieldErrorContentPipe"
-            [content]="example6"
-        >
-            <tui-field-error-content-pipe-example-6 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
         />
     </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/pipes/field-error/index.ts b/projects/demo/src/modules/pipes/field-error/index.ts
new file mode 100644
index 000000000000..752658772981
--- /dev/null
+++ b/projects/demo/src/modules/pipes/field-error/index.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiLinkDirective} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiLinkDirective, RouterLink],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}