From 3e41b07168664f8d07bdbdaed76ab3d22a6f5ebe Mon Sep 17 00:00:00 2001
From: Maksim Ivanov <omaxphp@yandex.ru>
Date: Fri, 31 May 2024 15:57:14 +0300
Subject: [PATCH] chore(demo): standalone (#7587)

---
 projects/demo/src/modules/app/app.routes.ts   |  56 ++------
 .../input-date-range/examples/1/index.ts      |  13 +-
 .../input-date-range/examples/2/index.ts      |   8 +-
 .../input-date-range/examples/3/index.ts      |   8 +-
 .../input-date-range/examples/4/index.ts      |  63 +++++++--
 .../examples/4/value-transformers.ts          |  51 -------
 .../input-date-range/examples/5/index.ts      |   8 +-
 .../examples/import/declare-form.md           |  14 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 ...ut-date-range.template.html => index.html} |  88 ++----------
 ...input-date-range.component.ts => index.ts} |  70 +++++-----
 .../input-date-range.module.ts                |  51 -------
 .../input-date-time/examples/1/index.ts       |   9 +-
 .../input-date-time/examples/2/index.ts       |   9 +-
 .../input-date-time/examples/3/index.ts       |   8 +-
 .../input-date-time/examples/4/index.ts       |  33 ++++-
 .../examples/4/value-transformer.ts           |  24 ----
 .../input-date-time/examples/5/index.ts       |   9 +-
 .../examples/import/declare-form.md           |  14 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 ...put-date-time.template.html => index.html} |  70 ++--------
 ...{input-date-time.component.ts => index.ts} |  65 ++++-----
 .../input-date-time/input-date-time.module.ts |  48 -------
 .../input-month-range/examples/1/index.ts     |  13 +-
 .../input-month-range/examples/2/index.ts     |  13 +-
 .../input-month-range/examples/3/index.ts     |   8 +-
 .../examples/import/declare-form.md           |  12 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 ...t-month-range.template.html => index.html} |  61 ++-------
 ...nput-month-range.component.ts => index.ts} |  47 +++----
 .../input-month-range.module.ts               |  44 ------
 .../input-month/examples/1/index.ts           |   9 +-
 .../input-month/examples/2/index.ts           |   9 +-
 .../input-month/examples/3/index.ts           |   9 +-
 .../examples/import/declare-form.md           |  14 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 .../{input-month.template.html => index.html} |  63 ++-------
 .../{input-month.component.ts => index.ts}    |  42 +++---
 .../input-month/input-month.module.ts         |  34 -----
 .../input-number/examples/1/index.ts          |  16 ++-
 .../input-number/examples/2/index.ts          |   9 +-
 .../input-number/examples/3/index.ts          |   9 +-
 .../input-number/examples/4/index.ts          |  18 ++-
 .../input-number/examples/5/index.ts          |  18 ++-
 .../input-number/examples/6/index.ts          |   8 +-
 .../input-number/examples/7/index.ts          |  13 +-
 .../examples/import/declare-form.md           |  12 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 ...{input-number.template.html => index.html} |  81 +++--------
 .../modules/components/input-number/index.ts  |  56 ++++++++
 .../input-number/input-number.component.ts    |  76 -----------
 .../input-number/input-number.module.ts       |  60 --------
 .../input-password/examples/1/index.ts        |   9 +-
 .../input-password/examples/2/index.ts        |  10 +-
 .../examples/import/declare-form.md           |  14 --
 .../examples/import/define-options.md         |  23 ----
 .../examples/import/import-module.md          |  18 ---
 .../input-password/examples/import/import.md  |  33 +++++
 .../{insert-template.md => template.md}       |   0
 ...nput-password.template.html => index.html} |  65 +--------
 .../components/input-password/index.ts        |  38 ++++++
 .../input-password.component.ts               |  37 -----
 .../input-password/input-password.module.ts   |  42 ------
 .../input-phone/examples/1/index.ts           |  10 +-
 .../input-phone/examples/2/index.ts           |   9 +-
 .../input-phone/examples/3/index.ts           |  29 +++-
 .../examples/import/declare-form.md           |  14 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 .../{input-phone.template.html => index.html} |  59 ++------
 .../{input-phone.style.less => index.less}    |   0
 .../modules/components/input-phone/index.ts   |  53 ++++++++
 .../input-phone/input-phone.component.ts      |  53 --------
 .../input-phone/input-phone.module.ts         |  56 --------
 .../input-range/examples/1/index.ts           |   9 +-
 .../input-range/examples/2/index.ts           |  10 +-
 .../input-range/examples/3/index.ts           |  16 ++-
 .../input-range/examples/4/index.ts           |   9 +-
 .../input-range/examples/5/index.ts           |   9 +-
 .../input-range/examples/6/index.ts           |  27 +++-
 .../input-range/examples/6/transformer.ts     |  17 ---
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 .../{input-range.template.html => index.html} |  38 ++----
 .../{input-range.component.ts => index.ts}    |  68 ++++------
 .../input-range/input-range.module.ts         |  61 ---------
 .../input-slider/examples/1/index.ts          |   9 +-
 .../input-slider/examples/2/index.ts          |   9 +-
 .../input-slider/examples/3/index.ts          |   9 +-
 .../input-slider/examples/4/index.ts          |  18 ++-
 .../input-slider/examples/5/index.ts          |   9 +-
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 ...{input-slider.template.html => index.html} |  30 ++--
 .../{input-slider.component.ts => index.ts}   |  66 ++++-----
 .../input-slider/input-slider.module.ts       |  57 --------
 .../components/input-tag/examples/1/index.ts  |   9 +-
 .../components/input-tag/examples/2/index.ts  |  17 ++-
 .../components/input-tag/examples/3/index.ts  |   9 +-
 .../components/input-tag/examples/4/index.ts  |  29 +++-
 .../components/input-tag/examples/5/index.ts  |  13 +-
 .../components/input-tag/examples/6/index.ts  |  19 ++-
 .../components/input-tag/examples/7/index.ts  |   8 +-
 .../components/input-tag/examples/8/index.ts  |   9 +-
 .../components/input-tag/examples/9/index.ts  |  15 +-
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 .../{input-tag.template.html => index.html}   |  65 ++++-----
 .../src/modules/components/input-tag/index.ts |  99 ++++++++++++++
 .../input-tag/input-tag.component.ts          | 128 ------------------
 .../components/input-tag/input-tag.module.ts  |  68 ----------
 .../components/input-time/examples/1/index.ts |  15 +-
 .../components/input-time/examples/2/index.ts |   8 +-
 .../components/input-time/examples/3/index.ts |   9 +-
 .../components/input-time/examples/4/index.ts |  10 +-
 .../components/input-time/examples/5/index.ts |  16 ++-
 .../components/input-time/examples/6/index.ts |  10 +-
 .../examples/import/declare-form.md           |  15 --
 .../examples/import/define-options.md         |  21 ---
 .../examples/import/import-module.md          |  18 ---
 .../input-time/examples/import/import.md      |  31 +++++
 .../{insert-template.md => template.md}       |   0
 .../{input-time.template.html => index.html}  |  93 +++----------
 .../modules/components/input-time/index.ts    |  79 +++++++++++
 .../input-time/input-time.component.ts        |  99 --------------
 .../input-time/input-time.module.ts           |  55 --------
 .../components/input-year/examples/1/index.ts |   9 +-
 .../components/input-year/examples/2/index.ts |   9 +-
 .../examples/import/declare-form.md           |  14 --
 .../import/{import-module.md => import.md}    |   6 +-
 .../{insert-template.md => template.md}       |   0
 .../{input-year.template.html => index.html}  |  52 +------
 .../{input-year.component.ts => index.ts}     |  37 +++--
 .../input-year/input-year.module.ts           |  28 ----
 .../items-with-more/examples/1/index.ts       |  18 ++-
 .../items-with-more/examples/2/index.ts       |  42 +++++-
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 ...ems-with-more.template.html => index.html} |  14 +-
 .../components/items-with-more/index.ts       |  42 ++++++
 .../items-with-more.component.ts              |  41 ------
 .../items-with-more/items-with-more.module.ts |  50 -------
 .../components/line-clamp/examples/1/index.ts |   8 +-
 .../components/line-clamp/examples/2/index.ts |   7 +-
 .../components/line-clamp/examples/3/index.ts |   6 +-
 .../components/line-clamp/examples/4/index.ts |  32 ++++-
 .../components/line-clamp/examples/5/index.ts |   7 +-
 .../import/{import-module.md => import.md}    |   0
 .../{insert-template.md => template.md}       |   0
 .../{line-clamp.template.html => index.html}  |  42 +++---
 .../{line-clamp.style.less => index.less}     |   0
 .../modules/components/line-clamp/index.ts    |  18 +++
 .../line-clamp/line-clamp.component.ts        |  49 -------
 .../line-clamp/line-clamp.module.ts           |  55 --------
 159 files changed, 1511 insertions(+), 2594 deletions(-)
 delete mode 100644 projects/demo/src/modules/components/input-date-range/examples/4/value-transformers.ts
 delete mode 100644 projects/demo/src/modules/components/input-date-range/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-date-range/examples/import/{import-module.md => import.md} (74%)
 rename projects/demo/src/modules/components/input-date-range/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-date-range/{input-date-range.template.html => index.html} (80%)
 rename projects/demo/src/modules/components/input-date-range/{input-date-range.component.ts => index.ts} (62%)
 delete mode 100644 projects/demo/src/modules/components/input-date-range/input-date-range.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-date-time/examples/4/value-transformer.ts
 delete mode 100644 projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-date-time/examples/import/{import-module.md => import.md} (74%)
 rename projects/demo/src/modules/components/input-date-time/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-date-time/{input-date-time.template.html => index.html} (80%)
 rename projects/demo/src/modules/components/input-date-time/{input-date-time.component.ts => index.ts} (58%)
 delete mode 100644 projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-month-range/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-month-range/examples/import/{import-module.md => import.md} (71%)
 rename projects/demo/src/modules/components/input-month-range/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-month-range/{input-month-range.template.html => index.html} (75%)
 rename projects/demo/src/modules/components/input-month-range/{input-month-range.component.ts => index.ts} (53%)
 delete mode 100644 projects/demo/src/modules/components/input-month-range/input-month-range.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-month/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-month/examples/import/{import-module.md => import.md} (60%)
 rename projects/demo/src/modules/components/input-month/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-month/{input-month.template.html => index.html} (71%)
 rename projects/demo/src/modules/components/input-month/{input-month.component.ts => index.ts} (52%)
 delete mode 100644 projects/demo/src/modules/components/input-month/input-month.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-number/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-number/examples/import/{import-module.md => import.md} (70%)
 rename projects/demo/src/modules/components/input-number/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-number/{input-number.template.html => index.html} (80%)
 create mode 100644 projects/demo/src/modules/components/input-number/index.ts
 delete mode 100644 projects/demo/src/modules/components/input-number/input-number.component.ts
 delete mode 100644 projects/demo/src/modules/components/input-number/input-number.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-password/examples/import/declare-form.md
 delete mode 100644 projects/demo/src/modules/components/input-password/examples/import/define-options.md
 delete mode 100644 projects/demo/src/modules/components/input-password/examples/import/import-module.md
 create mode 100644 projects/demo/src/modules/components/input-password/examples/import/import.md
 rename projects/demo/src/modules/components/input-password/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-password/{input-password.template.html => index.html} (58%)
 create mode 100644 projects/demo/src/modules/components/input-password/index.ts
 delete mode 100644 projects/demo/src/modules/components/input-password/input-password.component.ts
 delete mode 100644 projects/demo/src/modules/components/input-password/input-password.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-phone/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-phone/examples/import/{import-module.md => import.md} (68%)
 rename projects/demo/src/modules/components/input-phone/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-phone/{input-phone.template.html => index.html} (76%)
 rename projects/demo/src/modules/components/input-phone/{input-phone.style.less => index.less} (100%)
 create mode 100644 projects/demo/src/modules/components/input-phone/index.ts
 delete mode 100644 projects/demo/src/modules/components/input-phone/input-phone.component.ts
 delete mode 100644 projects/demo/src/modules/components/input-phone/input-phone.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-range/examples/6/transformer.ts
 rename projects/demo/src/modules/components/input-range/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/input-range/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-range/{input-range.template.html => index.html} (93%)
 rename projects/demo/src/modules/components/input-range/{input-range.component.ts => index.ts} (55%)
 delete mode 100644 projects/demo/src/modules/components/input-range/input-range.module.ts
 rename projects/demo/src/modules/components/input-slider/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/input-slider/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-slider/{input-slider.template.html => index.html} (93%)
 rename projects/demo/src/modules/components/input-slider/{input-slider.component.ts => index.ts} (56%)
 delete mode 100644 projects/demo/src/modules/components/input-slider/input-slider.module.ts
 rename projects/demo/src/modules/components/input-tag/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/input-tag/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-tag/{input-tag.template.html => index.html} (89%)
 create mode 100644 projects/demo/src/modules/components/input-tag/index.ts
 delete mode 100644 projects/demo/src/modules/components/input-tag/input-tag.component.ts
 delete mode 100644 projects/demo/src/modules/components/input-tag/input-tag.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-time/examples/import/declare-form.md
 delete mode 100644 projects/demo/src/modules/components/input-time/examples/import/define-options.md
 delete mode 100644 projects/demo/src/modules/components/input-time/examples/import/import-module.md
 create mode 100644 projects/demo/src/modules/components/input-time/examples/import/import.md
 rename projects/demo/src/modules/components/input-time/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-time/{input-time.template.html => index.html} (71%)
 create mode 100644 projects/demo/src/modules/components/input-time/index.ts
 delete mode 100644 projects/demo/src/modules/components/input-time/input-time.component.ts
 delete mode 100644 projects/demo/src/modules/components/input-time/input-time.module.ts
 delete mode 100644 projects/demo/src/modules/components/input-year/examples/import/declare-form.md
 rename projects/demo/src/modules/components/input-year/examples/import/{import-module.md => import.md} (60%)
 rename projects/demo/src/modules/components/input-year/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/input-year/{input-year.template.html => index.html} (75%)
 rename projects/demo/src/modules/components/input-year/{input-year.component.ts => index.ts} (51%)
 delete mode 100644 projects/demo/src/modules/components/input-year/input-year.module.ts
 rename projects/demo/src/modules/components/items-with-more/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/items-with-more/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/items-with-more/{items-with-more.template.html => index.html} (90%)
 create mode 100644 projects/demo/src/modules/components/items-with-more/index.ts
 delete mode 100644 projects/demo/src/modules/components/items-with-more/items-with-more.component.ts
 delete mode 100644 projects/demo/src/modules/components/items-with-more/items-with-more.module.ts
 rename projects/demo/src/modules/components/line-clamp/examples/import/{import-module.md => import.md} (100%)
 rename projects/demo/src/modules/components/line-clamp/examples/import/{insert-template.md => template.md} (100%)
 rename projects/demo/src/modules/components/line-clamp/{line-clamp.template.html => index.html} (83%)
 rename projects/demo/src/modules/components/line-clamp/{line-clamp.style.less => index.less} (100%)
 create mode 100644 projects/demo/src/modules/components/line-clamp/index.ts
 delete mode 100644 projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
 delete mode 100644 projects/demo/src/modules/components/line-clamp/line-clamp.module.ts

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 21038bbd4387..dc87442b08d6 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -401,79 +401,57 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.InputDateTime,
-        loadChildren: async () =>
-            (await import('../components/input-date-time/input-date-time.module'))
-                .ExampleTuiInputDateTimeModule,
+        loadComponent: async () => import('../components/input-date-time'),
         title: 'InputDateTime',
     }),
     route({
         path: DemoRoute.InputMonth,
-        loadChildren: async () =>
-            (await import('../components/input-month/input-month.module'))
-                .ExampleInputMonthModule,
+        loadComponent: async () => import('../components/input-month'),
         title: 'InputMonth',
     }),
     route({
         path: DemoRoute.InputMonthRange,
-        loadChildren: async () =>
-            (await import('../components/input-month-range/input-month-range.module'))
-                .ExampleTuiInputMonthRangeModule,
+        loadComponent: async () => import('../components/input-month-range'),
         title: 'InputMonthRange',
     }),
     route({
         path: DemoRoute.InputNumber,
-        loadChildren: async () =>
-            (await import('../components/input-number/input-number.module'))
-                .ExampleTuiInputNumberModule,
+        loadComponent: async () => import('../components/input-number'),
         title: 'InputNumber',
     }),
     route({
         path: DemoRoute.InputPassword,
-        loadChildren: async () =>
-            (await import('../components/input-password/input-password.module'))
-                .ExampleTuiInputPasswordModule,
+        loadComponent: async () => import('../components/input-password'),
         title: 'InputPassword',
     }),
     route({
         path: DemoRoute.InputPhone,
-        loadChildren: async () =>
-            (await import('../components/input-phone/input-phone.module'))
-                .ExampleTuiInputPhoneModule,
+        loadComponent: async () => import('../components/input-phone'),
         title: 'InputPhone',
     }),
     route({
         path: DemoRoute.InputRange,
-        loadChildren: async () =>
-            (await import('../components/input-range/input-range.module'))
-                .ExampleTuiInputRangeModule,
+        loadComponent: async () => import('../components/input-range'),
         title: 'InputRange',
     }),
     route({
         path: DemoRoute.InputDateRange,
-        loadChildren: async () =>
-            (await import('../components/input-date-range/input-date-range.module'))
-                .ExampleTuiInputDateRangeModule,
+        loadComponent: async () => import('../components/input-date-range'),
         title: 'InputDateRange',
     }),
     route({
         path: DemoRoute.InputSlider,
-        loadChildren: async () =>
-            (await import('../components/input-slider/input-slider.module'))
-                .ExampleTuiInputSliderModule,
+        loadComponent: async () => import('../components/input-slider'),
         title: 'InputSlider',
     }),
     route({
         path: DemoRoute.InputTag,
-        loadChildren: async () =>
-            (await import('../components/input-tag/input-tag.module'))
-                .ExampleTuiInputTagModule,
+        loadComponent: async () => import('../components/input-tag'),
         title: 'InputTag',
     }),
     route({
         path: DemoRoute.InputTime,
-        loadChildren: async () =>
-            (await import('../components/input-time/input-time.module'))
-                .ExampleTuiInputTimeModule,
+        loadComponent: async () => import('../components/input-time'),
         title: 'InputTime',
     }),
     route({
@@ -483,9 +461,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.InputYear,
-        loadChildren: async () =>
-            (await import('../components/input-year/input-year.module'))
-                .ExampleInputYearModule,
+        loadComponent: async () => import('../components/input-year'),
         title: 'InputYear',
     }),
     route({
@@ -495,16 +471,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.ItemsWithMore,
-        loadChildren: async () =>
-            (await import('../components/items-with-more/items-with-more.module'))
-                .ExampleTuiItemsWithMoreModule,
+        loadComponent: async () => import('../components/items-with-more'),
         title: 'ItemsWithMore',
     }),
     route({
         path: DemoRoute.LineClamp,
-        loadChildren: async () =>
-            (await import('../components/line-clamp/line-clamp.module'))
-                .ExampleTuiLineClampModule,
+        loadComponent: async () => import('../components/line-clamp'),
         title: 'LineClamp',
     }),
     route({
diff --git a/projects/demo/src/modules/components/input-date-range/examples/1/index.ts b/projects/demo/src/modules/components/input-date-range/examples/1/index.ts
index 9ad3719a4a54..cdea6170c23a 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/1/index.ts
@@ -1,16 +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 {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {TuiUnfinishedValidatorDirective} from '@taiga-ui/kit';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-range-example-1',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputDateRangeModule,
+        TuiUnfinishedValidatorDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateRangeExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(
             new TuiDayRange(new TuiDay(2018, 2, 10), new TuiDay(2018, 3, 20)),
diff --git a/projects/demo/src/modules/components/input-date-range/examples/2/index.ts b/projects/demo/src/modules/components/input-date-range/examples/2/index.ts
index ab466c5f14af..275536e90333 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/2/index.ts
@@ -1,16 +1,18 @@
 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 {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-range-example-2',
+    standalone: true,
+    imports: [TuiInputDateRangeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateRangeExample2 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(
         new TuiDayRange(new TuiDay(2018, 2, 10), new TuiDay(2018, 3, 20)),
     );
diff --git a/projects/demo/src/modules/components/input-date-range/examples/3/index.ts b/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
index b1e368dfbf3a..ae7aa0cca422 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
@@ -1,18 +1,20 @@
 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 {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
 import {tuiDateFormatProvider} from '@taiga-ui/core';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-range-example-3',
+    standalone: true,
+    imports: [TuiInputDateRangeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
-export class TuiInputDateRangeExample3 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(
         new TuiDayRange(new TuiDay(2018, 2, 10), new TuiDay(2018, 3, 20)),
     );
diff --git a/projects/demo/src/modules/components/input-date-range/examples/4/index.ts b/projects/demo/src/modules/components/input-date-range/examples/4/index.ts
index a4353204b41f..7d15bc980133 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/4/index.ts
@@ -1,19 +1,66 @@
-import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {Component, Injectable} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay, TuiDayRange, TuiValueTransformer} from '@taiga-ui/cdk';
 import {
     TUI_DATE_RANGE_VALUE_TRANSFORMER,
     TUI_DATE_VALUE_TRANSFORMER,
 } from '@taiga-ui/kit';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
-import {
-    ExampleDateTransformer,
-    getExampleDateRangeTransformer,
-} from './value-transformers';
+class ExampleDateRangeTransformer extends TuiValueTransformer<
+    TuiDayRange | null,
+    [Date, Date] | null
+> {
+    constructor(
+        private readonly dateTransformer: TuiValueTransformer<TuiDay | null, Date | null>,
+    ) {
+        super();
+    }
+
+    public fromControlValue(controlValue: [Date, Date] | null): TuiDayRange | null {
+        const [transformedFrom, transformedTo] = controlValue || [null, null];
+        const from =
+            transformedFrom && this.dateTransformer.fromControlValue(transformedFrom);
+        const to = transformedTo && this.dateTransformer.fromControlValue(transformedTo);
+
+        return from && to && new TuiDayRange(from, to);
+    }
+
+    public toControlValue(componentValue: TuiDayRange | null): [Date, Date] | null {
+        const from =
+            componentValue && this.dateTransformer.toControlValue(componentValue.from);
+        const to =
+            componentValue && this.dateTransformer.toControlValue(componentValue.to);
+
+        return from && to && [from, to];
+    }
+}
+
+@Injectable()
+export class ExampleDateTransformer extends TuiValueTransformer<
+    TuiDay | null,
+    Date | null
+> {
+    public fromControlValue(controlValue: Date | null): TuiDay | null {
+        return controlValue && TuiDay.fromLocalNativeDate(controlValue);
+    }
+
+    public toControlValue(componentValue: TuiDay | null): Date | null {
+        return componentValue?.toLocalNativeDate() || null;
+    }
+}
+
+export function getExampleDateRangeTransformer(
+    dateTransformer: ExampleDateTransformer | null,
+): TuiValueTransformer<TuiDayRange | null, [Date, Date] | null> | null {
+    return dateTransformer && new ExampleDateRangeTransformer(dateTransformer);
+}
 
 @Component({
-    selector: 'tui-input-date-range-example-4',
+    standalone: true,
+    imports: [TuiInputDateRangeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -29,7 +76,7 @@ import {
         },
     ],
 })
-export class TuiInputDateRangeExample4 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([
         new Date(2018, 2, 10),
         new Date(2018, 3, 20),
diff --git a/projects/demo/src/modules/components/input-date-range/examples/4/value-transformers.ts b/projects/demo/src/modules/components/input-date-range/examples/4/value-transformers.ts
deleted file mode 100644
index c5845f7ecdc1..000000000000
--- a/projects/demo/src/modules/components/input-date-range/examples/4/value-transformers.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Injectable} from '@angular/core';
-import {TuiDay, TuiDayRange, TuiValueTransformer} from '@taiga-ui/cdk';
-
-class ExampleDateRangeTransformer extends TuiValueTransformer<
-    TuiDayRange | null,
-    [Date, Date] | null
-> {
-    constructor(
-        private readonly dateTransformer: TuiValueTransformer<TuiDay | null, Date | null>,
-    ) {
-        super();
-    }
-
-    public fromControlValue(controlValue: [Date, Date] | null): TuiDayRange | null {
-        const [transformedFrom, transformedTo] = controlValue || [null, null];
-        const from =
-            transformedFrom && this.dateTransformer.fromControlValue(transformedFrom);
-        const to = transformedTo && this.dateTransformer.fromControlValue(transformedTo);
-
-        return from && to && new TuiDayRange(from, to);
-    }
-
-    public toControlValue(componentValue: TuiDayRange | null): [Date, Date] | null {
-        const from =
-            componentValue && this.dateTransformer.toControlValue(componentValue.from);
-        const to =
-            componentValue && this.dateTransformer.toControlValue(componentValue.to);
-
-        return from && to && [from, to];
-    }
-}
-
-@Injectable()
-export class ExampleDateTransformer extends TuiValueTransformer<
-    TuiDay | null,
-    Date | null
-> {
-    public fromControlValue(controlValue: Date | null): TuiDay | null {
-        return controlValue && TuiDay.fromLocalNativeDate(controlValue);
-    }
-
-    public toControlValue(componentValue: TuiDay | null): Date | null {
-        return componentValue?.toLocalNativeDate() || null;
-    }
-}
-
-export function getExampleDateRangeTransformer(
-    dateTransformer: ExampleDateTransformer | null,
-): TuiValueTransformer<TuiDayRange | null, [Date, Date] | null> | null {
-    return dateTransformer && new ExampleDateRangeTransformer(dateTransformer);
-}
diff --git a/projects/demo/src/modules/components/input-date-range/examples/5/index.ts b/projects/demo/src/modules/components/input-date-range/examples/5/index.ts
index b19219e42452..2987060749f6 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/5/index.ts
@@ -1,20 +1,22 @@
 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 {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
 import {TuiDayRangePeriod} from '@taiga-ui/kit';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
 const today = TuiDay.currentLocal();
 const yesterday = today.append({day: -1});
 
 @Component({
-    selector: 'tui-input-date-range-example-5',
+    standalone: true,
+    imports: [TuiInputDateRangeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateRangeExample5 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(new TuiDayRange(today, today));
 
     protected readonly items = [
diff --git a/projects/demo/src/modules/components/input-date-range/examples/import/declare-form.md b/projects/demo/src/modules/components/input-date-range/examples/import/declare-form.md
deleted file mode 100644
index 0e736be06367..000000000000
--- a/projects/demo/src/modules/components/input-date-range/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-date-range/examples/import/import-module.md b/projects/demo/src/modules/components/input-date-range/examples/import/import.md
similarity index 74%
rename from projects/demo/src/modules/components/input-date-range/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-date-range/examples/import/import.md
index b63d2f391d15..332fe6c91ac2 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-date-range/examples/import/import.md
@@ -14,5 +14,9 @@ import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-date-range/examples/import/insert-template.md b/projects/demo/src/modules/components/input-date-range/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-date-range/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-date-range/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html b/projects/demo/src/modules/components/input-date-range/index.html
similarity index 80%
rename from projects/demo/src/modules/components/input-date-range/input-date-range.template.html
rename to projects/demo/src/modules/components/input-date-range/index.html
index 76588e6dba80..0dcbfe6597bb 100644
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
+++ b/projects/demo/src/modules/components/input-date-range/index.html
@@ -76,7 +76,8 @@ <h3>DI-tokens for input-configurations:</h3>
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -85,40 +86,35 @@ <h3>DI-tokens for input-configurations:</h3>
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-date-range-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="large"
             heading="Big size"
-            [content]="example2"
-        >
-            <tui-input-date-range-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="date-localization"
             heading="Date localization"
-            [content]="example3"
-        >
-            <tui-input-date-range-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="native-date-output"
             heading="With native Date output"
-            [content]="example4"
-        >
-            <tui-input-date-range-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="custom-period"
             heading="Custom period"
-            [content]="example5"
-        >
-            <tui-input-date-range-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -252,59 +248,5 @@ <h3>DI-tokens for input-configurations:</h3>
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <p>
-            If you want to use
-            <a
-                routerLink="/components/mobile-calendar"
-                tuiLink
-            >
-                MobileCalendar
-            </a>
-            with your controls add
-            <code>tuiProvideMobileCalendar()</code>
-            to the providers
-        </p>
-
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputDateRangeModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                Use
-                <code>TuiInputDateRange</code>
-                in template:
-
-                <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/components/input-date-range/input-date-range.component.ts b/projects/demo/src/modules/components/input-date-range/index.ts
similarity index 62%
rename from projects/demo/src/modules/components/input-date-range/input-date-range.component.ts
rename to projects/demo/src/modules/components/input-date-range/index.ts
index b138ab4a3e77..64d65a3aa6ca 100644
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.component.ts
+++ b/projects/demo/src/modules/components/input-date-range/index.ts
@@ -1,7 +1,12 @@
 import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
+import {
+    TuiMobileCalendarComponent,
+    tuiProvideMobileCalendar,
+} from '@taiga-ui/addon-mobile';
 import type {TuiBooleanHandler, TuiDayLike, TuiDayRange} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -12,22 +17,45 @@ import {
     tuiProvide,
 } from '@taiga-ui/cdk';
 import type {TuiMarkerHandler} from '@taiga-ui/core';
+import {
+    TuiHintOptionsDirective,
+    TuiLinkDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import type {TuiDayRangePeriod} from '@taiga-ui/kit';
 import {tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
+import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
 const ONE_DOT: [string] = ['var(--tui-success-fill)'];
 
 @Component({
-    selector: 'example-tui-input-date-range',
-    templateUrl: './input-date-range.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        InheritedDocumentationComponent,
+        RouterLink,
+        TuiLinkDirective,
+        TuiNotificationComponent,
+        TuiInputDateRangeModule,
+        ReactiveFormsModule,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        TuiMobileCalendarComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputDateRangeComponent)],
+    providers: [
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
+        tuiProvideMobileCalendar(),
+    ],
 })
-export class ExampleTuiInputDateRangeComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public override cleaner = false;
     public control = new FormControl<TuiDayRange | null>(null, Validators.required);
 
@@ -39,36 +67,6 @@ export class ExampleTuiInputDateRangeComponent extends AbstractExampleTuiControl
 
     public override maxLength: TuiDayLike | null = null;
 
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleForm = import('./examples/import/declare-form.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'),
-        'value-transformers.ts': import('./examples/4/value-transformers.ts?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-    };
-
     protected readonly dayVariants = [
         TUI_FIRST_DAY,
         new TuiDay(2021, 2, 5),
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.module.ts b/projects/demo/src/modules/components/input-date-range/input-date-range.module.ts
deleted file mode 100644
index 4b7df5f582ef..000000000000
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.module.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {tuiProvideMobileCalendar} from '@taiga-ui/addon-mobile';
-import {
-    TuiButtonDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiUnfinishedValidatorDirective} from '@taiga-ui/kit';
-import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputDateRangeExample1} from './examples/1';
-import {TuiInputDateRangeExample2} from './examples/2';
-import {TuiInputDateRangeExample3} from './examples/3';
-import {TuiInputDateRangeExample4} from './examples/4';
-import {TuiInputDateRangeExample5} from './examples/5';
-import {ExampleTuiInputDateRangeComponent} from './input-date-range.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiInputDateRangeModule,
-        ReactiveFormsModule,
-        InheritedDocumentationComponent,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiNotificationComponent,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputDateRangeComponent)),
-        TuiUnfinishedValidatorDirective,
-    ],
-    declarations: [
-        ExampleTuiInputDateRangeComponent,
-        TuiInputDateRangeExample1,
-        TuiInputDateRangeExample2,
-        TuiInputDateRangeExample3,
-        TuiInputDateRangeExample4,
-        TuiInputDateRangeExample5,
-    ],
-    providers: [tuiProvideMobileCalendar()],
-    exports: [ExampleTuiInputDateRangeComponent],
-})
-export class ExampleTuiInputDateRangeModule {}
diff --git a/projects/demo/src/modules/components/input-date-time/examples/1/index.ts b/projects/demo/src/modules/components/input-date-time/examples/1/index.ts
index cdd5d19526b3..3fec84ab8089 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/1/index.ts
@@ -1,16 +1,19 @@
+import {JsonPipe} from '@angular/common';
 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 {TuiDay} from '@taiga-ui/cdk';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-time-example-1',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputDateTimeModule, JsonPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateTimeExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl([new TuiDay(2017, 2, 15), null]),
     });
diff --git a/projects/demo/src/modules/components/input-date-time/examples/2/index.ts b/projects/demo/src/modules/components/input-date-time/examples/2/index.ts
index f6b0e136b3e8..3fec84ab8089 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/2/index.ts
@@ -1,16 +1,19 @@
+import {JsonPipe} from '@angular/common';
 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 {TuiDay} from '@taiga-ui/cdk';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-time-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputDateTimeModule, JsonPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateTimeExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl([new TuiDay(2017, 2, 15), null]),
     });
diff --git a/projects/demo/src/modules/components/input-date-time/examples/3/index.ts b/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
index 2580b5648912..e278aae35f20 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
@@ -1,18 +1,20 @@
 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 {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {tuiDateFormatProvider} from '@taiga-ui/core';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-time-example-3',
+    standalone: true,
+    imports: [TuiInputDateTimeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
-export class TuiInputDateTimeExample3 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([
         new TuiDay(2017, 2, 15),
         new TuiTime(12, 30),
diff --git a/projects/demo/src/modules/components/input-date-time/examples/4/index.ts b/projects/demo/src/modules/components/input-date-time/examples/4/index.ts
index 90d995232979..7fdc33ad689d 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/4/index.ts
@@ -1,13 +1,36 @@
-import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {Component, Injectable} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay, TuiTime, TuiValueTransformer} from '@taiga-ui/cdk';
 import {TUI_DATE_TIME_VALUE_TRANSFORMER} from '@taiga-ui/kit';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
 
-import {ExampleDateTimeTransformer} from './value-transformer';
+@Injectable()
+class ExampleDateTimeTransformer extends TuiValueTransformer<
+    [TuiDay | null, TuiTime | null],
+    string
+> {
+    private readonly separator = ', ';
+
+    public fromControlValue(controlValue: string): [TuiDay | null, TuiTime | null] {
+        const [day, time = ''] = controlValue.split(this.separator);
+
+        return day
+            ? [TuiDay.normalizeParse(day), time ? TuiTime.fromString(time) : null]
+            : [null, null];
+    }
+
+    public toControlValue([day, time]: [TuiDay | null, TuiTime | null]): string {
+        return day
+            ? day.toString() + (time ? `${this.separator}${time.toString()}` : '')
+            : '';
+    }
+}
 
 @Component({
-    selector: 'tui-input-date-time-example-4',
+    standalone: true,
+    imports: [TuiInputDateTimeModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -18,6 +41,6 @@ import {ExampleDateTimeTransformer} from './value-transformer';
         },
     ],
 })
-export class TuiInputDateTimeExample4 {
+export default class ExampleComponent {
     protected readonly control = new FormControl('19.01.2022, 12:33');
 }
diff --git a/projects/demo/src/modules/components/input-date-time/examples/4/value-transformer.ts b/projects/demo/src/modules/components/input-date-time/examples/4/value-transformer.ts
deleted file mode 100644
index c5f49694a3ff..000000000000
--- a/projects/demo/src/modules/components/input-date-time/examples/4/value-transformer.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Injectable} from '@angular/core';
-import {TuiDay, TuiTime, TuiValueTransformer} from '@taiga-ui/cdk';
-
-@Injectable()
-export class ExampleDateTimeTransformer extends TuiValueTransformer<
-    [TuiDay | null, TuiTime | null],
-    string
-> {
-    private readonly separator = ', ';
-
-    public fromControlValue(controlValue: string): [TuiDay | null, TuiTime | null] {
-        const [day, time = ''] = controlValue.split(this.separator);
-
-        return day
-            ? [TuiDay.normalizeParse(day), time ? TuiTime.fromString(time) : null]
-            : [null, null];
-    }
-
-    public toControlValue([day, time]: [TuiDay | null, TuiTime | null]): string {
-        return day
-            ? day.toString() + (time ? `${this.separator}${time.toString()}` : '')
-            : '';
-    }
-}
diff --git a/projects/demo/src/modules/components/input-date-time/examples/5/index.ts b/projects/demo/src/modules/components/input-date-time/examples/5/index.ts
index a3099b41e344..62f42088faee 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/5/index.ts
@@ -1,18 +1,21 @@
 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 {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {tuiInputDateOptionsProvider} from '@taiga-ui/kit';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-date-time-example-5',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputDateTimeModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiInputDateOptionsProvider({nativePicker: true})],
 })
-export class TuiInputDateTimeExample5 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl([new TuiDay(2017, 2, 15), new TuiTime(12, 30)]),
     });
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md b/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
deleted file mode 100644
index 0e736be06367..000000000000
--- a/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/import-module.md b/projects/demo/src/modules/components/input-date-time/examples/import/import.md
similarity index 74%
rename from projects/demo/src/modules/components/input-date-time/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-date-time/examples/import/import.md
index a39c32240e0f..c87159e4a837 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-date-time/examples/import/import.md
@@ -14,5 +14,9 @@ import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.md b/projects/demo/src/modules/components/input-date-time/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-date-time/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-date-time/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/index.html
similarity index 80%
rename from projects/demo/src/modules/components/input-date-time/input-date-time.template.html
rename to projects/demo/src/modules/components/input-date-time/index.html
index 2e637804a5ad..55966eade51a 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/index.html
@@ -56,7 +56,8 @@ <h3>DI-tokens for input-configurations:</h3>
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -65,42 +66,38 @@ <h3>DI-tokens for input-configurations:</h3>
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-date-time-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="modes"
             heading="Modes"
-            [content]="example2"
-        >
-            <tui-input-date-time-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="date-localization"
             heading="Date localization"
-            [content]="example3"
-        >
-            <tui-input-date-time-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="string-control-output"
             heading="With control's output as string"
-            [content]="example4"
-        >
-            <tui-input-date-time-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="native"
             heading="Native input datetime"
-            [content]="example5"
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-5">
                 Please note that native input datetime only supports HH:MM time mode
             </tui-notification>
-            <tui-input-date-time-example-5 />
         </tui-doc-example>
     </ng-template>
 
@@ -206,44 +203,5 @@ <h3>DI-tokens for input-configurations:</h3>
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputDateTimeModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                Use in template:
-
-                <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/components/input-date-time/input-date-time.component.ts b/projects/demo/src/modules/components/input-date-time/index.ts
similarity index 58%
rename from projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
rename to projects/demo/src/modules/components/input-date-time/index.ts
index 7becff47d594..bece84004b54 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
+++ b/projects/demo/src/modules/components/input-date-time/index.ts
@@ -1,7 +1,8 @@
 import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import type {TuiBooleanHandler, TuiTimeMode} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -12,18 +13,38 @@ import {
     tuiProvide,
     TuiTime,
 } from '@taiga-ui/cdk';
-import {TuiNamedDay} from '@taiga-ui/legacy';
+import {
+    TuiDropdownOpenDirective,
+    TuiHintOptionsDirective,
+    TuiLinkDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputDateTimeModule, TuiNamedDay} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 @Component({
-    selector: 'example-tui-input-date-time',
-    templateUrl: './input-date-time.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiLinkDirective,
+        RouterLink,
+        TuiNotificationComponent,
+        TuiInputDateTimeModule,
+        ReactiveFormsModule,
+        TuiDropdownOpenDirective,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputDateTimeComponent)],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export class ExampleTuiInputDateTimeComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     private readonly today = TuiDay.currentLocal();
 
     public override cleaner = false;
@@ -33,36 +54,6 @@ export class ExampleTuiInputDateTimeComponent extends AbstractExampleTuiControl
         Validators.required,
     );
 
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-    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'),
-        'value-transformer.ts': import('./examples/4/value-transformer.ts?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-    };
-
     protected readonly minVariants: ReadonlyArray<TuiDay | [TuiDay, TuiTime]> = [
         TUI_FIRST_DAY,
         new TuiDay(2017, 2, 5),
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts b/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
deleted file mode 100644
index bb4bb0231838..000000000000
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiDropdownModule,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputDateTimeExample1} from './examples/1';
-import {TuiInputDateTimeExample2} from './examples/2';
-import {TuiInputDateTimeExample3} from './examples/3';
-import {TuiInputDateTimeExample4} from './examples/4';
-import {TuiInputDateTimeExample5} from './examples/5';
-import {ExampleTuiInputDateTimeComponent} from './input-date-time.component';
-
-@NgModule({
-    imports: [
-        TuiAddonDoc,
-        InheritedDocumentationComponent,
-        ReactiveFormsModule,
-        FormsModule,
-        CommonModule,
-        TuiLinkDirective,
-        TuiInputDateTimeModule,
-        TuiHint,
-        TuiTextfieldControllerModule,
-        TuiNotificationComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputDateTimeComponent)),
-        TuiDropdownModule,
-    ],
-    declarations: [
-        ExampleTuiInputDateTimeComponent,
-        TuiInputDateTimeExample1,
-        TuiInputDateTimeExample2,
-        TuiInputDateTimeExample3,
-        TuiInputDateTimeExample4,
-        TuiInputDateTimeExample5,
-    ],
-    exports: [ExampleTuiInputDateTimeComponent],
-})
-export class ExampleTuiInputDateTimeModule {}
diff --git a/projects/demo/src/modules/components/input-month-range/examples/1/index.ts b/projects/demo/src/modules/components/input-month-range/examples/1/index.ts
index 484e378a6cdc..3e1a1bb0f43d 100644
--- a/projects/demo/src/modules/components/input-month-range/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-month-range/examples/1/index.ts
@@ -1,15 +1,22 @@
 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 {TuiMonthRange} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-month-range-example-1',
+    standalone: true,
+    imports: [
+        TuiInputMonthRangeModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputMonthRangeExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiMonthRange | null>(null);
 }
diff --git a/projects/demo/src/modules/components/input-month-range/examples/2/index.ts b/projects/demo/src/modules/components/input-month-range/examples/2/index.ts
index b241c0e654c9..a696f6022fcf 100644
--- a/projects/demo/src/modules/components/input-month-range/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-month-range/examples/2/index.ts
@@ -1,16 +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 type {TuiMonthRange} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-month-range-example-2',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputMonthRangeModule,
+        TuiTextfieldControllerModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputMonthRangeExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiMonthRange | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-month-range/examples/3/index.ts b/projects/demo/src/modules/components/input-month-range/examples/3/index.ts
index 4ad4d1462e84..4b37581fb4e2 100644
--- a/projects/demo/src/modules/components/input-month-range/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-month-range/examples/3/index.ts
@@ -1,16 +1,18 @@
 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 type {TuiMonthRange} from '@taiga-ui/cdk';
+import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-month-range-example-3',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputMonthRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputMonthRangeExample3 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiMonthRange | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-month-range/examples/import/declare-form.md b/projects/demo/src/modules/components/input-month-range/examples/import/declare-form.md
deleted file mode 100644
index a00b9294ee45..000000000000
--- a/projects/demo/src/modules/components/input-month-range/examples/import/declare-form.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  readonly testForm = new FormGroup({
-    testValue: new FormControl(null),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-month-range/examples/import/import-module.md b/projects/demo/src/modules/components/input-month-range/examples/import/import.md
similarity index 71%
rename from projects/demo/src/modules/components/input-month-range/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-month-range/examples/import/import.md
index e90528662d16..0f51c0df911b 100644
--- a/projects/demo/src/modules/components/input-month-range/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-month-range/examples/import/import.md
@@ -12,5 +12,9 @@ import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  readonly testForm = new FormGroup({
+    testValue: new FormControl(null),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-month-range/examples/import/insert-template.md b/projects/demo/src/modules/components/input-month-range/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-month-range/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-month-range/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html b/projects/demo/src/modules/components/input-month-range/index.html
similarity index 75%
rename from projects/demo/src/modules/components/input-month-range/input-month-range.template.html
rename to projects/demo/src/modules/components/input-month-range/index.html
index 24e5c29ff2b4..aa364a75e756 100644
--- a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
+++ b/projects/demo/src/modules/components/input-month-range/index.html
@@ -9,7 +9,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -18,24 +19,21 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-month-range-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example2"
-        >
-            <tui-input-month-range-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="context"
             heading="limit"
-            [content]="example3"
-        >
-            <tui-input-month-range-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -137,46 +135,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputMonthRangeModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                Use
-                <code>TuiInputMonthComponent</code>
-                in template:
-
-                <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/components/input-month-range/input-month-range.component.ts b/projects/demo/src/modules/components/input-month-range/index.ts
similarity index 53%
rename from projects/demo/src/modules/components/input-month-range/input-month-range.component.ts
rename to projects/demo/src/modules/components/input-month-range/index.ts
index a13ea47a7ee8..7dece71fd05d 100644
--- a/projects/demo/src/modules/components/input-month-range/input-month-range.component.ts
+++ b/projects/demo/src/modules/components/input-month-range/index.ts
@@ -1,7 +1,7 @@
 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 type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import type {TuiBooleanHandler, TuiMonthRange} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -11,41 +11,38 @@ import {
     TuiMonth,
     tuiProvide,
 } from '@taiga-ui/cdk';
+import {
+    TuiHintOptionsDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 @Component({
-    selector: 'example-tui-input-month-range',
-    templateUrl: './input-month-range.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputMonthRangeModule,
+        ReactiveFormsModule,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputMonthRangeComponent)],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export class ExampleTuiInputMonthRangeComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public override cleaner = false;
     public override maxLength = 0;
 
     public control = new FormControl<TuiMonthRange | null>(null, Validators.required);
 
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-    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 minVariants = [
         TUI_FIRST_DAY,
         new TuiMonth(2019, 2),
diff --git a/projects/demo/src/modules/components/input-month-range/input-month-range.module.ts b/projects/demo/src/modules/components/input-month-range/input-month-range.module.ts
deleted file mode 100644
index eb41eae5dd41..000000000000
--- a/projects/demo/src/modules/components/input-month-range/input-month-range.module.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputMonthRangeExample1} from './examples/1';
-import {TuiInputMonthRangeExample2} from './examples/2';
-import {TuiInputMonthRangeExample3} from './examples/3';
-import {ExampleTuiInputMonthRangeComponent} from './input-month-range.component';
-
-@NgModule({
-    imports: [
-        TuiAddonDoc,
-        InheritedDocumentationComponent,
-        ReactiveFormsModule,
-        FormsModule,
-        CommonModule,
-        TuiLinkDirective,
-        TuiButtonDirective,
-        TuiInputMonthRangeModule,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiNotificationComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputMonthRangeComponent)),
-    ],
-    declarations: [
-        ExampleTuiInputMonthRangeComponent,
-        TuiInputMonthRangeExample1,
-        TuiInputMonthRangeExample2,
-        TuiInputMonthRangeExample3,
-    ],
-    exports: [ExampleTuiInputMonthRangeComponent],
-})
-export class ExampleTuiInputMonthRangeModule {}
diff --git a/projects/demo/src/modules/components/input-month/examples/1/index.ts b/projects/demo/src/modules/components/input-month/examples/1/index.ts
index a15bbe41bb9d..bfbc85340b1f 100644
--- a/projects/demo/src/modules/components/input-month/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-month/examples/1/index.ts
@@ -1,15 +1,18 @@
 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 {TuiMonth} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputMonthModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'input-month-example-1',
+    standalone: true,
+    imports: [TuiInputMonthModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class InputMonthExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiMonth | null>(null);
 }
diff --git a/projects/demo/src/modules/components/input-month/examples/2/index.ts b/projects/demo/src/modules/components/input-month/examples/2/index.ts
index a48f659f1267..f9af6be9fae4 100644
--- a/projects/demo/src/modules/components/input-month/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-month/examples/2/index.ts
@@ -1,16 +1,19 @@
 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 type {TuiMonth} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputMonthModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'input-month-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputMonthModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class InputMonthExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiMonth | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-month/examples/3/index.ts b/projects/demo/src/modules/components/input-month/examples/3/index.ts
index 3a64d7dfb9b4..60e7740a8ef9 100644
--- a/projects/demo/src/modules/components/input-month/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-month/examples/3/index.ts
@@ -1,18 +1,21 @@
 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 {TuiMonth} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {tuiInputDateOptionsProvider} from '@taiga-ui/kit';
+import {TuiInputMonthModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'input-month-example-3',
+    standalone: true,
+    imports: [TuiInputMonthModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiInputDateOptionsProvider({nativePicker: true})],
 })
-export class InputMonthExample3 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<TuiMonth | null>(null);
     protected readonly min = TuiMonth.currentLocal().append({month: -12});
     protected readonly max = TuiMonth.currentLocal().append({month: 12});
diff --git a/projects/demo/src/modules/components/input-month/examples/import/declare-form.md b/projects/demo/src/modules/components/input-month/examples/import/declare-form.md
deleted file mode 100644
index 8a040b886834..000000000000
--- a/projects/demo/src/modules/components/input-month/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  readonly testForm = new FormGroup({
-    testValue: new FormControl(null),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-month/examples/import/import-module.md b/projects/demo/src/modules/components/input-month/examples/import/import.md
similarity index 60%
rename from projects/demo/src/modules/components/input-month/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-month/examples/import/import.md
index d016a98518d3..01c267d7e5a0 100644
--- a/projects/demo/src/modules/components/input-month/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-month/examples/import/import.md
@@ -11,5 +11,9 @@ import {TuiInputMonthModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  readonly testForm = new FormGroup({
+    testValue: new FormControl(null),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-month/examples/import/insert-template.md b/projects/demo/src/modules/components/input-month/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-month/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-month/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-month/input-month.template.html b/projects/demo/src/modules/components/input-month/index.html
similarity index 71%
rename from projects/demo/src/modules/components/input-month/input-month.template.html
rename to projects/demo/src/modules/components/input-month/index.html
index 51859bab96cf..b182837ecf13 100644
--- a/projects/demo/src/modules/components/input-month/input-month.template.html
+++ b/projects/demo/src/modules/components/input-month/index.html
@@ -9,7 +9,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -18,24 +19,21 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <input-month-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example2"
-        >
-            <input-month-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="native"
             heading="Native picker"
-            [content]="example3"
-        >
-            <input-month-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -116,48 +114,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>InputMonthModule</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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li class="tui-list__item">
-                <p>
-                    Insert a
-                    <code>TuiInoutMonthComponent</code>
-                    in 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/components/input-month/input-month.component.ts b/projects/demo/src/modules/components/input-month/index.ts
similarity index 52%
rename from projects/demo/src/modules/components/input-month/input-month.component.ts
rename to projects/demo/src/modules/components/input-month/index.ts
index cb95b5e2cae6..a3651eb73a1d 100644
--- a/projects/demo/src/modules/components/input-month/input-month.component.ts
+++ b/projects/demo/src/modules/components/input-month/index.ts
@@ -1,7 +1,7 @@
 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 type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
@@ -11,40 +11,32 @@ import {
     TuiMonth,
     tuiProvide,
 } from '@taiga-ui/cdk';
+import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputMonthModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 @Component({
-    selector: 'example-input-month',
-    templateUrl: './input-month.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputMonthModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleInputMonthComponent)],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export class ExampleInputMonthComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public override cleaner = false;
 
     public control = new FormControl<TuiMonth | null>(null, Validators.required);
 
-    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 exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-
     protected readonly minVariants = [
         TUI_FIRST_DAY,
         new TuiMonth(2019, 2),
diff --git a/projects/demo/src/modules/components/input-month/input-month.module.ts b/projects/demo/src/modules/components/input-month/input-month.module.ts
deleted file mode 100644
index 6bbdd66d10f5..000000000000
--- a/projects/demo/src/modules/components/input-month/input-month.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {TuiInputMonthModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {InputMonthExample1} from './examples/1';
-import {InputMonthExample2} from './examples/2';
-import {InputMonthExample3} from './examples/3';
-import {ExampleInputMonthComponent} from './input-month.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        TuiAddonDoc,
-        InheritedDocumentationComponent,
-        TuiInputMonthModule,
-        TuiTextfieldControllerModule,
-        TuiNotificationComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleInputMonthComponent)),
-    ],
-    declarations: [
-        ExampleInputMonthComponent,
-        InputMonthExample1,
-        InputMonthExample2,
-        InputMonthExample3,
-    ],
-    exports: [ExampleInputMonthComponent],
-})
-export class ExampleInputMonthModule {}
diff --git a/projects/demo/src/modules/components/input-number/examples/1/index.ts b/projects/demo/src/modules/components/input-number/examples/1/index.ts
index 3963fd14f1da..5699999016b4 100644
--- a/projects/demo/src/modules/components/input-number/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/1/index.ts
@@ -1,15 +1,25 @@
 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 {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
+import {TuiHintOptionsDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-1',
+    standalone: true,
+    imports: [
+        TuiInputNumberModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        TuiHintOptionsDirective,
+        TuiCurrencyPipe,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputNumberExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(100);
 }
diff --git a/projects/demo/src/modules/components/input-number/examples/2/index.ts b/projects/demo/src/modules/components/input-number/examples/2/index.ts
index 33d9f43de76b..4dbff95c2856 100644
--- a/projects/demo/src/modules/components/input-number/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/2/index.ts
@@ -1,16 +1,19 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputNumberModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputNumberExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<number | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-number/examples/3/index.ts b/projects/demo/src/modules/components/input-number/examples/3/index.ts
index b49a8cf4a4ae..9c9b740b908a 100644
--- a/projects/demo/src/modules/components/input-number/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/3/index.ts
@@ -1,15 +1,18 @@
 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 {TuiNumberFormatDirective} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-3',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputNumberModule, TuiNumberFormatDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputNumberExample3 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(Math.PI),
     });
diff --git a/projects/demo/src/modules/components/input-number/examples/4/index.ts b/projects/demo/src/modules/components/input-number/examples/4/index.ts
index 902bed755abe..57591185c1b2 100644
--- a/projects/demo/src/modules/components/input-number/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/4/index.ts
@@ -1,16 +1,28 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiNumberFormatProvider} from '@taiga-ui/core';
+import {
+    TuiHintOptionsDirective,
+    tuiNumberFormatProvider,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-4',
+    standalone: true,
+    imports: [
+        TuiInputNumberModule,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
     providers: [tuiNumberFormatProvider({decimalSeparator: '.', thousandSeparator: ','})],
 })
-export class TuiInputNumberExample4 {
+export default class ExampleComponent {
     protected value = 1234.56;
 }
diff --git a/projects/demo/src/modules/components/input-number/examples/5/index.ts b/projects/demo/src/modules/components/input-number/examples/5/index.ts
index c6a52934c652..b03a6e43e66f 100644
--- a/projects/demo/src/modules/components/input-number/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/5/index.ts
@@ -1,15 +1,27 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiNumberFormatProvider} from '@taiga-ui/core';
+import {
+    TuiNumberFormatDirective,
+    tuiNumberFormatProvider,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-5',
+    standalone: true,
+    imports: [
+        TuiInputNumberModule,
+        TuiTextfieldControllerModule,
+        TuiNumberFormatDirective,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiNumberFormatProvider({decimalSeparator: ',', thousandSeparator: '.'})],
 })
-export class TuiInputNumberExample5 {
+export default class ExampleComponent {
     protected value = 123.56;
 }
diff --git a/projects/demo/src/modules/components/input-number/examples/6/index.ts b/projects/demo/src/modules/components/input-number/examples/6/index.ts
index 45b75389557b..4bf06cfebe50 100644
--- a/projects/demo/src/modules/components/input-number/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/6/index.ts
@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiNumberFormatProvider} from '@taiga-ui/core';
-import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
+import {TuiInputNumberModule, tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-number-example-6',
+    standalone: true,
+    imports: [TuiInputNumberModule, FormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -18,6 +20,6 @@ import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
         }),
     ],
 })
-export class TuiInputNumberExample6 {
+export default class ExampleComponent {
     protected value = 237;
 }
diff --git a/projects/demo/src/modules/components/input-number/examples/7/index.ts b/projects/demo/src/modules/components/input-number/examples/7/index.ts
index de6d8632732f..fb9db84514b7 100644
--- a/projects/demo/src/modules/components/input-number/examples/7/index.ts
+++ b/projects/demo/src/modules/components/input-number/examples/7/index.ts
@@ -1,14 +1,21 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_DEFAULT_NUMBER_FORMAT, TUI_NUMBER_FORMAT} from '@taiga-ui/core';
+import {
+    TUI_DEFAULT_NUMBER_FORMAT,
+    TUI_NUMBER_FORMAT,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import type {TuiLanguage} from '@taiga-ui/i18n';
 import {TUI_LANGUAGE} from '@taiga-ui/i18n';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 import type {BehaviorSubject, Observable} from 'rxjs';
 import {map, switchMap} from 'rxjs';
 
 @Component({
-    selector: 'tui-input-number-example-7',
+    standalone: true,
+    imports: [TuiInputNumberModule, TuiTextfieldControllerModule, FormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -28,6 +35,6 @@ import {map, switchMap} from 'rxjs';
         },
     ],
 })
-export class TuiInputNumberExample7 {
+export default class ExampleComponent {
     protected value = 1234.56;
 }
diff --git a/projects/demo/src/modules/components/input-number/examples/import/declare-form.md b/projects/demo/src/modules/components/input-number/examples/import/declare-form.md
deleted file mode 100644
index c29b9a84b0f1..000000000000
--- a/projects/demo/src/modules/components/input-number/examples/import/declare-form.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(5000),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-number/examples/import/import-module.md b/projects/demo/src/modules/components/input-number/examples/import/import.md
similarity index 70%
rename from projects/demo/src/modules/components/input-number/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-number/examples/import/import.md
index 8f6d766d79f7..254ed15e6b5b 100644
--- a/projects/demo/src/modules/components/input-number/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-number/examples/import/import.md
@@ -7,5 +7,9 @@ import {TuiInputNumberModule} from '@taiga-ui/legacy';
   imports: [FormsModule, ReactiveFormsModule, TuiInputNumberModule],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(5000),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-number/examples/import/insert-template.md b/projects/demo/src/modules/components/input-number/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-number/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-number/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-number/input-number.template.html b/projects/demo/src/modules/components/input-number/index.html
similarity index 80%
rename from projects/demo/src/modules/components/input-number/input-number.template.html
rename to projects/demo/src/modules/components/input-number/index.html
index ca8e63516033..dfd10a6f5db7 100644
--- a/projects/demo/src/modules/components/input-number/input-number.template.html
+++ b/projects/demo/src/modules/components/input-number/index.html
@@ -57,7 +57,8 @@ <h3>There are also other components to input numbers:</h3>
         <tui-doc-example
             id="currency"
             heading="Currency"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
             [description]="currencyPipeDescription"
         >
             <ng-template #currencyPipeDescription>
@@ -76,13 +77,13 @@ <h3>There are also other components to input numbers:</h3>
                     .
                 </p>
             </ng-template>
-            <tui-input-number-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example2"
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
             [description]="textFieldControllerDescription"
         >
             <ng-template #textFieldControllerDescription>
@@ -103,13 +104,13 @@ <h3>There are also other components to input numbers:</h3>
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-number-example-2 />
         </tui-doc-example>
 
         <tui-doc-example
             id="precision"
             heading="8 digits after comma"
-            [content]="example3"
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
             [description]="precisionDescription"
         >
             <ng-template #precisionDescription>
@@ -117,41 +118,36 @@ <h3>There are also other components to input numbers:</h3>
                 <code>[precision]</code>
                 to configure a number of digits after comma.
             </ng-template>
-            <tui-input-number-example-3 />
         </tui-doc-example>
 
         <tui-doc-example
             id="align"
             description="With currency symbol as prefix and custom format"
             heading="Align to the right"
-            [content]="example4"
-        >
-            <tui-input-number-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
+        />
 
         <tui-doc-example
             id="prefix-postfix"
             heading="Prefix and postfix"
-            [content]="example5"
-        >
-            <tui-input-number-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="options"
             heading="Default options override"
-            [content]="example6"
-        >
-            <tui-input-number-example-6 />
-        </tui-doc-example>
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="dynamic"
             heading="Dynamic formatting change"
-            [content]="example7"
-        >
-            <tui-input-number-example-7 />
-        </tui-doc-example>
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -243,44 +239,5 @@ <h3>There are also other components to input numbers:</h3>
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputNumberModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </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/components/input-number/index.ts b/projects/demo/src/modules/components/input-number/index.ts
new file mode 100644
index 000000000000..00bb1a243d12
--- /dev/null
+++ b/projects/demo/src/modules/components/input-number/index.ts
@@ -0,0 +1,56 @@
+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 {DemoRoute} from '@demo/routes';
+import {TuiDemo} from '@demo/utils';
+import {tuiProvide} from '@taiga-ui/cdk';
+import {
+    TuiHintOptionsDirective,
+    TuiLinkDirective,
+    TuiNotificationComponent,
+    TuiNumberFormatDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
+
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
+import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiLinkDirective,
+        RouterLink,
+        TuiNotificationComponent,
+        TuiInputNumberModule,
+        ReactiveFormsModule,
+        TuiHintOptionsDirective,
+        TuiNumberFormatDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
+})
+export default class PageComponent extends AbstractExampleTuiNumberFormat {
+    public override cleaner = false;
+    public override precision = 2;
+
+    public readonly control = new FormControl(6432, Validators.required);
+
+    protected docPages = DemoRoute;
+
+    protected readonly minVariants: readonly number[] = [-Infinity, -500, 5, 25];
+
+    protected min = this.minVariants[0];
+
+    protected readonly maxVariants: readonly number[] = [Infinity, 10, 500];
+
+    protected max = this.maxVariants[0];
+
+    protected step = 0;
+}
diff --git a/projects/demo/src/modules/components/input-number/input-number.component.ts b/projects/demo/src/modules/components/input-number/input-number.component.ts
deleted file mode 100644
index 165966b490b9..000000000000
--- a/projects/demo/src/modules/components/input-number/input-number.component.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {DemoRoute} from '@demo/routes';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
-import {tuiProvide} from '@taiga-ui/cdk';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
-
-@Component({
-    selector: 'example-tui-input-number',
-    templateUrl: './input-number.template.html',
-    changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputNumberComponent)],
-})
-export class ExampleTuiInputNumberComponent extends AbstractExampleTuiNumberFormat {
-    public override cleaner = false;
-    public override precision = 2;
-
-    public readonly control = new FormControl(6432, Validators.required);
-
-    protected docPages = DemoRoute;
-
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-    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/index.html?raw'),
-        TypeScript: import('./examples/1/index.ts?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-        TypeScript: import('./examples/2/index.ts?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-        TypeScript: import('./examples/3/index.ts?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'),
-    };
-
-    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 minVariants: readonly number[] = [-Infinity, -500, 5, 25];
-
-    protected min = this.minVariants[0];
-
-    protected readonly maxVariants: readonly number[] = [Infinity, 10, 500];
-
-    protected max = this.maxVariants[0];
-
-    protected step = 0;
-}
diff --git a/projects/demo/src/modules/components/input-number/input-number.module.ts b/projects/demo/src/modules/components/input-number/input-number.module.ts
deleted file mode 100644
index 40e5f926283b..000000000000
--- a/projects/demo/src/modules/components/input-number/input-number.module.ts
+++ /dev/null
@@ -1,60 +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 {
-    TuiButtonDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiNumberFormatDirective,
-    TuiSvgComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiRadioListComponent} from '@taiga-ui/kit';
-import {TuiInputNumberModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputNumberExample1} from './examples/1';
-import {TuiInputNumberExample2} from './examples/2';
-import {TuiInputNumberExample3} from './examples/3';
-import {TuiInputNumberExample4} from './examples/4';
-import {TuiInputNumberExample5} from './examples/5';
-import {TuiInputNumberExample6} from './examples/6';
-import {TuiInputNumberExample7} from './examples/7';
-import {ExampleTuiInputNumberComponent} from './input-number.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputNumberModule,
-        TuiCurrencyPipe,
-        TuiSvgComponent,
-        TuiRadioListComponent,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiTextfieldControllerModule,
-        TuiNotificationComponent,
-        TuiAddonDoc,
-        InheritedDocumentationComponent,
-        TuiHint,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputNumberComponent)),
-        TuiNumberFormatDirective,
-    ],
-    declarations: [
-        ExampleTuiInputNumberComponent,
-        TuiInputNumberExample1,
-        TuiInputNumberExample2,
-        TuiInputNumberExample3,
-        TuiInputNumberExample4,
-        TuiInputNumberExample5,
-        TuiInputNumberExample6,
-        TuiInputNumberExample7,
-    ],
-    exports: [ExampleTuiInputNumberComponent],
-})
-export class ExampleTuiInputNumberModule {}
diff --git a/projects/demo/src/modules/components/input-password/examples/1/index.ts b/projects/demo/src/modules/components/input-password/examples/1/index.ts
index 00bf24f1d053..146970f65e94 100644
--- a/projects/demo/src/modules/components/input-password/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-password/examples/1/index.ts
@@ -1,15 +1,18 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputPasswordModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-password-example-1',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputPasswordModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputPasswordExample1 {
+export default class ExampleComponent {
     protected testForm = new FormGroup({
         testValue: new FormControl('password', Validators.required),
     });
diff --git a/projects/demo/src/modules/components/input-password/examples/2/index.ts b/projects/demo/src/modules/components/input-password/examples/2/index.ts
index 3de39464807c..027610a97b10 100644
--- a/projects/demo/src/modules/components/input-password/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-password/examples/2/index.ts
@@ -1,13 +1,15 @@
 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 {TuiHintOptionsDirective} from '@taiga-ui/core';
 import {TUI_PASSWORD_TEXTS} from '@taiga-ui/kit';
-import {tuiInputPasswordOptionsProvider} from '@taiga-ui/legacy';
+import {TuiInputPasswordModule, tuiInputPasswordOptionsProvider} from '@taiga-ui/legacy';
 import {of} from 'rxjs';
 
 @Component({
-    selector: 'tui-input-password-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputPasswordModule, TuiHintOptionsDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -24,7 +26,7 @@ import {of} from 'rxjs';
         },
     ],
 })
-export class TuiInputPasswordExample2 {
+export default class ExampleComponent {
     protected testForm = new FormGroup({
         testValue: new FormControl('password', Validators.required),
     });
diff --git a/projects/demo/src/modules/components/input-password/examples/import/declare-form.md b/projects/demo/src/modules/components/input-password/examples/import/declare-form.md
deleted file mode 100644
index ff16e7e27671..000000000000
--- a/projects/demo/src/modules/components/input-password/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(''),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-password/examples/import/define-options.md b/projects/demo/src/modules/components/input-password/examples/import/define-options.md
deleted file mode 100644
index a4561c965fc1..000000000000
--- a/projects/demo/src/modules/components/input-password/examples/import/define-options.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-import {TUI_INPUT_PASSWORD_OPTIONS, TUI_INPUT_PASSWORD_DEFAULT_OPTIONS} from '@taiga-ui/kit';
-
-// ...
-
-@Component({
-  standalone: true,
-  providers: [
-    {
-      provide: TUI_INPUT_PASSWORD_OPTIONS,
-      useValue: {
-        ...TUI_INPUT_PASSWORD_DEFAULT_OPTIONS,
-        icons: {
-          hide: 'tuiIconEyeOff',
-          show: 'tuiIconEye',
-        },
-      },
-    },
-  ],
-  // ...
-})
-export class MyComponent {}
-```
diff --git a/projects/demo/src/modules/components/input-password/examples/import/import-module.md b/projects/demo/src/modules/components/input-password/examples/import/import-module.md
deleted file mode 100644
index 120618e423b2..000000000000
--- a/projects/demo/src/modules/components/input-password/examples/import/import-module.md
+++ /dev/null
@@ -1,18 +0,0 @@
-```ts
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputPasswordModule} from '@taiga-ui/legacy';
-
-// ...
-
-@Component({
-  standalone: true,
-  imports: [
-    // ...
-    FormsModule,
-    ReactiveFormsModule,
-    TuiInputPasswordModule,
-  ],
-  // ...
-})
-export class MyComponent {}
-```
diff --git a/projects/demo/src/modules/components/input-password/examples/import/import.md b/projects/demo/src/modules/components/input-password/examples/import/import.md
new file mode 100644
index 000000000000..f3c144637b9b
--- /dev/null
+++ b/projects/demo/src/modules/components/input-password/examples/import/import.md
@@ -0,0 +1,33 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiInputPasswordModule} from '@taiga-ui/legacy';
+
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputPasswordModule,
+  ],
+  providers: [
+    {
+      provide: TUI_INPUT_PASSWORD_OPTIONS,
+      useValue: {
+        ...TUI_INPUT_PASSWORD_DEFAULT_OPTIONS,
+        icons: {
+          hide: 'tuiIconEyeOff',
+          show: 'tuiIconEye',
+        },
+      },
+    },
+  ],
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(''),
+  });
+}
+```
diff --git a/projects/demo/src/modules/components/input-password/examples/import/insert-template.md b/projects/demo/src/modules/components/input-password/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-password/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-password/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-password/input-password.template.html b/projects/demo/src/modules/components/input-password/index.html
similarity index 58%
rename from projects/demo/src/modules/components/input-password/input-password.template.html
rename to projects/demo/src/modules/components/input-password/index.html
index e79f2e148ec3..c26aa56ff7fd 100644
--- a/projects/demo/src/modules/components/input-password/input-password.template.html
+++ b/projects/demo/src/modules/components/input-password/index.html
@@ -7,7 +7,8 @@
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -16,15 +17,13 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-password-example-1 />
         </tui-doc-example>
         <tui-doc-example
             id="options"
             heading="options"
-            [content]="example2"
-        >
-            <tui-input-password-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -75,57 +74,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputPasswordModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </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>
-                    Optionally use the
-                    <code>TUI_INPUT_PASSWORD_OPTIONS</code>
-                    injection token to override the default options for the component.
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleOptions"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/input-password/index.ts b/projects/demo/src/modules/components/input-password/index.ts
new file mode 100644
index 000000000000..0a7985084689
--- /dev/null
+++ b/projects/demo/src/modules/components/input-password/index.ts
@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {tuiProvide} from '@taiga-ui/cdk';
+import {
+    TuiHintOptionsDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputPasswordModule} from '@taiga-ui/legacy';
+
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputPasswordModule,
+        ReactiveFormsModule,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
+})
+export default class PageComponent extends AbstractExampleTuiControl {
+    public override readonly maxLengthVariants: readonly number[] = [10];
+
+    public override maxLength = null;
+
+    public control = new FormControl('', Validators.required);
+}
diff --git a/projects/demo/src/modules/components/input-password/input-password.component.ts b/projects/demo/src/modules/components/input-password/input-password.component.ts
deleted file mode 100644
index 8a041b181604..000000000000
--- a/projects/demo/src/modules/components/input-password/input-password.component.ts
+++ /dev/null
@@ -1,37 +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';
-import {tuiProvide} from '@taiga-ui/cdk';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiControl} from '../abstract/control';
-
-@Component({
-    selector: 'example-tui-input-password',
-    templateUrl: './input-password.template.html',
-    changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputPasswordComponent)],
-})
-export class ExampleTuiInputPasswordComponent extends AbstractExampleTuiControl {
-    public override readonly maxLengthVariants: readonly number[] = [10];
-
-    public override maxLength = null;
-
-    public control = new FormControl('', Validators.required);
-
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleOptions = import('./examples/import/define-options.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'),
-    };
-}
diff --git a/projects/demo/src/modules/components/input-password/input-password.module.ts b/projects/demo/src/modules/components/input-password/input-password.module.ts
deleted file mode 100644
index 84ef198b3718..000000000000
--- a/projects/demo/src/modules/components/input-password/input-password.module.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiInputPasswordModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputPasswordExample1} from './examples/1';
-import {TuiInputPasswordExample2} from './examples/2';
-import {ExampleTuiInputPasswordComponent} from './input-password.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputPasswordModule,
-        TuiLinkDirective,
-        InheritedDocumentationComponent,
-        TuiAddonDoc,
-        TuiButtonDirective,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiNotificationComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputPasswordComponent)),
-    ],
-    declarations: [
-        ExampleTuiInputPasswordComponent,
-        TuiInputPasswordExample1,
-        TuiInputPasswordExample2,
-    ],
-    exports: [ExampleTuiInputPasswordComponent],
-})
-export class ExampleTuiInputPasswordModule {}
diff --git a/projects/demo/src/modules/components/input-phone/examples/1/index.ts b/projects/demo/src/modules/components/input-phone/examples/1/index.ts
index 086b23d34c1d..0b10a8dd411f 100644
--- a/projects/demo/src/modules/components/input-phone/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-phone/examples/1/index.ts
@@ -1,15 +1,19 @@
+import {JsonPipe} 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 {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiInputPhoneModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-phone-example-1',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputPhoneModule, TuiButtonDirective, JsonPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputPhoneExample1 {
+export default class ExampleComponent {
     protected testForm = new FormGroup({
         testValue: new FormControl('+77777777777', Validators.required),
     });
diff --git a/projects/demo/src/modules/components/input-phone/examples/2/index.ts b/projects/demo/src/modules/components/input-phone/examples/2/index.ts
index ee6f28a07f8c..237b69e26656 100644
--- a/projects/demo/src/modules/components/input-phone/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-phone/examples/2/index.ts
@@ -1,14 +1,17 @@
+import {JsonPipe} 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 {TuiInputPhoneModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-phone-example-2',
+    standalone: true,
+    imports: [TuiInputPhoneModule, ReactiveFormsModule, JsonPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputPhoneExample2 {
+export default class ExampleComponent {
     protected readonly control = new FormControl('', Validators.minLength(12));
 }
diff --git a/projects/demo/src/modules/components/input-phone/examples/3/index.ts b/projects/demo/src/modules/components/input-phone/examples/3/index.ts
index 80d54eeaa86d..5f5152bcd649 100644
--- a/projects/demo/src/modules/components/input-phone/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-phone/examples/3/index.ts
@@ -1,8 +1,18 @@
+import {AsyncPipe, NgForOf, 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 {assets} from '@demo/utils';
-import {TUI_DEFAULT_MATCHER, tuiPure} from '@taiga-ui/cdk';
+import {TUI_DEFAULT_MATCHER, TuiLetDirective, tuiPure} from '@taiga-ui/cdk';
+import {
+    TuiDataListComponent,
+    TuiDataListDirective,
+    TuiOptionComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiInputPhoneModule} from '@taiga-ui/legacy';
 import type {Observable} from 'rxjs';
 import {
     combineLatest,
@@ -41,13 +51,26 @@ const DATA: readonly User[] = [
 ];
 
 @Component({
-    selector: 'tui-input-phone-example-3',
+    standalone: true,
+    imports: [
+        TuiInputPhoneModule,
+        TuiLetDirective,
+        AsyncPipe,
+        TuiTextfieldControllerModule,
+        FormsModule,
+        NgIf,
+        TuiDataListComponent,
+        TuiDataListDirective,
+        NgForOf,
+        TuiOptionComponent,
+        TuiAvatarComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputPhoneExample3 {
+export default class ExampleComponent {
     private readonly search$ = new Subject<string>();
 
     private readonly selected$ = new Subject<User>();
diff --git a/projects/demo/src/modules/components/input-phone/examples/import/declare-form.md b/projects/demo/src/modules/components/input-phone/examples/import/declare-form.md
deleted file mode 100644
index 9c8ec498702c..000000000000
--- a/projects/demo/src/modules/components/input-phone/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl('+78005553535'),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-phone/examples/import/import-module.md b/projects/demo/src/modules/components/input-phone/examples/import/import.md
similarity index 68%
rename from projects/demo/src/modules/components/input-phone/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-phone/examples/import/import.md
index 87fbc9c4f55c..5e80973598ea 100644
--- a/projects/demo/src/modules/components/input-phone/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-phone/examples/import/import.md
@@ -13,5 +13,9 @@ import {TuiInputPhoneModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl('+78005553535'),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-phone/examples/import/insert-template.md b/projects/demo/src/modules/components/input-phone/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-phone/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-phone/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.template.html b/projects/demo/src/modules/components/input-phone/index.html
similarity index 76%
rename from projects/demo/src/modules/components/input-phone/input-phone.template.html
rename to projects/demo/src/modules/components/input-phone/index.html
index dcae9115c3f6..dda0ed6242da 100644
--- a/projects/demo/src/modules/components/input-phone/input-phone.template.html
+++ b/projects/demo/src/modules/components/input-phone/index.html
@@ -12,7 +12,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -21,25 +22,22 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <tui-input-phone-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="validated"
             heading="With length validator"
-            [content]="example2"
-        >
-            <tui-input-phone-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="autocomplete"
             description="By number and by name"
             heading="With autocomplete"
-            [content]="example3"
-        >
-            <tui-input-phone-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -133,44 +131,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputPhoneModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </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/components/input-phone/input-phone.style.less b/projects/demo/src/modules/components/input-phone/index.less
similarity index 100%
rename from projects/demo/src/modules/components/input-phone/input-phone.style.less
rename to projects/demo/src/modules/components/input-phone/index.less
diff --git a/projects/demo/src/modules/components/input-phone/index.ts b/projects/demo/src/modules/components/input-phone/index.ts
new file mode 100644
index 000000000000..a1f0e9c633eb
--- /dev/null
+++ b/projects/demo/src/modules/components/input-phone/index.ts
@@ -0,0 +1,53 @@
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {tuiProvide} from '@taiga-ui/cdk';
+import {
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiHintOptionsDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputPhoneModule} from '@taiga-ui/legacy';
+
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputPhoneModule,
+        ReactiveFormsModule,
+        TuiDropdownOptionsDirective,
+        TuiDropdownOpenDirective,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
+})
+export default class PageComponent extends AbstractExampleTuiControl {
+    public override cleaner = false;
+
+    public control = new FormControl('', [Validators.required, Validators.minLength(12)]);
+
+    protected countryCodes = ['+7', '+850', '+1', '+52'];
+
+    protected countryCode = this.countryCodes[0];
+
+    protected phoneMasksAfterCountryCode = [
+        '(###) ###-##-##',
+        '(####)+____:-#############',
+        '### ###-####',
+    ];
+
+    protected phoneMaskAfterCountryCode = this.phoneMasksAfterCountryCode[0];
+}
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.component.ts b/projects/demo/src/modules/components/input-phone/input-phone.component.ts
deleted file mode 100644
index c56d6ff9dd3e..000000000000
--- a/projects/demo/src/modules/components/input-phone/input-phone.component.ts
+++ /dev/null
@@ -1,53 +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';
-import {tuiProvide} from '@taiga-ui/cdk';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiControl} from '../abstract/control';
-
-@Component({
-    selector: 'example-tui-input-phone',
-    templateUrl: './input-phone.template.html',
-    styleUrls: ['./input-phone.style.less'],
-    changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputPhoneComponent)],
-})
-export class ExampleTuiInputPhoneComponent extends AbstractExampleTuiControl {
-    public override cleaner = false;
-
-    public control = new FormControl('', [Validators.required, Validators.minLength(12)]);
-
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-    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 countryCodes = ['+7', '+850', '+1', '+52'];
-
-    protected countryCode = this.countryCodes[0];
-
-    protected phoneMasksAfterCountryCode = [
-        '(###) ###-##-##',
-        '(####)+____:-#############',
-        '### ###-####',
-    ];
-
-    protected phoneMaskAfterCountryCode = this.phoneMasksAfterCountryCode[0];
-}
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.module.ts b/projects/demo/src/modules/components/input-phone/input-phone.module.ts
deleted file mode 100644
index 079ddceafc97..000000000000
--- a/projects/demo/src/modules/components/input-phone/input-phone.module.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLetDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiSvgComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiAvatarComponent} from '@taiga-ui/kit';
-import {TuiInputPhoneModule} from '@taiga-ui/legacy';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputPhoneExample1} from './examples/1';
-import {TuiInputPhoneExample2} from './examples/2';
-import {TuiInputPhoneExample3} from './examples/3';
-import {ExampleTuiInputPhoneComponent} from './input-phone.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        PolymorpheusModule,
-        TuiLetDirective,
-        TuiDataList,
-        TuiButtonDirective,
-        TuiSvgComponent,
-        TuiAvatarComponent,
-        TuiDropdownModule,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiInputPhoneModule,
-        TuiLinkDirective,
-        TuiNotificationComponent,
-        InheritedDocumentationComponent,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputPhoneComponent)),
-    ],
-    declarations: [
-        ExampleTuiInputPhoneComponent,
-        TuiInputPhoneExample1,
-        TuiInputPhoneExample2,
-        TuiInputPhoneExample3,
-    ],
-    exports: [ExampleTuiInputPhoneComponent],
-})
-export class ExampleTuiInputPhoneModule {}
diff --git a/projects/demo/src/modules/components/input-range/examples/1/index.ts b/projects/demo/src/modules/components/input-range/examples/1/index.ts
index 2e1861fe33f6..7ad9285fe10e 100644
--- a/projects/demo/src/modules/components/input-range/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/1/index.ts
@@ -1,10 +1,13 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-range-example-1',
+    standalone: true,
+    imports: [TuiInputRangeModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     styles: [
         `
@@ -16,7 +19,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     encapsulation,
     changeDetection,
 })
-export class TuiInputRangeExample1 {
+export default class ExampleComponent {
     protected readonly min = 0;
     protected readonly max = 20;
     protected readonly sliderStep = 1;
diff --git a/projects/demo/src/modules/components/input-range/examples/2/index.ts b/projects/demo/src/modules/components/input-range/examples/2/index.ts
index 1c0a9d5b2c18..5d65cc5ebbf8 100644
--- a/projects/demo/src/modules/components/input-range/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/2/index.ts
@@ -1,11 +1,13 @@
 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 {tuiNumberFormatProvider} from '@taiga-ui/core';
+import {tuiNumberFormatProvider, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-range-example-2',
+    standalone: true,
+    imports: [TuiInputRangeModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     styles: [
         `
@@ -24,7 +26,7 @@ import {tuiNumberFormatProvider} from '@taiga-ui/core';
         }),
     ],
 })
-export class TuiInputRangeExample2 {
+export default class ExampleComponent {
     protected readonly max = 50_000_001;
     protected readonly min = 5_001;
 
diff --git a/projects/demo/src/modules/components/input-range/examples/3/index.ts b/projects/demo/src/modules/components/input-range/examples/3/index.ts
index 823dbd7bd17c..6c9658d9202c 100644
--- a/projects/demo/src/modules/components/input-range/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/3/index.ts
@@ -1,10 +1,20 @@
+import {I18nPluralPipe, NgSwitch, NgSwitchCase, NgSwitchDefault} 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 {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-range-example-3',
+    standalone: true,
+    imports: [
+        TuiInputRangeModule,
+        ReactiveFormsModule,
+        NgSwitch,
+        NgSwitchCase,
+        NgSwitchDefault,
+        I18nPluralPipe,
+    ],
     templateUrl: './index.html',
     styles: [
         `
@@ -16,7 +26,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     encapsulation,
     changeDetection,
 })
-export class TuiInputRangeExample3 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([0, 7]);
 
     // See https://angular.io/api/common/I18nPluralPipe
diff --git a/projects/demo/src/modules/components/input-range/examples/4/index.ts b/projects/demo/src/modules/components/input-range/examples/4/index.ts
index d30a4af12bfc..aa6b174b342c 100644
--- a/projects/demo/src/modules/components/input-range/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/4/index.ts
@@ -1,16 +1,19 @@
 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 {TuiSvgComponent} from '@taiga-ui/core';
+import {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-range-example-4',
+    standalone: true,
+    imports: [TuiInputRangeModule, ReactiveFormsModule, TuiSvgComponent],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputRangeExample4 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([20, 40]);
 
     // See https://angular.io/api/common/I18nPluralPipe
diff --git a/projects/demo/src/modules/components/input-range/examples/5/index.ts b/projects/demo/src/modules/components/input-range/examples/5/index.ts
index 600507d5103b..58434c5b2efa 100644
--- a/projects/demo/src/modules/components/input-range/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/5/index.ts
@@ -1,17 +1,20 @@
+import {JsonPipe, 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 type {TuiKeySteps} from '@taiga-ui/kit';
+import {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-range-example-5',
+    standalone: true,
+    imports: [TuiInputRangeModule, ReactiveFormsModule, NgForOf, JsonPipe],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputRangeExample5 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([100_000, 500_000]);
     protected readonly max = 1_000_000;
     protected readonly min = 0;
diff --git a/projects/demo/src/modules/components/input-range/examples/6/index.ts b/projects/demo/src/modules/components/input-range/examples/6/index.ts
index 1d14cb58dad6..920e60122dce 100644
--- a/projects/demo/src/modules/components/input-range/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-range/examples/6/index.ts
@@ -1,15 +1,34 @@
-import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {JsonPipe} from '@angular/common';
+import {Component, Directive} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiProvide, TuiValueTransformer} from '@taiga-ui/cdk';
+import {TUI_NUMBER_VALUE_TRANSFORMER, TuiInputRangeModule} from '@taiga-ui/legacy';
+
+@Directive({
+    standalone: true,
+    selector: '[absTransformer]',
+    providers: [tuiProvide(TUI_NUMBER_VALUE_TRANSFORMER, AbsTransformer)],
+})
+class AbsTransformer extends TuiValueTransformer<number | null, number | null> {
+    public override fromControlValue(value: number | null): number | null {
+        return value && Math.abs(value);
+    }
+
+    public override toControlValue(value: number | null): number | null {
+        return value && -1 * Math.abs(value);
+    }
+}
 
 @Component({
-    selector: 'tui-input-range-example-6',
+    standalone: true,
+    imports: [AbsTransformer, TuiInputRangeModule, ReactiveFormsModule, JsonPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputRangeExample6 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([-30, 0]);
 
     // See https://angular.io/api/common/I18nPluralPipe
diff --git a/projects/demo/src/modules/components/input-range/examples/6/transformer.ts b/projects/demo/src/modules/components/input-range/examples/6/transformer.ts
deleted file mode 100644
index 292721e097ae..000000000000
--- a/projects/demo/src/modules/components/input-range/examples/6/transformer.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Directive} from '@angular/core';
-import {tuiProvide, TuiValueTransformer} from '@taiga-ui/cdk';
-import {TUI_NUMBER_VALUE_TRANSFORMER} from '@taiga-ui/legacy';
-
-@Directive({
-    selector: '[absTransformer]',
-    providers: [tuiProvide(TUI_NUMBER_VALUE_TRANSFORMER, AbsTransformer)],
-})
-export class AbsTransformer extends TuiValueTransformer<number | null, number | null> {
-    public override fromControlValue(value: number | null): number | null {
-        return value && Math.abs(value);
-    }
-
-    public override toControlValue(value: number | null): number | null {
-        return value && -1 * Math.abs(value);
-    }
-}
diff --git a/projects/demo/src/modules/components/input-range/examples/import/import-module.md b/projects/demo/src/modules/components/input-range/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/input-range/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-range/examples/import/import.md
diff --git a/projects/demo/src/modules/components/input-range/examples/import/insert-template.md b/projects/demo/src/modules/components/input-range/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-range/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-range/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-range/input-range.template.html b/projects/demo/src/modules/components/input-range/index.html
similarity index 93%
rename from projects/demo/src/modules/components/input-range/input-range.template.html
rename to projects/demo/src/modules/components/input-range/index.html
index a22402a5bccf..d2f7c888fd0a 100644
--- a/projects/demo/src/modules/components/input-range/input-range.template.html
+++ b/projects/demo/src/modules/components/input-range/index.html
@@ -15,7 +15,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
             [description]="stepQuantumDescription"
         >
             <ng-template #stepQuantumDescription>
@@ -38,14 +39,13 @@
                 <code>0.00001</code>
                 .
             </p>
-
-            <tui-input-range-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="number-format"
             heading="Override number format"
-            [content]="example2"
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
             [description]="numberFormatTokenDescription"
         >
             <ng-template #numberFormatTokenDescription>
@@ -61,34 +61,33 @@
                     .
                 </p>
             </ng-template>
-            <tui-input-range-example-2 />
         </tui-doc-example>
 
         <tui-doc-example
             id="value-content"
             heading="Custom value content"
-            [content]="example3"
-        >
-            <tui-input-range-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="segments"
             heading="Visual segments + labels for ticks"
-            [content]="example4"
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
         >
             <tui-notification class="tui-space_bottom-8">
                 Use mixin
                 <code>tui-slider-ticks-labels</code>
                 to arrange ticks' labels (it places them strictly below ticks).
             </tui-notification>
-            <tui-input-range-example-4 />
         </tui-doc-example>
 
         <tui-doc-example
             id="key-steps"
             heading="KeySteps"
-            [content]="example5"
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
         >
             <dl class="tui-space_bottom-8 tui-space_top-0">
                 <dt>
@@ -96,16 +95,14 @@
                 </dt>
                 <dd>anchor points of non-uniform format between value and position</dd>
             </dl>
-            <tui-input-range-example-5 />
         </tui-doc-example>
 
         <tui-doc-example
             id="negative"
             heading="Using negative values without minus sign"
-            [content]="example6"
-        >
-            <tui-input-range-example-6 />
-        </tui-doc-example>
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -287,10 +284,5 @@ <h6 class="tui-text_h6">
         <number-format-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-range/input-range.component.ts b/projects/demo/src/modules/components/input-range/index.ts
similarity index 55%
rename from projects/demo/src/modules/components/input-range/input-range.component.ts
rename to projects/demo/src/modules/components/input-range/index.ts
index 55fba086f637..3da26ecd994e 100644
--- a/projects/demo/src/modules/components/input-range/input-range.component.ts
+++ b/projects/demo/src/modules/components/input-range/index.ts
@@ -1,68 +1,52 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
 import type {TuiContext} from '@taiga-ui/cdk';
 import {tuiProvide} from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
+import {
+    TuiLinkDirective,
+    TuiNotificationComponent,
+    TuiNumberFormatDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import type {TuiKeySteps} from '@taiga-ui/kit';
+import {TuiInputRangeModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
+import {NumberFormatDocumentationComponent} from '../abstract/number-format-documentation';
 
 @Component({
-    selector: 'example-tui-input-range',
-    templateUrl: './input-range.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        RouterLink,
+        TuiLinkDirective,
+        TuiNotificationComponent,
+        TuiInputRangeModule,
+        ReactiveFormsModule,
+        TuiNumberFormatDirective,
+        TuiTextfieldControllerModule,
+        NumberFormatDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
     providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputRangeComponent),
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
         tuiDocExcludeProperties(['precision']),
     ],
 })
-export class ExampleTuiInputRangeComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent extends AbstractExampleTuiNumberFormat {
     public control = new FormControl([0, 10]);
 
     public override sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
 
     public override size = this.sizeVariants[1];
 
-    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/index.html?raw'),
-        TypeScript: import('./examples/1/index.ts?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-        TypeScript: import('./examples/3/index.ts?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-        TypeScript: import('./examples/4/index.ts?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'),
-        'transformer.ts': import('./examples/6/transformer.ts?raw'),
-    };
-
     protected minVariants: readonly number[] = [0, 5, 7.77, -10];
 
     protected min = this.minVariants[0];
diff --git a/projects/demo/src/modules/components/input-range/input-range.module.ts b/projects/demo/src/modules/components/input-range/input-range.module.ts
deleted file mode 100644
index e95c563b8ab4..000000000000
--- a/projects/demo/src/modules/components/input-range/input-range.module.ts
+++ /dev/null
@@ -1,61 +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,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiNumberFormatDirective,
-    TuiSvgComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiRadioListComponent} from '@taiga-ui/kit';
-import {TuiInputRangeModule, TuiInputSliderModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {NumberFormatDocumentationComponent} from '../abstract/number-format-documentation';
-import {TuiInputRangeExample1} from './examples/1';
-import {TuiInputRangeExample2} from './examples/2';
-import {TuiInputRangeExample3} from './examples/3';
-import {TuiInputRangeExample4} from './examples/4';
-import {TuiInputRangeExample5} from './examples/5';
-import {TuiInputRangeExample6} from './examples/6';
-import {AbsTransformer} from './examples/6/transformer';
-import {ExampleTuiInputRangeComponent} from './input-range.component';
-
-@NgModule({
-    imports: [
-        TuiInputRangeModule,
-        TuiInputSliderModule,
-        InheritedDocumentationComponent,
-        ReactiveFormsModule,
-        FormsModule,
-        CommonModule,
-        TuiRadioListComponent,
-        TuiAddonDoc,
-        TuiButtonDirective,
-        TuiLinkDirective,
-        TuiTextfieldControllerModule,
-        TuiSvgComponent,
-        TuiNotificationComponent,
-        TuiNumberFormatDirective,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputRangeComponent)),
-        NumberFormatDocumentationComponent,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiInputRangeComponent,
-        AbsTransformer,
-        TuiInputRangeExample1,
-        TuiInputRangeExample2,
-        TuiInputRangeExample3,
-        TuiInputRangeExample4,
-        TuiInputRangeExample5,
-        TuiInputRangeExample6,
-    ],
-    exports: [ExampleTuiInputRangeComponent],
-})
-export class ExampleTuiInputRangeModule {}
diff --git a/projects/demo/src/modules/components/input-slider/examples/1/index.ts b/projects/demo/src/modules/components/input-slider/examples/1/index.ts
index db42b39742a1..0a43d60d2917 100644
--- a/projects/demo/src/modules/components/input-slider/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-slider/examples/1/index.ts
@@ -1,15 +1,18 @@
 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 {TuiHintOptionsDirective} from '@taiga-ui/core';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-slider-example-1',
+    standalone: true,
+    imports: [TuiInputSliderModule, ReactiveFormsModule, TuiHintOptionsDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputSliderExample1 {
+export default class ExampleComponent {
     protected readonly min = 5;
     protected readonly max = 20;
     protected readonly sliderStep = 1;
diff --git a/projects/demo/src/modules/components/input-slider/examples/2/index.ts b/projects/demo/src/modules/components/input-slider/examples/2/index.ts
index 401d1b08ead0..8d425de808f1 100644
--- a/projects/demo/src/modules/components/input-slider/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-slider/examples/2/index.ts
@@ -1,16 +1,19 @@
 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 {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-slider-example-2',
+    standalone: true,
+    imports: [TuiInputSliderModule, ReactiveFormsModule, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputSliderExample2 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(40);
     protected readonly segments = 5;
     protected readonly max = 100;
diff --git a/projects/demo/src/modules/components/input-slider/examples/3/index.ts b/projects/demo/src/modules/components/input-slider/examples/3/index.ts
index 89590e440d79..b52c51f47d81 100644
--- a/projects/demo/src/modules/components/input-slider/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-slider/examples/3/index.ts
@@ -1,17 +1,20 @@
+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 type {TuiKeySteps} from '@taiga-ui/kit';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-slider-example-3',
+    standalone: true,
+    imports: [TuiInputSliderModule, ReactiveFormsModule, NgForOf],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputSliderExample3 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(10_000);
     protected readonly max = 1_000_000;
     protected readonly min = 0;
diff --git a/projects/demo/src/modules/components/input-slider/examples/4/index.ts b/projects/demo/src/modules/components/input-slider/examples/4/index.ts
index 50a6d58e66e9..5209079c1b38 100644
--- a/projects/demo/src/modules/components/input-slider/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-slider/examples/4/index.ts
@@ -1,14 +1,28 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiHintOptionsDirective,
+    TuiSvgComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-slider-example-4',
+    standalone: true,
+    imports: [
+        TuiInputSliderModule,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        FormsModule,
+        TuiSvgComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputSliderExample4 {
+export default class ExampleComponent {
     protected userAnswer = 2;
 }
diff --git a/projects/demo/src/modules/components/input-slider/examples/5/index.ts b/projects/demo/src/modules/components/input-slider/examples/5/index.ts
index 6bfbcf64fb55..ee2e906ad06c 100644
--- a/projects/demo/src/modules/components/input-slider/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-slider/examples/5/index.ts
@@ -1,17 +1,20 @@
 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 {TuiContext} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-slider-example-5',
+    standalone: true,
+    imports: [TuiInputSliderModule, TuiTextfieldControllerModule, ReactiveFormsModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputSliderExample5 {
+export default class ExampleComponent {
     protected readonly max = 100;
     protected readonly min = 0;
 
diff --git a/projects/demo/src/modules/components/input-slider/examples/import/import-module.md b/projects/demo/src/modules/components/input-slider/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/input-slider/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-slider/examples/import/import.md
diff --git a/projects/demo/src/modules/components/input-slider/examples/import/insert-template.md b/projects/demo/src/modules/components/input-slider/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-slider/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-slider/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.template.html b/projects/demo/src/modules/components/input-slider/index.html
similarity index 93%
rename from projects/demo/src/modules/components/input-slider/input-slider.template.html
rename to projects/demo/src/modules/components/input-slider/index.html
index 7b84c4aaa399..3c6cfd248052 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.template.html
+++ b/projects/demo/src/modules/components/input-slider/index.html
@@ -20,7 +20,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
             [description]="stepQuantumDescription"
         >
             <ng-template #stepQuantumDescription>
@@ -32,26 +33,26 @@
                     .
                 </p>
             </ng-template>
-            <tui-input-slider-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="slider-segments"
             heading="With slider segments + ticks labels"
-            [content]="example2"
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
         >
             <tui-notification class="tui-space_bottom-8">
                 Use mixin
                 <code>tui-slider-ticks-labels</code>
                 to arrange ticks' labels (it places them strictly below ticks).
             </tui-notification>
-            <tui-input-slider-example-2 />
         </tui-doc-example>
 
         <tui-doc-example
             id="key-steps"
             heading="KeySteps"
-            [content]="example3"
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
         >
             <dl class="tui-space_bottom-8 tui-space_top-0">
                 <dt>
@@ -59,21 +60,20 @@
                 </dt>
                 <dd>anchor points of non-uniform format between value and position</dd>
             </dl>
-            <tui-input-slider-example-3 />
         </tui-doc-example>
 
         <tui-doc-example
             id="right-label"
             heading="With right label"
-            [content]="example4"
-        >
-            <tui-input-slider-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
+        />
 
         <tui-doc-example
             id="min-max-labels"
             heading="With min and max labels"
-            [content]="example5"
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
             [description]="valueContentDescription"
         >
             <ng-template #valueContentDescription>
@@ -90,7 +90,6 @@
                     to create custom label for selected value.
                 </p>
             </ng-template>
-            <tui-input-slider-example-5 />
         </tui-doc-example>
     </ng-template>
 
@@ -212,10 +211,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/components/input-slider/input-slider.component.ts b/projects/demo/src/modules/components/input-slider/index.ts
similarity index 56%
rename from projects/demo/src/modules/components/input-slider/input-slider.component.ts
rename to projects/demo/src/modules/components/input-slider/index.ts
index 3937b5301b0a..3adf8c6f3794 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.component.ts
+++ b/projects/demo/src/modules/components/input-slider/index.ts
@@ -1,26 +1,48 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
 import type {TuiContext} from '@taiga-ui/cdk';
 import {tuiProvide} from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
+import {
+    TuiHintOptionsDirective,
+    TuiLinkDirective,
+    TuiNotificationComponent,
+    TuiNumberFormatDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import type {TuiKeySteps} from '@taiga-ui/kit';
+import {TuiInputSliderModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
 
 @Component({
-    selector: 'example-tui-input-slider',
-    templateUrl: './input-slider.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiLinkDirective,
+        RouterLink,
+        TuiNotificationComponent,
+        TuiInputSliderModule,
+        ReactiveFormsModule,
+        TuiHintOptionsDirective,
+        TuiNumberFormatDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
     providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputSliderComponent),
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
         tuiDocExcludeProperties(['precision']),
     ],
 })
-export class ExampleTuiInputSliderComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent extends AbstractExampleTuiNumberFormat {
     public override readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
     public override size = this.sizeVariants[1];
     public readonly control = new FormControl(0);
@@ -33,38 +55,6 @@ export class ExampleTuiInputSliderComponent extends AbstractExampleTuiNumberForm
 
     public override customContentSelected = this.customContentVariants[0];
 
-    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/index.html?raw'),
-        TypeScript: import('./examples/1/index.ts?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-        TypeScript: import('./examples/2/index.ts?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-        TypeScript: import('./examples/3/index.ts?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        TypeScript: import('./examples/4/index.ts?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    protected readonly example5: TuiDocExample = {
-        HTML: import('./examples/5/index.html?raw'),
-        TypeScript: import('./examples/5/index.ts?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
     protected readonly minVariants: readonly number[] = [0, 1, 5, 7.77, -10];
 
     protected min = this.minVariants[0];
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.module.ts b/projects/demo/src/modules/components/input-slider/input-slider.module.ts
deleted file mode 100644
index 44150f2bd28d..000000000000
--- a/projects/demo/src/modules/components/input-slider/input-slider.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 {RouterModule} from '@angular/router';
-import {TuiSetupComponent} from '@demo/utils';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiNumberFormatDirective,
-    TuiSvgComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiRadioListComponent} from '@taiga-ui/kit';
-import {TuiInputRangeModule, TuiInputSliderModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputSliderExample1} from './examples/1';
-import {TuiInputSliderExample2} from './examples/2';
-import {TuiInputSliderExample3} from './examples/3';
-import {TuiInputSliderExample4} from './examples/4';
-import {TuiInputSliderExample5} from './examples/5';
-import {ExampleTuiInputSliderComponent} from './input-slider.component';
-
-@NgModule({
-    imports: [
-        TuiInputRangeModule,
-        TuiInputSliderModule,
-        InheritedDocumentationComponent,
-        ReactiveFormsModule,
-        FormsModule,
-        CommonModule,
-        TuiRadioListComponent,
-        TuiButtonDirective,
-        TuiHint,
-        TuiAddonDoc,
-        TuiLinkDirective,
-        TuiSvgComponent,
-        TuiNotificationComponent,
-        TuiTextfieldControllerModule,
-        TuiNumberFormatDirective,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputSliderComponent)),
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiInputSliderComponent,
-        TuiInputSliderExample1,
-        TuiInputSliderExample2,
-        TuiInputSliderExample3,
-        TuiInputSliderExample4,
-        TuiInputSliderExample5,
-    ],
-    exports: [ExampleTuiInputSliderComponent],
-})
-export class ExampleTuiInputSliderModule {}
diff --git a/projects/demo/src/modules/components/input-tag/examples/1/index.ts b/projects/demo/src/modules/components/input-tag/examples/1/index.ts
index 80712de19424..c90a5617a00f 100644
--- a/projects/demo/src/modules/components/input-tag/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/1/index.ts
@@ -1,14 +1,17 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-1',
+    standalone: true,
+    imports: [TuiInputTagModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<string[]>([]);
 }
diff --git a/projects/demo/src/modules/components/input-tag/examples/2/index.ts b/projects/demo/src/modules/components/input-tag/examples/2/index.ts
index 25bf6bf0159c..810715afe663 100644
--- a/projects/demo/src/modules/components/input-tag/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/2/index.ts
@@ -1,6 +1,11 @@
+import {AsyncPipe} 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 {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiDataListWrapperComponent} from '@taiga-ui/kit';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 import type {Observable} from 'rxjs';
 import {delay, of, startWith, Subject, switchMap} from 'rxjs';
 
@@ -14,12 +19,20 @@ const databaseMockData: readonly string[] = [
 ];
 
 @Component({
-    selector: 'tui-input-tag-example-2',
+    standalone: true,
+    imports: [
+        TuiInputTagModule,
+        TuiTextfieldControllerModule,
+        FormsModule,
+        TuiDataListWrapperComponent,
+        TuiDataListDirective,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample2 {
+export default class ExampleComponent {
     private readonly search$ = new Subject<string>();
 
     protected value = [];
diff --git a/projects/demo/src/modules/components/input-tag/examples/3/index.ts b/projects/demo/src/modules/components/input-tag/examples/3/index.ts
index 06f05689f0c5..2d3d3df7f86c 100644
--- a/projects/demo/src/modules/components/input-tag/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/3/index.ts
@@ -1,15 +1,18 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-3',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputTagModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample3 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(['I', 'love', 'Angular']),
     });
diff --git a/projects/demo/src/modules/components/input-tag/examples/4/index.ts b/projects/demo/src/modules/components/input-tag/examples/4/index.ts
index f2507276dd41..9f69153b285b 100644
--- a/projects/demo/src/modules/components/input-tag/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/4/index.ts
@@ -1,6 +1,7 @@
+import {AsyncPipe, NgForOf, NgIf} 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 type {TuiBooleanHandler} from '@taiga-ui/cdk';
@@ -10,6 +11,15 @@ import {
     tuiPure,
     TuiValidationError,
 } from '@taiga-ui/cdk';
+import {
+    TuiDataListComponent,
+    TuiDataListDirective,
+    TuiErrorComponent,
+    TuiOptionComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiFieldErrorPipe} from '@taiga-ui/kit';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 function createControlValidator(handler: TuiBooleanHandler<string>): ValidatorFn {
     return ({value}: AbstractControl) => {
@@ -30,12 +40,25 @@ function tagValidator(tag: string): boolean {
 }
 
 @Component({
-    selector: 'tui-input-tag-example-4',
+    standalone: true,
+    imports: [
+        TuiInputTagModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        TuiDataListComponent,
+        NgIf,
+        NgForOf,
+        TuiOptionComponent,
+        TuiDataListDirective,
+        TuiErrorComponent,
+        TuiFieldErrorPipe,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample4 {
+export default class ExampleComponent {
     protected search = '';
 
     protected readonly tagValidator = tagValidator;
diff --git a/projects/demo/src/modules/components/input-tag/examples/5/index.ts b/projects/demo/src/modules/components/input-tag/examples/5/index.ts
index 955b8e66a5c2..c0fb535bad87 100644
--- a/projects/demo/src/modules/components/input-tag/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/5/index.ts
@@ -1,14 +1,23 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiHintOptionsDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-5',
+    standalone: true,
+    imports: [
+        TuiInputTagModule,
+        TuiTextfieldControllerModule,
+        TuiHintOptionsDirective,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample5 {
+export default class ExampleComponent {
     protected value = ['گراهام چپمن', 'جان کلیز'];
 }
diff --git a/projects/demo/src/modules/components/input-tag/examples/6/index.ts b/projects/demo/src/modules/components/input-tag/examples/6/index.ts
index bdcd8a575bf2..776f711eebe0 100644
--- a/projects/demo/src/modules/components/input-tag/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/6/index.ts
@@ -1,15 +1,30 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiGroupDirective,
+    TuiHintOptionsDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputModule, TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-6',
+    standalone: true,
+    imports: [
+        TuiGroupDirective,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        TuiInputModule,
+        TuiInputTagModule,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample6 {
+export default class ExampleComponent {
     protected value = ['not', 'unique', 'tags, with', 'custom', 'separator', 'separator'];
     protected customSeparator = ';';
 }
diff --git a/projects/demo/src/modules/components/input-tag/examples/7/index.ts b/projects/demo/src/modules/components/input-tag/examples/7/index.ts
index 583534913071..f328c96dc53c 100644
--- a/projects/demo/src/modules/components/input-tag/examples/7/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/7/index.ts
@@ -1,14 +1,18 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-7',
+    standalone: true,
+    imports: [TuiInputTagModule, FormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample7 {
+export default class ExampleComponent {
     protected value = ['Use', 'space', 'button'];
     protected customSeparator = /[\s,]/; // Use space or comma to create new tag
 }
diff --git a/projects/demo/src/modules/components/input-tag/examples/8/index.ts b/projects/demo/src/modules/components/input-tag/examples/8/index.ts
index 28bb5060d65d..6e3d1be56487 100644
--- a/projects/demo/src/modules/components/input-tag/examples/8/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/8/index.ts
@@ -1,16 +1,19 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-8',
+    standalone: true,
+    imports: [TuiInputTagModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample8 {
+export default class ExampleComponent {
     protected readonly control = new FormControl([
         'One',
         'Two',
diff --git a/projects/demo/src/modules/components/input-tag/examples/9/index.ts b/projects/demo/src/modules/components/input-tag/examples/9/index.ts
index 247eea340e77..31bccba4a64b 100644
--- a/projects/demo/src/modules/components/input-tag/examples/9/index.ts
+++ b/projects/demo/src/modules/components/input-tag/examples/9/index.ts
@@ -1,19 +1,28 @@
 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 {MaskitoDirective} from '@maskito/angular';
 import type {MaskitoOptions} from '@maskito/core';
 import {maskitoDateOptionsGenerator} from '@maskito/kit';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {TuiDay} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-tag-example-9',
+    standalone: true,
+    imports: [
+        TuiInputTagModule,
+        TuiTextfieldControllerModule,
+        ReactiveFormsModule,
+        MaskitoDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTagExample9 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<string[]>([]);
     protected readonly min = new Date(2000, 0, 1);
     protected readonly max = new Date(2025, 4, 10);
diff --git a/projects/demo/src/modules/components/input-tag/examples/import/import-module.md b/projects/demo/src/modules/components/input-tag/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/input-tag/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-tag/examples/import/import.md
diff --git a/projects/demo/src/modules/components/input-tag/examples/import/insert-template.md b/projects/demo/src/modules/components/input-tag/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-tag/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-tag/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.template.html b/projects/demo/src/modules/components/input-tag/index.html
similarity index 89%
rename from projects/demo/src/modules/components/input-tag/input-tag.template.html
rename to projects/demo/src/modules/components/input-tag/index.html
index e258ec86c4e6..c188bd8db372 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.template.html
+++ b/projects/demo/src/modules/components/input-tag/index.html
@@ -12,55 +12,50 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-input-tag-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="async"
             heading="Async items loading"
-            [content]="example2"
-        >
-            <tui-input-tag-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example3"
-        >
-            <tui-input-tag-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="validation"
             heading="Custom validation"
-            [content]="example4"
-        >
-            <tui-input-tag-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="rtl"
             heading="Direction: RTL"
-            [content]="example5"
-        >
-            <tui-input-tag-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
 
         <tui-doc-example
             id="separator"
             heading="Custom separator"
-            [content]="example6"
-        >
-            <tui-input-tag-example-6 />
-        </tui-doc-example>
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
+        />
 
         <tui-doc-example
             id="no-spaces-inside-tags"
             heading="No spaces inside tags"
-            [content]="example7"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
             [description]="forbidSpacesDescription"
         >
             <ng-template #forbidSpacesDescription>
@@ -68,13 +63,13 @@
                 <code>[separator]</code>
                 .
             </ng-template>
-            <tui-input-tag-example-7 />
         </tui-doc-example>
 
         <tui-doc-example
             id="expandable"
             heading="expandable"
-            [content]="example8"
+            [component]="8 | tuiComponent"
+            [content]="8 | tuiExample"
         >
             <div class="tui-space_bottom-3">
                 You can limit the number of visible rows with
@@ -83,17 +78,14 @@
                 <code>rows</code>
                 to 1 if you want single-line input with horizontal scrolling.
             </div>
-
-            <tui-input-tag-example-8 />
         </tui-doc-example>
 
         <tui-doc-example
             id="mask"
             heading="Mask"
-            [content]="example9"
-        >
-            <tui-input-tag-example-9 />
-        </tui-doc-example>
+            [component]="9 | tuiComponent"
+            [content]="9 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -264,10 +256,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-tag/index.ts b/projects/demo/src/modules/components/input-tag/index.ts
new file mode 100644
index 000000000000..1918dd24df1c
--- /dev/null
+++ b/projects/demo/src/modules/components/input-tag/index.ts
@@ -0,0 +1,99 @@
+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 {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
+import type {TuiBooleanHandler} from '@taiga-ui/cdk';
+import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, tuiProvide} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiHintOptionsDirective,
+    TuiLinkDirective,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import type {TuiStringifiableItem} from '@taiga-ui/legacy';
+import {TuiInputTagModule} from '@taiga-ui/legacy';
+
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiInputTagModule,
+        ReactiveFormsModule,
+        TuiDropdownOptionsDirective,
+        TuiDropdownOpenDirective,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        TuiLinkDirective,
+        RouterLink,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
+        tuiDocExcludeProperties([
+            'tuiTextfieldPrefix',
+            'tuiTextfieldPostfix',
+            'tuiTextfieldFiller',
+        ]),
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiControl {
+    public override readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = [
+        's',
+        'm',
+        'l',
+    ];
+
+    public override size: TuiSizeL | TuiSizeS =
+        this.sizeVariants[this.sizeVariants.length - 1];
+
+    public readonly control = new FormControl(
+        ['John Cleese', 'Eric Idle', 'Michael Palin'],
+        Validators.required,
+    );
+
+    public override maxLengthVariants: number[] = [10, 20];
+
+    public override maxLength: number | null = null;
+
+    protected editable = true;
+
+    protected uniqueTags = true;
+
+    protected readonly separatorVariants = [',', ';', /[\d]/, /[\s,]/];
+
+    protected separator = this.separatorVariants[0];
+
+    protected readonly iconVariants: readonly string[] = ['tuiIconSearchLarge'];
+
+    protected icon = '';
+
+    protected search = '';
+
+    protected rows = 100;
+
+    protected tagValidatorVariants: ReadonlyArray<TuiBooleanHandler<string>> = [
+        TUI_TRUE_HANDLER,
+        item => item === 'test',
+        item => item !== 'mail',
+    ];
+
+    protected tagValidator = this.tagValidatorVariants[0];
+
+    protected inputHidden = false;
+
+    protected readonly disabledItemHandlerVariants: Array<
+        TuiBooleanHandler<TuiStringifiableItem<string> | string>
+    > = [TUI_FALSE_HANDLER, item => String(item).startsWith('T')];
+
+    protected disabledItemHandler = this.disabledItemHandlerVariants[0];
+}
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.component.ts b/projects/demo/src/modules/components/input-tag/input-tag.component.ts
deleted file mode 100644
index 7cc1b5b3ee4f..000000000000
--- a/projects/demo/src/modules/components/input-tag/input-tag.component.ts
+++ /dev/null
@@ -1,128 +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';
-import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
-import type {TuiBooleanHandler} from '@taiga-ui/cdk';
-import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, tuiProvide} from '@taiga-ui/cdk';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import type {TuiStringifiableItem} from '@taiga-ui/legacy';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiControl} from '../abstract/control';
-
-@Component({
-    selector: 'example-input-tag',
-    templateUrl: './input-tag.template.html',
-    changeDetection,
-    providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputTagComponent),
-        tuiDocExcludeProperties([
-            'tuiTextfieldPrefix',
-            'tuiTextfieldPostfix',
-            'tuiTextfieldFiller',
-        ]),
-    ],
-})
-export class ExampleTuiInputTagComponent extends AbstractExampleTuiControl {
-    public override readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = [
-        's',
-        'm',
-        'l',
-    ];
-
-    public override size: TuiSizeL | TuiSizeS =
-        this.sizeVariants[this.sizeVariants.length - 1];
-
-    public readonly control = new FormControl(
-        ['John Cleese', 'Eric Idle', 'Michael Palin'],
-        Validators.required,
-    );
-
-    public override maxLengthVariants: number[] = [10, 20];
-
-    public override maxLength: number | 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'),
-        LESS: import('./examples/6/index.less?raw'),
-    };
-
-    protected readonly example7: TuiDocExample = {
-        TypeScript: import('./examples/7/index.ts?raw'),
-        HTML: import('./examples/7/index.html?raw'),
-    };
-
-    protected readonly example8: TuiDocExample = {
-        TypeScript: import('./examples/8/index.ts?raw'),
-        HTML: import('./examples/8/index.html?raw'),
-        LESS: import('./examples/8/index.less?raw'),
-    };
-
-    protected readonly example9: TuiDocExample = {
-        TypeScript: import('./examples/9/index.ts?raw'),
-        HTML: import('./examples/9/index.html?raw'),
-    };
-
-    protected editable = true;
-
-    protected uniqueTags = true;
-
-    protected readonly separatorVariants = [',', ';', /[\d]/, /[\s,]/];
-
-    protected separator = this.separatorVariants[0];
-
-    protected readonly iconVariants: readonly string[] = ['tuiIconSearchLarge'];
-
-    protected icon = '';
-
-    protected search = '';
-
-    protected rows = 100;
-
-    protected tagValidatorVariants: ReadonlyArray<TuiBooleanHandler<string>> = [
-        TUI_TRUE_HANDLER,
-        item => item === 'test',
-        item => item !== 'mail',
-    ];
-
-    protected tagValidator = this.tagValidatorVariants[0];
-
-    protected inputHidden = false;
-
-    protected readonly disabledItemHandlerVariants: Array<
-        TuiBooleanHandler<TuiStringifiableItem<string> | string>
-    > = [TUI_FALSE_HANDLER, item => String(item).startsWith('T')];
-
-    protected disabledItemHandler = this.disabledItemHandlerVariants[0];
-}
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.module.ts b/projects/demo/src/modules/components/input-tag/input-tag.module.ts
deleted file mode 100644
index 649292f31d77..000000000000
--- a/projects/demo/src/modules/components/input-tag/input-tag.module.ts
+++ /dev/null
@@ -1,68 +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 {MaskitoDirective} from '@maskito/angular';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiDataList,
-    TuiDropdownModule,
-    TuiErrorComponent,
-    TuiGroupDirective,
-    TuiHint,
-    TuiLinkDirective,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiDataListWrapper, TuiFieldErrorPipe} from '@taiga-ui/kit';
-import {TuiInputModule, TuiInputTagModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputTagExample1} from './examples/1';
-import {TuiInputTagExample2} from './examples/2';
-import {TuiInputTagExample3} from './examples/3';
-import {TuiInputTagExample4} from './examples/4';
-import {TuiInputTagExample5} from './examples/5';
-import {TuiInputTagExample6} from './examples/6';
-import {TuiInputTagExample7} from './examples/7';
-import {TuiInputTagExample8} from './examples/8';
-import {TuiInputTagExample9} from './examples/9';
-import {ExampleTuiInputTagComponent} from './input-tag.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        InheritedDocumentationComponent,
-        TuiDataList,
-        TuiDataListWrapper,
-        TuiLinkDirective,
-        TuiInputModule,
-        TuiGroupDirective,
-        TuiInputTagModule,
-        TuiErrorComponent,
-        TuiFieldErrorPipe,
-        TuiDropdownModule,
-        TuiTextfieldControllerModule,
-        TuiHint,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputTagComponent)),
-        MaskitoDirective,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiInputTagComponent,
-        TuiInputTagExample1,
-        TuiInputTagExample2,
-        TuiInputTagExample3,
-        TuiInputTagExample4,
-        TuiInputTagExample5,
-        TuiInputTagExample6,
-        TuiInputTagExample7,
-        TuiInputTagExample8,
-        TuiInputTagExample9,
-    ],
-    exports: [ExampleTuiInputTagComponent],
-})
-export class ExampleTuiInputTagModule {}
diff --git a/projects/demo/src/modules/components/input-time/examples/1/index.ts b/projects/demo/src/modules/components/input-time/examples/1/index.ts
index 72608cef30bd..85bc778cd7c3 100644
--- a/projects/demo/src/modules/components/input-time/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/1/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 {TuiTime} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiUnfinishedValidatorDirective} from '@taiga-ui/kit';
+import {TuiInputTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-1',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputTimeModule,
+        TuiTextfieldControllerModule,
+        TuiUnfinishedValidatorDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTimeExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(new TuiTime(12, 30)),
     });
diff --git a/projects/demo/src/modules/components/input-time/examples/2/index.ts b/projects/demo/src/modules/components/input-time/examples/2/index.ts
index e32c3d1b24c3..9fcd93ed601a 100644
--- a/projects/demo/src/modules/components/input-time/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/2/index.ts
@@ -1,17 +1,19 @@
 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 type {TuiTime} from '@taiga-ui/cdk';
 import {tuiCreateTimePeriods} from '@taiga-ui/kit';
+import {TuiInputTimeModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputTimeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputTimeExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiTime | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-time/examples/3/index.ts b/projects/demo/src/modules/components/input-time/examples/3/index.ts
index 50e5eb6bfbe6..6c008a1bd5ac 100644
--- a/projects/demo/src/modules/components/input-time/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/3/index.ts
@@ -1,13 +1,14 @@
 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 type {TuiTime} from '@taiga-ui/cdk';
 import {tuiCreateTimePeriods} from '@taiga-ui/kit';
-import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
+import {TuiInputTimeModule, tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-3',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputTimeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -19,7 +20,7 @@ import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
         }),
     ],
 })
-export class TuiInputTimeExample3 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiTime | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-time/examples/4/index.ts b/projects/demo/src/modules/components/input-time/examples/4/index.ts
index d956e6b2ad6d..b5f5a5e52aa4 100644
--- a/projects/demo/src/modules/components/input-time/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/4/index.ts
@@ -1,12 +1,14 @@
 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 type {TuiTime} from '@taiga-ui/cdk';
-import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputTimeModule, tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-4',
+    standalone: true,
+    imports: [TuiTextfieldControllerModule, ReactiveFormsModule, TuiInputTimeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -17,7 +19,7 @@ import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
         }),
     ],
 })
-export class TuiInputTimeExample4 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiTime | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-time/examples/5/index.ts b/projects/demo/src/modules/components/input-time/examples/5/index.ts
index db9b7711b561..9724354b85a6 100644
--- a/projects/demo/src/modules/components/input-time/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/5/index.ts
@@ -1,12 +1,20 @@
 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 type {TuiTime} from '@taiga-ui/cdk';
-import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiSwitchComponent} from '@taiga-ui/kit';
+import {TuiInputTimeModule, tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-5',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TuiInputTimeModule,
+        TuiTextfieldControllerModule,
+        TuiSwitchComponent,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -17,7 +25,7 @@ import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
         }),
     ],
 })
-export class TuiInputTimeExample5 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<TuiTime | null>(null),
         isPm: new FormControl(false),
diff --git a/projects/demo/src/modules/components/input-time/examples/6/index.ts b/projects/demo/src/modules/components/input-time/examples/6/index.ts
index b97d087a7b0b..2130554be772 100644
--- a/projects/demo/src/modules/components/input-time/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-time/examples/6/index.ts
@@ -1,13 +1,15 @@
 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 {TuiTime} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {tuiCreateTimePeriods} from '@taiga-ui/kit';
-import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
+import {TuiInputTimeModule, tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-input-time-example-6',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputTimeModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -17,7 +19,7 @@ import {tuiInputTimeOptionsProvider} from '@taiga-ui/legacy';
         }),
     ],
 })
-export class TuiInputTimeExample6 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(new TuiTime(10, 30)),
         testValue2: new FormControl(new TuiTime(10, 30, 0)),
diff --git a/projects/demo/src/modules/components/input-time/examples/import/declare-form.md b/projects/demo/src/modules/components/input-time/examples/import/declare-form.md
deleted file mode 100644
index 0e7ae208ed42..000000000000
--- a/projects/demo/src/modules/components/input-time/examples/import/declare-form.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-import {TuiTime} from '@taiga-ui/core';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(new TuiTime(12, 30)),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-time/examples/import/define-options.md b/projects/demo/src/modules/components/input-time/examples/import/define-options.md
deleted file mode 100644
index 86713cc20d7f..000000000000
--- a/projects/demo/src/modules/components/input-time/examples/import/define-options.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import {TUI_INPUT_TIME_OPTIONS} from '@taiga-ui/kit';
-
-// ...
-
-@Component({
-  standalone: true,
-  providers: [
-    {
-      provide: TUI_INPUT_TIME_OPTIONS,
-      useValue: {
-        icon: 'tuiIconCheckCircleLarge',
-        mode: 'HH:MM:SS',
-        itemSize: 's',
-      },
-    },
-  ],
-  // ...
-})
-export class MyComponent {}
-```
diff --git a/projects/demo/src/modules/components/input-time/examples/import/import-module.md b/projects/demo/src/modules/components/input-time/examples/import/import-module.md
deleted file mode 100644
index 19ca18ccda1c..000000000000
--- a/projects/demo/src/modules/components/input-time/examples/import/import-module.md
+++ /dev/null
@@ -1,18 +0,0 @@
-```ts
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputTimeModule} from '@taiga-ui/legacy';
-
-// ...
-
-@Component({
-  standalone: true,
-  imports: [
-    // ...
-    FormsModule,
-    ReactiveFormsModule,
-    TuiInputTimeModule,
-  ],
-  // ...
-})
-export class MyComponent {}
-```
diff --git a/projects/demo/src/modules/components/input-time/examples/import/import.md b/projects/demo/src/modules/components/input-time/examples/import/import.md
new file mode 100644
index 000000000000..8edf2cf5fa6b
--- /dev/null
+++ b/projects/demo/src/modules/components/input-time/examples/import/import.md
@@ -0,0 +1,31 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiInputTimeModule} from '@taiga-ui/legacy';
+
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputTimeModule,
+  ],
+  providers: [
+    {
+      provide: TUI_INPUT_TIME_OPTIONS,
+      useValue: {
+        icon: 'tuiIconCheckCircleLarge',
+        mode: 'HH:MM:SS',
+        itemSize: 's',
+      },
+    },
+  ],
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(new TuiTime(12, 30)),
+  });
+}
+```
diff --git a/projects/demo/src/modules/components/input-time/examples/import/insert-template.md b/projects/demo/src/modules/components/input-time/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-time/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-time/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-time/input-time.template.html b/projects/demo/src/modules/components/input-time/index.html
similarity index 71%
rename from projects/demo/src/modules/components/input-time/input-time.template.html
rename to projects/demo/src/modules/components/input-time/index.html
index 369d74edc5e3..5736669bf9bc 100644
--- a/projects/demo/src/modules/components/input-time/input-time.template.html
+++ b/projects/demo/src/modules/components/input-time/index.html
@@ -12,53 +12,48 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-input-time-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="dropdown"
             description="You can set items for dropdown"
             heading="Dropdown"
-            [content]="example2"
-        >
-            <tui-input-time-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="options"
             heading="Options (icon)"
-            [content]="example3"
-        >
-            <tui-input-time-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="options-max"
             heading="Options (max values)"
-            [content]="example4"
-        >
-            <tui-input-time-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="options-max-and-postfix"
             heading="Options (max values and postfix)"
-            [content]="example5"
-        >
-            <tui-input-time-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="native"
             heading="Native input time"
-            [content]="example6"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-5">
                 Please note that iOS Safari doesn't support native picker in modes other than HH:MM
             </tui-notification>
-            <tui-input-time-example-6 />
         </tui-doc-example>
     </ng-template>
 
@@ -168,57 +163,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputTimeModule</code>
-                    in the same 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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </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>
-                    Optionally use the
-                    <code>TUI_INPUT_TIME_OPTIONS</code>
-                    injection token to override the default options for the component.
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleOptions"
-                />
-            </li>
-        </ol>
-    </ng-template>
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/input-time/index.ts b/projects/demo/src/modules/components/input-time/index.ts
new file mode 100644
index 000000000000..f2f2c7c82b36
--- /dev/null
+++ b/projects/demo/src/modules/components/input-time/index.ts
@@ -0,0 +1,79 @@
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
+import type {TuiBooleanHandler, TuiTimeMode} from '@taiga-ui/cdk';
+import {TUI_FALSE_HANDLER, tuiProvide, TuiTime} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {
+    TuiDropdownOptionsDirective,
+    TuiHintOptionsDirective,
+    TuiNotificationComponent,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {tuiCreateTimePeriods} from '@taiga-ui/kit';
+import {TuiInputTimeModule} from '@taiga-ui/legacy';
+
+import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputTimeModule,
+        ReactiveFormsModule,
+        TuiDropdownOptionsDirective,
+        TuiHintOptionsDirective,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+    providers: [
+        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
+        tuiDocExcludeProperties(['tuiTextfieldFiller']),
+    ],
+})
+export default class PageComponent extends AbstractExampleTuiControl {
+    public override cleaner = false;
+
+    public control = new FormControl(TuiTime.currentLocal(), Validators.required);
+
+    protected readonly disabledItemHandlerVariants: ReadonlyArray<
+        TuiBooleanHandler<TuiTime>
+    > = [
+        TUI_FALSE_HANDLER,
+        (item: TuiTime) => String(item) === '06:00' || item > TuiTime.currentLocal(),
+    ];
+
+    protected disabledItemHandler = this.disabledItemHandlerVariants[0];
+
+    protected readonly itemSizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = [
+        's',
+        'm',
+        'l',
+    ];
+
+    protected itemSize: TuiSizeL | TuiSizeS = this.itemSizeVariants[1];
+
+    protected readonly itemsVariants: ReadonlyArray<readonly TuiTime[]> = [
+        [],
+        tuiCreateTimePeriods(),
+    ];
+
+    protected items = this.itemsVariants[0];
+
+    protected strict = false;
+
+    protected readonly modeVariants: readonly TuiTimeMode[] = [
+        'HH:MM',
+        'HH:MM:SS',
+        'HH:MM:SS.MSS',
+    ];
+
+    protected mode = this.modeVariants[0];
+}
diff --git a/projects/demo/src/modules/components/input-time/input-time.component.ts b/projects/demo/src/modules/components/input-time/input-time.component.ts
deleted file mode 100644
index 2885198e5475..000000000000
--- a/projects/demo/src/modules/components/input-time/input-time.component.ts
+++ /dev/null
@@ -1,99 +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';
-import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
-import type {TuiBooleanHandler, TuiTimeMode} from '@taiga-ui/cdk';
-import {TUI_FALSE_HANDLER, tuiProvide, TuiTime} from '@taiga-ui/cdk';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {tuiCreateTimePeriods} from '@taiga-ui/kit';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiControl} from '../abstract/control';
-
-@Component({
-    selector: 'example-tui-input-time',
-    templateUrl: './input-time.template.html',
-    changeDetection,
-    providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputTimeComponent),
-        tuiDocExcludeProperties(['tuiTextfieldFiller']),
-    ],
-})
-export class ExampleTuiInputTimeComponent extends AbstractExampleTuiControl {
-    public override cleaner = false;
-
-    public control = new FormControl(TuiTime.currentLocal(), Validators.required);
-
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-
-    protected readonly exampleOptions = import('./examples/import/define-options.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'),
-    };
-
-    protected readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-    };
-
-    protected readonly disabledItemHandlerVariants: ReadonlyArray<
-        TuiBooleanHandler<TuiTime>
-    > = [
-        TUI_FALSE_HANDLER,
-        (item: TuiTime) => String(item) === '06:00' || item > TuiTime.currentLocal(),
-    ];
-
-    protected disabledItemHandler = this.disabledItemHandlerVariants[0];
-
-    protected readonly itemSizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = [
-        's',
-        'm',
-        'l',
-    ];
-
-    protected itemSize: TuiSizeL | TuiSizeS = this.itemSizeVariants[1];
-
-    protected readonly itemsVariants: ReadonlyArray<readonly TuiTime[]> = [
-        [],
-        tuiCreateTimePeriods(),
-    ];
-
-    protected items = this.itemsVariants[0];
-
-    protected strict = false;
-
-    protected readonly modeVariants: readonly TuiTimeMode[] = [
-        'HH:MM',
-        'HH:MM:SS',
-        'HH:MM:SS.MSS',
-    ];
-
-    protected mode = this.modeVariants[0];
-}
diff --git a/projects/demo/src/modules/components/input-time/input-time.module.ts b/projects/demo/src/modules/components/input-time/input-time.module.ts
deleted file mode 100644
index 01c7e45dee0a..000000000000
--- a/projects/demo/src/modules/components/input-time/input-time.module.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiDropdownModule,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiSwitchComponent, TuiUnfinishedValidatorDirective} from '@taiga-ui/kit';
-import {TuiInputTimeModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {TuiInputTimeExample1} from './examples/1';
-import {TuiInputTimeExample2} from './examples/2';
-import {TuiInputTimeExample3} from './examples/3';
-import {TuiInputTimeExample4} from './examples/4';
-import {TuiInputTimeExample5} from './examples/5';
-import {TuiInputTimeExample6} from './examples/6';
-import {ExampleTuiInputTimeComponent} from './input-time.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputTimeModule,
-        TuiLinkDirective,
-        InheritedDocumentationComponent,
-        TuiButtonDirective,
-        TuiDropdownModule,
-        TuiTextfieldControllerModule,
-        TuiNotificationComponent,
-        TuiHint,
-        TuiSwitchComponent,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputTimeComponent)),
-        TuiUnfinishedValidatorDirective,
-    ],
-    declarations: [
-        ExampleTuiInputTimeComponent,
-        TuiInputTimeExample1,
-        TuiInputTimeExample2,
-        TuiInputTimeExample3,
-        TuiInputTimeExample4,
-        TuiInputTimeExample5,
-        TuiInputTimeExample6,
-    ],
-    exports: [ExampleTuiInputTimeComponent],
-})
-export class ExampleTuiInputTimeModule {}
diff --git a/projects/demo/src/modules/components/input-year/examples/1/index.ts b/projects/demo/src/modules/components/input-year/examples/1/index.ts
index 5e68c0787c83..c1e1edd2992a 100644
--- a/projects/demo/src/modules/components/input-year/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-year/examples/1/index.ts
@@ -1,14 +1,17 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputYearModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'input-year-example-1',
+    standalone: true,
+    imports: [TuiInputYearModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class InputYearExample1 {
+export default class ExampleComponent {
     protected readonly control = new FormControl<number | null>(null);
 }
diff --git a/projects/demo/src/modules/components/input-year/examples/2/index.ts b/projects/demo/src/modules/components/input-year/examples/2/index.ts
index f14e1e5c8b25..7f873bf4a879 100644
--- a/projects/demo/src/modules/components/input-year/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-year/examples/2/index.ts
@@ -1,15 +1,18 @@
 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 {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputYearModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'input-year-example-2',
+    standalone: true,
+    imports: [ReactiveFormsModule, TuiInputYearModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class InputYearExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl<number | null>(null),
     });
diff --git a/projects/demo/src/modules/components/input-year/examples/import/declare-form.md b/projects/demo/src/modules/components/input-year/examples/import/declare-form.md
deleted file mode 100644
index 8a040b886834..000000000000
--- a/projects/demo/src/modules/components/input-year/examples/import/declare-form.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-// ...
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  readonly testForm = new FormGroup({
-    testValue: new FormControl(null),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-year/examples/import/import-module.md b/projects/demo/src/modules/components/input-year/examples/import/import.md
similarity index 60%
rename from projects/demo/src/modules/components/input-year/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-year/examples/import/import.md
index 823f37bd352d..2bc0329368e9 100644
--- a/projects/demo/src/modules/components/input-year/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-year/examples/import/import.md
@@ -11,5 +11,9 @@ import {TuiInputYearModule} from '@taiga-ui/legacy';
   ],
   // ...
 })
-export class MyComponent {}
+export class MyComponent {
+  readonly testForm = new FormGroup({
+    testValue: new FormControl(null),
+  });
+}
 ```
diff --git a/projects/demo/src/modules/components/input-year/examples/import/insert-template.md b/projects/demo/src/modules/components/input-year/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-year/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-year/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-year/input-year.template.html b/projects/demo/src/modules/components/input-year/index.html
similarity index 75%
rename from projects/demo/src/modules/components/input-year/input-year.template.html
rename to projects/demo/src/modules/components/input-year/index.html
index 1b6a04b5444f..8ed5ffc2fdec 100644
--- a/projects/demo/src/modules/components/input-year/input-year.template.html
+++ b/projects/demo/src/modules/components/input-year/index.html
@@ -9,7 +9,8 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
@@ -18,16 +19,14 @@
                 <code>Textfield</code>
                 directive as shown below
             </tui-notification>
-            <input-year-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example2"
-        >
-            <input-year-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -111,44 +110,5 @@
         </tui-doc-documentation>
     </ng-template>
 
-    <ng-template pageTab>
-        <ol class="tui-list tui-list_ordered">
-            <li class="tui-list__item">
-                <p>
-                    Import
-                    <code>TuiInputYearModule</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>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </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/components/input-year/input-year.component.ts b/projects/demo/src/modules/components/input-year/index.ts
similarity index 51%
rename from projects/demo/src/modules/components/input-year/input-year.component.ts
rename to projects/demo/src/modules/components/input-year/index.ts
index c4ebfa266a1b..5c70003a8920 100644
--- a/projects/demo/src/modules/components/input-year/input-year.component.ts
+++ b/projects/demo/src/modules/components/input-year/index.ts
@@ -1,38 +1,35 @@
 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 type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiDemo} from '@demo/utils';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {TUI_FALSE_HANDLER, TUI_FIRST_DAY, TUI_LAST_DAY, tuiProvide} from '@taiga-ui/cdk';
+import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputYearModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
 
 @Component({
-    selector: 'example-input-year',
-    templateUrl: './input-year.template.html',
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiInputYearModule,
+        ReactiveFormsModule,
+        TuiTextfieldControllerModule,
+        InheritedDocumentationComponent,
+    ],
+    templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleInputYearComponent)],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export class ExampleInputYearComponent extends AbstractExampleTuiControl {
+export default class PageComponent extends AbstractExampleTuiControl {
     public override cleaner = false;
 
     public control = new FormControl<number | null>(null, Validators.required);
 
-    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 exampleModule = import('./examples/import/import-module.md?raw');
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-
     protected readonly minVariants = [TUI_FIRST_DAY.year, 2019, 2007];
     protected readonly maxVariants = [TUI_LAST_DAY.year, 2020, 2023];
 
diff --git a/projects/demo/src/modules/components/input-year/input-year.module.ts b/projects/demo/src/modules/components/input-year/input-year.module.ts
deleted file mode 100644
index 42cb7e41eac2..000000000000
--- a/projects/demo/src/modules/components/input-year/input-year.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {TuiInputYearModule} from '@taiga-ui/legacy';
-
-import {InheritedDocumentationComponent} from '../abstract/inherited-documentation';
-import {InputYearExample1} from './examples/1';
-import {InputYearExample2} from './examples/2';
-import {ExampleInputYearComponent} from './input-year.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        TuiAddonDoc,
-        InheritedDocumentationComponent,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleInputYearComponent)),
-        TuiInputYearModule,
-        TuiTextfieldControllerModule,
-        TuiNotificationComponent,
-    ],
-    declarations: [ExampleInputYearComponent, InputYearExample1, InputYearExample2],
-    exports: [ExampleInputYearComponent],
-})
-export class ExampleInputYearModule {}
diff --git a/projects/demo/src/modules/components/items-with-more/examples/1/index.ts b/projects/demo/src/modules/components/items-with-more/examples/1/index.ts
index 26e6737e6c2a..b80f7e79fabf 100644
--- a/projects/demo/src/modules/components/items-with-more/examples/1/index.ts
+++ b/projects/demo/src/modules/components/items-with-more/examples/1/index.ts
@@ -1,14 +1,28 @@
+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 {
+    TuiChipDirective,
+    TuiItemsWithMoreComponent,
+    TuiMoreDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-items-with-more-example-1',
+    standalone: true,
+    imports: [
+        TuiItemsWithMoreComponent,
+        TuiChipDirective,
+        TuiItemDirective,
+        TuiMoreDirective,
+        NgForOf,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiItemsWithMoreExample1 {
+export default class PageComponent {
     protected readonly items = [
         'John Cleese',
         'Eric Idle',
diff --git a/projects/demo/src/modules/components/items-with-more/examples/2/index.ts b/projects/demo/src/modules/components/items-with-more/examples/2/index.ts
index bd2e56ca17ca..f641ef473ada 100644
--- a/projects/demo/src/modules/components/items-with-more/examples/2/index.ts
+++ b/projects/demo/src/modules/components/items-with-more/examples/2/index.ts
@@ -1,16 +1,52 @@
+import {NgForOf, 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 {TUI_FALSE_HANDLER} from '@taiga-ui/cdk';
+import {TUI_FALSE_HANDLER, TuiItemDirective} from '@taiga-ui/cdk';
+import {
+    TuiButtonDirective,
+    TuiDataListComponent,
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiGroupDirective,
+    TuiOptionComponent,
+    TuiSvgComponent,
+} from '@taiga-ui/core';
+import {
+    TuiBadgeDirective,
+    TuiBlockDirective,
+    TuiItemsWithMoreComponent,
+    TuiMoreDirective,
+} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-items-with-more-example-2',
+    standalone: true,
+    imports: [
+        TuiGroupDirective,
+        TuiItemsWithMoreComponent,
+        TuiItemDirective,
+        TuiBlockDirective,
+        NgForOf,
+        FormsModule,
+        TuiMoreDirective,
+        TuiDropdownOpenDirective,
+        TuiDropdownOptionsDirective,
+        TuiButtonDirective,
+        TuiDropdownDirective,
+        TuiBadgeDirective,
+        TuiDataListComponent,
+        NgIf,
+        TuiOptionComponent,
+        TuiSvgComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiItemsWithMoreExample2 {
+export default class PageComponent {
     protected readonly items = [
         'John Cleese',
         'Eric Idle',
diff --git a/projects/demo/src/modules/components/items-with-more/examples/import/import-module.md b/projects/demo/src/modules/components/items-with-more/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/items-with-more/examples/import/import-module.md
rename to projects/demo/src/modules/components/items-with-more/examples/import/import.md
diff --git a/projects/demo/src/modules/components/items-with-more/examples/import/insert-template.md b/projects/demo/src/modules/components/items-with-more/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/items-with-more/examples/import/insert-template.md
rename to projects/demo/src/modules/components/items-with-more/examples/import/template.md
diff --git a/projects/demo/src/modules/components/items-with-more/items-with-more.template.html b/projects/demo/src/modules/components/items-with-more/index.html
similarity index 90%
rename from projects/demo/src/modules/components/items-with-more/items-with-more.template.html
rename to projects/demo/src/modules/components/items-with-more/index.html
index 70454c683aeb..9a634a12c840 100644
--- a/projects/demo/src/modules/components/items-with-more/items-with-more.template.html
+++ b/projects/demo/src/modules/components/items-with-more/index.html
@@ -9,23 +9,22 @@
         <tui-doc-example
             id="base"
             heading="Basic"
+            [component]="1 | tuiComponent"
             [content]="1 | tuiExample: 'html'"
             [fullsize]="true"
         >
             <tui-notification class="tui-space_bottom-3">
                 Resize the screen to see extra items disappear
             </tui-notification>
-            <tui-items-with-more-example-1 />
         </tui-doc-example>
 
         <tui-doc-example
             id="dropdown"
             heading="Dropdown"
+            [component]="2 | tuiComponent"
             [content]="2 | tuiExample"
             [fullsize]="true"
-        >
-            <tui-items-with-more-example-2 />
-        </tui-doc-example>
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -77,10 +76,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/items-with-more/index.ts b/projects/demo/src/modules/components/items-with-more/index.ts
new file mode 100644
index 000000000000..f0ede94905ec
--- /dev/null
+++ b/projects/demo/src/modules/components/items-with-more/index.ts
@@ -0,0 +1,42 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiItemDirective} from '@taiga-ui/cdk';
+import {TuiNotificationComponent} from '@taiga-ui/core';
+import {
+    TuiChipDirective,
+    TuiItemsWithMoreComponent,
+    TuiMoreDirective,
+} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiDemo,
+        TuiNotificationComponent,
+        TuiItemsWithMoreComponent,
+        TuiChipDirective,
+        TuiItemDirective,
+        TuiMoreDirective,
+    ],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {
+    protected readonly items = [
+        'John Cleese',
+        'Eric Idle',
+        'Graham Chapman',
+        'Michael Palin',
+        'Terry Gilliam',
+        'Terry Jones',
+    ];
+
+    protected readonly requiredVariants = [-1, 2, 4];
+
+    protected readonly itemsLimitVariants = [Infinity, 4, 2];
+
+    protected required = this.requiredVariants[0];
+
+    protected itemsLimit = this.itemsLimitVariants[0];
+}
diff --git a/projects/demo/src/modules/components/items-with-more/items-with-more.component.ts b/projects/demo/src/modules/components/items-with-more/items-with-more.component.ts
deleted file mode 100644
index 19fc1dfac412..000000000000
--- a/projects/demo/src/modules/components/items-with-more/items-with-more.component.ts
+++ /dev/null
@@ -1,41 +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-items-with-more',
-    templateUrl: './items-with-more.template.html',
-    changeDetection,
-})
-export class ExampleTuiItemsWithMoreComponent {
-    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 items = [
-        'John Cleese',
-        'Eric Idle',
-        'Graham Chapman',
-        'Michael Palin',
-        'Terry Gilliam',
-        'Terry Jones',
-    ];
-
-    protected readonly requiredVariants = [-1, 2, 4];
-
-    protected readonly itemsLimitVariants = [Infinity, 4, 2];
-
-    protected required = this.requiredVariants[0];
-
-    protected itemsLimit = this.itemsLimitVariants[0];
-}
diff --git a/projects/demo/src/modules/components/items-with-more/items-with-more.module.ts b/projects/demo/src/modules/components/items-with-more/items-with-more.module.ts
deleted file mode 100644
index 6fa24ae97090..000000000000
--- a/projects/demo/src/modules/components/items-with-more/items-with-more.module.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiGroupDirective,
-    TuiNotificationComponent,
-    TuiSvgComponent,
-} from '@taiga-ui/core';
-import {
-    TuiBadgeDirective,
-    TuiBlockDirective,
-    TuiChipDirective,
-    TuiItemsWithMore,
-} from '@taiga-ui/kit';
-
-import {TuiItemsWithMoreExample1} from './examples/1';
-import {TuiItemsWithMoreExample2} from './examples/2';
-import {ExampleTuiItemsWithMoreComponent} from './items-with-more.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        TuiGroupDirective,
-        TuiChipDirective,
-        TuiNotificationComponent,
-        TuiItemsWithMore,
-        TuiBadgeDirective,
-        TuiDropdownModule,
-        TuiButtonDirective,
-        TuiDataList,
-        TuiSvgComponent,
-        TuiBlockDirective,
-        tuiGetDocModules(ExampleTuiItemsWithMoreComponent),
-        TuiExamplePipe,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiItemsWithMoreComponent,
-        TuiItemsWithMoreExample1,
-        TuiItemsWithMoreExample2,
-    ],
-    exports: [ExampleTuiItemsWithMoreComponent],
-})
-export class ExampleTuiItemsWithMoreModule {}
diff --git a/projects/demo/src/modules/components/line-clamp/examples/1/index.ts b/projects/demo/src/modules/components/line-clamp/examples/1/index.ts
index c90f295dfa68..fb9537d087be 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/1/index.ts
+++ b/projects/demo/src/modules/components/line-clamp/examples/1/index.ts
@@ -1,17 +1,21 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TUI_IS_E2E} from '@taiga-ui/cdk';
+import {TuiNotificationComponent} from '@taiga-ui/core';
+import {TuiLineClampComponent} from '@taiga-ui/kit';
 import {map, timer} from 'rxjs';
 
 @Component({
-    selector: 'tui-line-clamp-example-1',
+    standalone: true,
+    imports: [TuiLineClampComponent, TuiNotificationComponent, NgIf, AsyncPipe],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiLineClampExample1 {
+export default class ExampleComponent {
     private readonly isE2E = inject(TUI_IS_E2E);
 
     protected value$ = timer(this.isE2E ? 0 : 4000).pipe(
diff --git a/projects/demo/src/modules/components/line-clamp/examples/2/index.ts b/projects/demo/src/modules/components/line-clamp/examples/2/index.ts
index 429e02627352..8a54a076d5f3 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/2/index.ts
+++ b/projects/demo/src/modules/components/line-clamp/examples/2/index.ts
@@ -1,15 +1,18 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiLineClampComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-line-clamp-example-2',
+    standalone: true,
+    imports: [TuiLineClampComponent, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiLineClampExample2 {
+export default class ExampleComponent {
     protected linesLimit = 2;
 
     protected toggle(): void {
diff --git a/projects/demo/src/modules/components/line-clamp/examples/3/index.ts b/projects/demo/src/modules/components/line-clamp/examples/3/index.ts
index 9874e2eb500d..7cbe4eeb29cd 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/3/index.ts
+++ b/projects/demo/src/modules/components/line-clamp/examples/3/index.ts
@@ -2,15 +2,17 @@ import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {WINDOW} from '@ng-web-apis/common';
+import {TuiLineClampComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-line-clamp-example-3',
+    standalone: true,
+    imports: [TuiLineClampComponent],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiLineClampExample3 {
+export default class ExampleComponent {
     private readonly win = inject(WINDOW);
 
     protected getDynamicLineHeight(element: HTMLDivElement): number {
diff --git a/projects/demo/src/modules/components/line-clamp/examples/4/index.ts b/projects/demo/src/modules/components/line-clamp/examples/4/index.ts
index 5a761adf5613..06f61f04d337 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/4/index.ts
+++ b/projects/demo/src/modules/components/line-clamp/examples/4/index.ts
@@ -1,6 +1,21 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiActiveZoneDirective} from '@taiga-ui/cdk';
+import {
+    TuiDropdownDirective,
+    TuiDropdownOpenDirective,
+    TuiDropdownOptionsDirective,
+    TuiLinkDirective,
+    TuiOptGroupDirective,
+    TuiOptionComponent,
+} from '@taiga-ui/core';
+import {
+    TuiChevronDirective,
+    TuiDataListDropdownManagerDirective,
+    TuiLineClampComponent,
+} from '@taiga-ui/kit';
 
 function randomString(len: number): string {
     const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -17,13 +32,26 @@ function randomString(len: number): string {
 }
 
 @Component({
-    selector: 'tui-line-clamp-example-4',
+    standalone: true,
+    imports: [
+        TuiChevronDirective,
+        TuiLinkDirective,
+        TuiDropdownOptionsDirective,
+        TuiDropdownDirective,
+        TuiDropdownOpenDirective,
+        TuiDataListDropdownManagerDirective,
+        TuiActiveZoneDirective,
+        TuiOptGroupDirective,
+        NgForOf,
+        TuiOptionComponent,
+        TuiLineClampComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiLineClampExample4 {
+export default class ExampleComponent {
     protected open = false;
     protected texts = [
         randomString(100),
diff --git a/projects/demo/src/modules/components/line-clamp/examples/5/index.ts b/projects/demo/src/modules/components/line-clamp/examples/5/index.ts
index 0d8186052450..bcbfeb0dd7fe 100644
--- a/projects/demo/src/modules/components/line-clamp/examples/5/index.ts
+++ b/projects/demo/src/modules/components/line-clamp/examples/5/index.ts
@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiHintDirective} from '@taiga-ui/core';
+import {TuiLineClampComponent} from '@taiga-ui/kit';
 
 interface User {
     email: string;
@@ -10,13 +12,14 @@ interface User {
 }
 
 @Component({
-    selector: 'tui-line-clamp-example-5',
+    standalone: true,
+    imports: [TuiLineClampComponent, TuiHintDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiLineClampExample5 {
+export default class ExampleComponent {
     protected readonly user: User = {
         id: '5a006cb3-2b69-4b23',
         email: 'extremely.long.information@example.com',
diff --git a/projects/demo/src/modules/components/line-clamp/examples/import/import-module.md b/projects/demo/src/modules/components/line-clamp/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/components/line-clamp/examples/import/import-module.md
rename to projects/demo/src/modules/components/line-clamp/examples/import/import.md
diff --git a/projects/demo/src/modules/components/line-clamp/examples/import/insert-template.md b/projects/demo/src/modules/components/line-clamp/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/line-clamp/examples/import/insert-template.md
rename to projects/demo/src/modules/components/line-clamp/examples/import/template.md
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/index.html
similarity index 83%
rename from projects/demo/src/modules/components/line-clamp/line-clamp.template.html
rename to projects/demo/src/modules/components/line-clamp/index.html
index b7480601225f..fa5cd321b78e 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
+++ b/projects/demo/src/modules/components/line-clamp/index.html
@@ -9,42 +9,37 @@
         <tui-doc-example
             id="basic"
             heading="Styles change"
-            [content]="example1"
-        >
-            <tui-line-clamp-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
 
         <tui-doc-example
             id="expand"
             heading="Expanding"
-            [content]="example2"
-        >
-            <tui-line-clamp-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="resize"
             heading="Resize parent container"
-            [content]="example3"
-        >
-            <tui-line-clamp-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="clamp-dropdown"
             heading="Clamp inside dropdown"
-            [content]="example4"
-        >
-            <tui-line-clamp-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
+        />
 
         <tui-doc-example
             id="custom-content-workaround"
             heading="Custom content workaround"
-            [content]="example5"
-        >
-            <tui-line-clamp-example-5 />
-        </tui-doc-example>
+            [component]="5 | tuiComponent"
+            [content]="5 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -116,10 +111,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/line-clamp/line-clamp.style.less b/projects/demo/src/modules/components/line-clamp/index.less
similarity index 100%
rename from projects/demo/src/modules/components/line-clamp/line-clamp.style.less
rename to projects/demo/src/modules/components/line-clamp/index.less
diff --git a/projects/demo/src/modules/components/line-clamp/index.ts b/projects/demo/src/modules/components/line-clamp/index.ts
new file mode 100644
index 000000000000..cbda35f746bb
--- /dev/null
+++ b/projects/demo/src/modules/components/line-clamp/index.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiLineClampComponent} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiLineClampComponent],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+})
+export default class PageComponent {
+    protected linesLimit = 1;
+    protected lineHeight = 24;
+    protected maxWidth = 100;
+    protected content = '';
+}
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
deleted file mode 100644
index 807c9ae2798f..000000000000
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
+++ /dev/null
@@ -1,49 +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-line-clamp',
-    templateUrl: './line-clamp.template.html',
-    styleUrls: ['./line-clamp.style.less'],
-    changeDetection,
-})
-export class ExampleTuiLineClampComponent {
-    protected linesLimit = 1;
-    protected lineHeight = 24;
-    protected maxWidth = 100;
-    protected content = '';
-
-    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'),
-        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'),
-    };
-
-    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'),
-    };
-}
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
deleted file mode 100644
index 6d51487b7a1a..000000000000
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
+++ /dev/null
@@ -1,55 +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 {TuiActiveZoneDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiDataList,
-    TuiDropdownModule,
-    TuiHint,
-    TuiLinkDirective,
-    TuiNotificationComponent,
-} from '@taiga-ui/core';
-import {
-    TuiChevronDirective,
-    TuiDataListDropdownManagerDirective,
-    TuiLineClampComponent,
-} from '@taiga-ui/kit';
-
-import {TuiLineClampExample1} from './examples/1';
-import {TuiLineClampExample2} from './examples/2';
-import {TuiLineClampExample3} from './examples/3';
-import {TuiLineClampExample4} from './examples/4';
-import {TuiLineClampExample5} from './examples/5';
-import {ExampleTuiLineClampComponent} from './line-clamp.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiNotificationComponent,
-        TuiLineClampComponent,
-        TuiAddonDoc,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLineClampComponent)),
-        TuiButtonDirective,
-        TuiDropdownModule,
-        TuiLinkDirective,
-        TuiDataListDropdownManagerDirective,
-        TuiActiveZoneDirective,
-        TuiDataList,
-        TuiHint,
-        TuiChevronDirective,
-        TuiSetupComponent,
-    ],
-    declarations: [
-        ExampleTuiLineClampComponent,
-        TuiLineClampExample1,
-        TuiLineClampExample2,
-        TuiLineClampExample3,
-        TuiLineClampExample4,
-        TuiLineClampExample5,
-    ],
-    exports: [ExampleTuiLineClampComponent],
-})
-export class ExampleTuiLineClampModule {}