diff --git a/package.json b/package.json
index f05aa9a0cfc8..74cf49cbe7e2 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
         "build:ssr": "nx build demo --baseHref=/ && nx run demo:server:production",
         "prerender": "nx run demo:prerender",
         "test": "nx run-many --target test --all --output-style=stream --parallel=1",
-        "test:e2e": "nx e2e-ui demo-cypress",
+        "test:e2e": "nx e2e-ui demo-playwright",
         "*** Workflow ***": "",
         "stylelint": "stylelint '**/*.{less,css}' --config package.json",
         "lint": "eslint .",
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index c4cc3906c57a..6417cb6c150c 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -229,15 +229,11 @@ export const ROUTES: Routes = [
         title: 'Label ',
         loadComponent: async () => import('../experimental/label'),
     }),
-    {
+    route({
         path: DemoRoute.Segmented,
-        loadChildren: async () =>
-            (await import('../experimental/segmented/segmented.module'))
-                .ExampleTuiSegmentedModule,
-        data: {
-            title: 'Segmented',
-        },
-    },
+        title: 'Segmented',
+        loadComponent: async () => import('../components/segmented'),
+    }),
     {
         path: DemoRoute.Surface,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
index 7fd34cebe523..53c6b7e5ff03 100644
--- a/projects/demo/src/modules/app/demo-routes.ts
+++ b/projects/demo/src/modules/app/demo-routes.ts
@@ -36,7 +36,7 @@ export const DemoRoute = {
     Header: 'layout/header',
     Icon: 'components/icon',
     LabelExp: 'experimental/label',
-    Segmented: 'experimental/segmented',
+    Segmented: 'navigation/segmented',
     Surface: 'experimental/surface',
     SwipeActions: 'components/swipe-actions',
     Textfield: 'experimental/textfield',
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index d77259e39ef7..806b287d463f 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -905,7 +905,7 @@ export const pages: TuiDocPages = [
         route: DemoRoute.LabelExp,
     },
     {
-        section: 'Experimental',
+        section: 'Navigation',
         title: 'Segmented',
         keywords: 'tabs, control, radio, navigation, навигация, вкладки, таб',
         route: DemoRoute.Segmented,
diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.html b/projects/demo/src/modules/components/segmented/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/1/index.html
rename to projects/demo/src/modules/components/segmented/examples/1/index.html
diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.less b/projects/demo/src/modules/components/segmented/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/1/index.less
rename to projects/demo/src/modules/components/segmented/examples/1/index.less
diff --git a/projects/demo/src/modules/components/segmented/examples/1/index.ts b/projects/demo/src/modules/components/segmented/examples/1/index.ts
new file mode 100644
index 000000000000..d67b6a0fe05b
--- /dev/null
+++ b/projects/demo/src/modules/components/segmented/examples/1/index.ts
@@ -0,0 +1,23 @@
+import {NgFor} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIconComponent} from '@taiga-ui/core';
+import {TuiBadgeNotificationComponent, TuiSegmentedComponent} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiSegmentedComponent,
+        NgFor,
+        TuiIconComponent,
+        TuiBadgeNotificationComponent,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.html b/projects/demo/src/modules/components/segmented/examples/2/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/2/index.html
rename to projects/demo/src/modules/components/segmented/examples/2/index.html
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.less b/projects/demo/src/modules/components/segmented/examples/2/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/2/index.less
rename to projects/demo/src/modules/components/segmented/examples/2/index.less
diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.ts b/projects/demo/src/modules/components/segmented/examples/2/index.ts
similarity index 60%
rename from projects/demo/src/modules/experimental/segmented/examples/1/index.ts
rename to projects/demo/src/modules/components/segmented/examples/2/index.ts
index 179829a08633..a365b6bbde55 100644
--- a/projects/demo/src/modules/experimental/segmented/examples/1/index.ts
+++ b/projects/demo/src/modules/components/segmented/examples/2/index.ts
@@ -1,14 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiFadeDirective, TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-1',
+    standalone: true,
+    imports: [TuiSegmentedComponent, TuiFadeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample1 {
-    protected readonly sizes = ['s', 'm', 'l'] as const;
-}
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.html b/projects/demo/src/modules/components/segmented/examples/3/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/3/index.html
rename to projects/demo/src/modules/components/segmented/examples/3/index.html
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.less b/projects/demo/src/modules/components/segmented/examples/3/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/3/index.less
rename to projects/demo/src/modules/components/segmented/examples/3/index.less
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.ts b/projects/demo/src/modules/components/segmented/examples/3/index.ts
similarity index 66%
rename from projects/demo/src/modules/experimental/segmented/examples/3/index.ts
rename to projects/demo/src/modules/components/segmented/examples/3/index.ts
index 3cf3a81dcc29..6789c6218468 100644
--- a/projects/demo/src/modules/experimental/segmented/examples/3/index.ts
+++ b/projects/demo/src/modules/components/segmented/examples/3/index.ts
@@ -1,15 +1,18 @@
+import {NgFor} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-3',
+    standalone: true,
+    imports: [TuiSegmentedComponent, NgFor],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample3 {
+export default class ExampleComponent {
     protected readonly buttons = ['Track active index', 'To color tabs', 'Differently'];
     protected active = 0;
 }
diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.html b/projects/demo/src/modules/components/segmented/examples/4/index.html
similarity index 94%
rename from projects/demo/src/modules/experimental/segmented/examples/4/index.html
rename to projects/demo/src/modules/components/segmented/examples/4/index.html
index 4edded63d973..a269aa68fb67 100644
--- a/projects/demo/src/modules/experimental/segmented/examples/4/index.html
+++ b/projects/demo/src/modules/components/segmented/examples/4/index.html
@@ -14,7 +14,7 @@
         Use routerLink
     </a>
     <a
-        routerLink="/experimental/segmented"
+        routerLink="/navigation/segmented"
         routerLinkActive
         [routerLinkActiveOptions]="options"
     >
@@ -22,7 +22,7 @@
     </a>
     <a
         fragment="content"
-        routerLink="/experimental/segmented"
+        routerLink="/navigation/segmented"
         routerLinkActive
         [routerLinkActiveOptions]="options"
     >
diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.less b/projects/demo/src/modules/components/segmented/examples/4/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/4/index.less
rename to projects/demo/src/modules/components/segmented/examples/4/index.less
diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.ts b/projects/demo/src/modules/components/segmented/examples/4/index.ts
similarity index 57%
rename from projects/demo/src/modules/experimental/segmented/examples/4/index.ts
rename to projects/demo/src/modules/components/segmented/examples/4/index.ts
index 7001ddf8a92a..d99e7814f0e0 100644
--- a/projects/demo/src/modules/experimental/segmented/examples/4/index.ts
+++ b/projects/demo/src/modules/components/segmented/examples/4/index.ts
@@ -1,16 +1,27 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import type {IsActiveMatchOptions} from '@angular/router';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIconComponent} from '@taiga-ui/core';
+import {TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-4',
+    standalone: true,
+    imports: [
+        TuiSegmentedComponent,
+        RouterLink,
+        FormsModule,
+        RouterLinkActive,
+        TuiIconComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample4 {
+export default class ExampleComponent {
     protected selected = 'a';
 
     protected readonly options: IsActiveMatchOptions = {
diff --git a/projects/demo/src/modules/experimental/segmented/examples/import/import-module.md b/projects/demo/src/modules/components/segmented/examples/import/import.md
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/import/import-module.md
rename to projects/demo/src/modules/components/segmented/examples/import/import.md
diff --git a/projects/demo/src/modules/experimental/segmented/examples/import/insert-template.md b/projects/demo/src/modules/components/segmented/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/experimental/segmented/examples/import/insert-template.md
rename to projects/demo/src/modules/components/segmented/examples/import/template.md
diff --git a/projects/demo/src/modules/components/segmented/index.html b/projects/demo/src/modules/components/segmented/index.html
new file mode 100644
index 000000000000..638bab7cb4bd
--- /dev/null
+++ b/projects/demo/src/modules/components/segmented/index.html
@@ -0,0 +1,22 @@
+<tui-doc-page
+    header="Segmented"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p class="tui-space_vertial-4">
+            Segmented is used for links and buttons to navigate within the application. It can also work as a radio
+            button to toggle between different states.
+        </p>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/components/segmented/index.ts b/projects/demo/src/modules/components/segmented/index.ts
new file mode 100644
index 000000000000..485741788b93
--- /dev/null
+++ b/projects/demo/src/modules/components/segmented/index.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemoModule],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly examples = ['Sizes', 'Width', 'Customization', 'Content'];
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.ts b/projects/demo/src/modules/experimental/segmented/examples/2/index.ts
deleted file mode 100644
index c621d6339e0b..000000000000
--- a/projects/demo/src/modules/experimental/segmented/examples/2/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-segmented-example-2',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiSegmentedExample2 {}
diff --git a/projects/demo/src/modules/experimental/segmented/segmented.component.ts b/projects/demo/src/modules/experimental/segmented/segmented.component.ts
deleted file mode 100644
index 864d45fb0cd2..000000000000
--- a/projects/demo/src/modules/experimental/segmented/segmented.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import type {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-
-@Component({
-    selector: 'example-segmented',
-    templateUrl: './segmented.template.html',
-    changeDetection,
-})
-export class ExampleTuiSegmentedComponent {
-    protected readonly exampleModule: TuiRawLoaderContent = import(
-        './examples/import/import-module.md?raw'
-    );
-
-    protected readonly exampleHtml: TuiRawLoaderContent = import(
-        './examples/import/insert-template.md?raw'
-    );
-
-    protected readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?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'),
-    };
-}
diff --git a/projects/demo/src/modules/experimental/segmented/segmented.module.ts b/projects/demo/src/modules/experimental/segmented/segmented.module.ts
deleted file mode 100644
index 39310506c74e..000000000000
--- a/projects/demo/src/modules/experimental/segmented/segmented.module.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {
-    TuiButtonDirective,
-    TuiIconComponent,
-    TuiNotificationModule,
-} from '@taiga-ui/core';
-import {TuiSegmentedComponent} from '@taiga-ui/experimental';
-import {TuiBadgeNotificationComponent, TuiFadeDirective} from '@taiga-ui/kit';
-
-import {TuiSegmentedExample1} from './examples/1';
-import {TuiSegmentedExample2} from './examples/2';
-import {TuiSegmentedExample3} from './examples/3';
-import {TuiSegmentedExample4} from './examples/4';
-import {ExampleTuiSegmentedComponent} from './segmented.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiSegmentedComponent,
-        TuiNotificationModule,
-        TuiBadgeNotificationComponent,
-        TuiFadeDirective,
-        tuiGetDocModules(ExampleTuiSegmentedComponent),
-        FormsModule,
-        TuiIconComponent,
-        TuiButtonDirective,
-    ],
-    declarations: [
-        ExampleTuiSegmentedComponent,
-        TuiSegmentedExample1,
-        TuiSegmentedExample2,
-        TuiSegmentedExample3,
-        TuiSegmentedExample4,
-    ],
-    exports: [ExampleTuiSegmentedComponent],
-})
-export class ExampleTuiSegmentedModule {}
diff --git a/projects/demo/src/modules/experimental/segmented/segmented.template.html b/projects/demo/src/modules/experimental/segmented/segmented.template.html
deleted file mode 100644
index a51c0e8e69c8..000000000000
--- a/projects/demo/src/modules/experimental/segmented/segmented.template.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<tui-doc-page
-    header="Segmented"
-    package="EXPERIMENTAL"
-    type="components"
->
-    <ng-template pageTab>
-        <tui-notification status="warning">
-            This code is
-            <strong>experimental</strong>
-            and is a subject to change. Expect final solution to be shipped in the next major version
-        </tui-notification>
-
-        <p class="tui-space_vertial-4">
-            Segmented is used for links and buttons to navigate within the application. It can also work as a radio
-            button to toggle between different states.
-        </p>
-
-        <tui-doc-example
-            id="size"
-            heading="Sizes"
-            [content]="example1"
-        >
-            <tui-segmented-example-1 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="width"
-            heading="Width"
-            [content]="example2"
-        >
-            <tui-segmented-example-2 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="customization"
-            heading="Customization"
-            [content]="example3"
-        >
-            <tui-segmented-example-3 />
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="content"
-            heading="Content"
-            [content]="example4"
-        >
-            <tui-segmented-example-4 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <ol class="b-demo-steps">
-            <li>
-                <p>Add an import:</p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index 7ca872b76639..e7e5f6c91372 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -78,6 +78,8 @@ export const TUI_USED_ICONS = [
     'tuiIconFrownLarge',
     'tuiIconMehLarge',
     'tuiIconSmileLarge',
+    'tuiIconSun',
+    'tuiIconMoon',
     'tuiIconMastercard',
     'tuiIconPhoneForwardedLarge',
     'tuiIconMusicLarge',
@@ -123,8 +125,6 @@ export const TUI_USED_ICONS = [
     'tuiIconGrid',
     'tuiIconHome',
     'tuiIconGitlab',
-    'tuiIconSun',
-    'tuiIconMoon',
     'tuiIconThumbsDown',
     'tuiIconBellLarge',
     'tuiIconInfo',
diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts
index a9d6001cfb5d..ea36991dd96e 100644
--- a/projects/experimental/components/index.ts
+++ b/projects/experimental/components/index.ts
@@ -1,6 +1,5 @@
 export * from '@taiga-ui/experimental/components/app-bar';
 export * from '@taiga-ui/experimental/components/chip';
 export * from '@taiga-ui/experimental/components/navigation';
-export * from '@taiga-ui/experimental/components/segmented';
 export * from '@taiga-ui/experimental/components/textfield';
 export * from '@taiga-ui/experimental/components/tooltip';
diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts
index d7069805d0e6..6a346a854158 100644
--- a/projects/kit/components/index.ts
+++ b/projects/kit/components/index.ts
@@ -51,6 +51,7 @@ export * from '@taiga-ui/kit/components/radio-list';
 export * from '@taiga-ui/kit/components/range';
 export * from '@taiga-ui/kit/components/rating';
 export * from '@taiga-ui/kit/components/routable-dialog';
+export * from '@taiga-ui/kit/components/segmented';
 export * from '@taiga-ui/kit/components/select';
 export * from '@taiga-ui/kit/components/select-option';
 export * from '@taiga-ui/kit/components/slider';
diff --git a/projects/experimental/components/segmented/index.ts b/projects/kit/components/segmented/index.ts
similarity index 100%
rename from projects/experimental/components/segmented/index.ts
rename to projects/kit/components/segmented/index.ts
diff --git a/projects/experimental/components/segmented/ng-package.json b/projects/kit/components/segmented/ng-package.json
similarity index 100%
rename from projects/experimental/components/segmented/ng-package.json
rename to projects/kit/components/segmented/ng-package.json
diff --git a/projects/experimental/components/segmented/segmented.component.ts b/projects/kit/components/segmented/segmented.component.ts
similarity index 98%
rename from projects/experimental/components/segmented/segmented.component.ts
rename to projects/kit/components/segmented/segmented.component.ts
index e19f0dcf734c..e254b14b94ce 100644
--- a/projects/experimental/components/segmented/segmented.component.ts
+++ b/projects/kit/components/segmented/segmented.component.ts
@@ -14,7 +14,7 @@ import {
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TuiDestroyService, tuiIsHTMLElement, tuiPx, tuiZonefree} from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit';
+import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit/components/badge-notification';
 import {takeUntil} from 'rxjs';
 
 import {TuiSegmentedDirective} from './segmented.directive';
diff --git a/projects/experimental/components/segmented/segmented.directive.ts b/projects/kit/components/segmented/segmented.directive.ts
similarity index 100%
rename from projects/experimental/components/segmented/segmented.directive.ts
rename to projects/kit/components/segmented/segmented.directive.ts
diff --git a/projects/experimental/components/segmented/segmented.style.less b/projects/kit/components/segmented/segmented.style.less
similarity index 100%
rename from projects/experimental/components/segmented/segmented.style.less
rename to projects/kit/components/segmented/segmented.style.less