diff --git a/src/components/content/Kit.vue b/src/components/content/Kit.vue
new file mode 100644
index 00000000..38fa8c96
--- /dev/null
+++ b/src/components/content/Kit.vue
@@ -0,0 +1,57 @@
+<template lang="pug">
+Banner(
+  icon="heroicons:rocket-launch"
+  :tooltip="{ icon: 'tabler:clipboard-copy' }"
+  :action="{ label: $t('kit.banner.button'), to: localePath(link) }"
+  @tooltip="copyToClipboard"
+)
+  template(v-slot:text)
+    i18n-t(keypath='kit.banner.text')
+      template(v-slot:link)
+        NuxtLink(:to="link") Rete Kit
+  template(v-slot:tooltip)
+    i18n-t(keypath='kit.banner.tooltip')
+      template(v-slot:command)
+        .command {{ command }}
+</template>
+
+<script lang="ts">
+import Banner from '../shared/Banner.vue'
+
+export default {
+  data() {
+    return {
+      link: '/docs/development/rete-kit',
+      command: 'npx rete-kit app'
+    }
+  },
+  methods: {
+    async copyToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.command)
+        this.$Notice.success({
+          title: this.$t('kit.banner.copyNotification.success')
+        })
+      } catch (error) {
+        console.error(error)
+
+        this.$Notice.error({
+          title: this.$t('kit.banner.copyNotification.error')
+        })
+      }
+    }
+  },
+  components: {
+    Banner
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.command
+  font-family: monospace
+  border: 1px solid #e0e0e0
+  display: inline-block
+  padding: 0 0.2em
+  border-radius: 0.3em
+</style>
diff --git a/src/components/content/ProExample.vue b/src/components/content/ProExample.vue
index 2c1d2aa8..17aa52b1 100644
--- a/src/components/content/ProExample.vue
+++ b/src/components/content/ProExample.vue
@@ -1,15 +1,12 @@
 <template lang="pug">
-IViewAlert.alert(show-icon)
-  .content
-    .text {{ $t('examplesPage.proExample.alert') }}
-    Tooltip(placement="top")
-      template(#content)
-        .tooltip {{ $t('examplesPage.proExample.info') }}
-      Button.question(type="text" shape="circle")
-        Icon.icon(name="f7:question-circle")
-    Button.button(:to="patreon.link" target="_blank") {{ $t('examplesPage.proExample.getAccess') }}
-  template(#icon)
-    Icon.icon(name="ion:finger-print")
+Banner(
+  icon="ion:finger-print"
+  :tooltip="{ icon: 'f7:question-circle' }"
+  :action="{ label: $t('examplesPage.proExample.getAccess'), to: patreon.link, target: '_blank' }"
+)
+  template(v-slot:text) {{ $t('examplesPage.proExample.alert') }}
+  template(v-slot:tooltip) {{ $t('examplesPage.proExample.info') }}
+
 BaseExample
   iframe(
     :src="src"
@@ -19,6 +16,7 @@ BaseExample
 
 <script lang="ts">
 import sponsor from '../../consts/sponsor.json'
+import Banner from '../shared/Banner.vue'
 import BaseExample from '../shared/BaseExample.vue'
 
 export default {
@@ -31,33 +29,13 @@ export default {
     }
   },
   components: {
+    Banner,
     BaseExample
   }
 }
 </script>
 
 <style lang="sass" scoped>
-@import '@/assets/styles/media.sass'
-
-.alert
-  padding-right: 8px
-  .content
-    display: flex
-    align-items: center
-    gap: 0.5em
-    .text
-      flex: 1
-    .tooltip
-      text-align: center
-      max-width: 14em
-      text-wrap: wrap
-  .icon
-    font-size: 1.25em
-  .question
-    padding: 0.2em 0.5em
-    .icon
-      vertical-align: text-top
-
 iframe
   width: 100%
   height: 100%
diff --git a/src/components/shared/Banner.vue b/src/components/shared/Banner.vue
new file mode 100644
index 00000000..def17685
--- /dev/null
+++ b/src/components/shared/Banner.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+IViewAlert.banner(show-icon)
+  .content
+    .text
+      slot(name="text")
+    Tooltip(v-if="tooltip", placement="top")
+      template(#content)
+        .tooltip
+          slot(name="tooltip")
+      Button.question(
+        type="text"
+        shape="circle"
+        @click="$emit('tooltip')"
+      )
+        Icon.icon(:name="tooltip.icon")
+    Button.button(
+      v-if="action"
+      :target="action.target"
+      :to="action.to"
+      @click="$emit('action')"
+    ) {{ action.label }}
+  template(#icon)
+    Icon.icon(:name="icon")
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    icon: String,
+    tooltip: {
+      type: Object,
+      default: null
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import '@/assets/styles/media.sass'
+
+.banner
+  padding-right: 8px
+  .content
+    display: flex
+    align-items: center
+    gap: 0.5em
+    .text
+      flex: 1
+    .tooltip
+      text-align: center
+      max-width: 14em
+      text-wrap: wrap
+  .icon
+    font-size: 1.25em
+  .question
+    padding: 0.2em 0.5em
+    .icon
+      vertical-align: text-top
+
+</style>
diff --git a/src/content/en/docs/4.guides/1.basic.md b/src/content/en/docs/4.guides/1.basic.md
index e88f3220..207230db 100644
--- a/src/content/en/docs/4.guides/1.basic.md
+++ b/src/content/en/docs/4.guides/1.basic.md
@@ -19,10 +19,12 @@ Follow this guide to use the corresponding render plugin in your **Angular**, **
 :ref-github{title="Connection plugin" link="https://github.com/retejs/connection-plugin"}
 ::
 
-In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally. It's highly recommended starting with [Rete Kit](/docs/development/rete-kit) and using it to build applications if you haven't done so already.
+In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally.
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
 ```
diff --git a/src/content/en/docs/4.guides/10.minimap.md b/src/content/en/docs/4.guides/10.minimap.md
index 9d066e8b..d89246c3 100644
--- a/src/content/en/docs/4.guides/10.minimap.md
+++ b/src/content/en/docs/4.guides/10.minimap.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-minimap-plugin
 ```
diff --git a/src/content/en/docs/4.guides/11.dock-menu.md b/src/content/en/docs/4.guides/11.dock-menu.md
index 56c99e96..0d265eb8 100644
--- a/src/content/en/docs/4.guides/11.dock-menu.md
+++ b/src/content/en/docs/4.guides/11.dock-menu.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-dock-plugin
 ```
diff --git a/src/content/en/docs/4.guides/12.connection-path.md b/src/content/en/docs/4.guides/12.connection-path.md
index e3173ea7..43680256 100644
--- a/src/content/en/docs/4.guides/12.connection-path.md
+++ b/src/content/en/docs/4.guides/12.connection-path.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-path-plugin d3-shape
 ```
diff --git a/src/content/en/docs/4.guides/13.reroute.md b/src/content/en/docs/4.guides/13.reroute.md
index 13772987..5b8699af 100644
--- a/src/content/en/docs/4.guides/13.reroute.md
+++ b/src/content/en/docs/4.guides/13.reroute.md
@@ -17,6 +17,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-reroute-plugin
 ```
diff --git a/src/content/en/docs/4.guides/14.undo-redo.md b/src/content/en/docs/4.guides/14.undo-redo.md
index ed473f6a..4e1a937b 100644
--- a/src/content/en/docs/4.guides/14.undo-redo.md
+++ b/src/content/en/docs/4.guides/14.undo-redo.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-history-plugin
 ```
diff --git a/src/content/en/docs/4.guides/15.comments.md b/src/content/en/docs/4.guides/15.comments.md
index 2fd0b953..e4e64bde 100644
--- a/src/content/en/docs/4.guides/15.comments.md
+++ b/src/content/en/docs/4.guides/15.comments.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-comment-plugin
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/1.react.md b/src/content/en/docs/4.guides/2.renderers/1.react.md
index c5582aa5..06e948bb 100644
--- a/src/content/en/docs/4.guides/2.renderers/1.react.md
+++ b/src/content/en/docs/4.guides/2.renderers/1.react.md
@@ -25,6 +25,8 @@ This plugin can be used in any application, regardless of your stack (**React.js
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-react-plugin rete-render-utils styled-components
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/2.vue.md b/src/content/en/docs/4.guides/2.renderers/2.vue.md
index 75bb7bb4..05505365 100644
--- a/src/content/en/docs/4.guides/2.renderers/2.vue.md
+++ b/src/content/en/docs/4.guides/2.renderers/2.vue.md
@@ -28,6 +28,8 @@ You can use this plugin in any application, irrespective of the application stac
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-vue-plugin rete-render-utils
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/3.angular.md b/src/content/en/docs/4.guides/2.renderers/3.angular.md
index de4c7234..364b26cb 100644
--- a/src/content/en/docs/4.guides/2.renderers/3.angular.md
+++ b/src/content/en/docs/4.guides/2.renderers/3.angular.md
@@ -28,6 +28,8 @@ This plugin is **exclusively** designed for Angular applications as it requires
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-angular-plugin rete-render-utils @angular/elements@18
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/4.svelte.md b/src/content/en/docs/4.guides/2.renderers/4.svelte.md
index 4b080cb7..24ba21e0 100644
--- a/src/content/en/docs/4.guides/2.renderers/4.svelte.md
+++ b/src/content/en/docs/4.guides/2.renderers/4.svelte.md
@@ -26,6 +26,8 @@ Supports latest versions of Svelte: 5, 4 and 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-svelte-plugin rete-render-utils sass
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/5.lit.md b/src/content/en/docs/4.guides/2.renderers/5.lit.md
index 8ca36012..87e8767f 100644
--- a/src/content/en/docs/4.guides/2.renderers/5.lit.md
+++ b/src/content/en/docs/4.guides/2.renderers/5.lit.md
@@ -26,6 +26,8 @@ Supports Lit version 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i @retejs/lit-plugin rete-render-utils lit
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/1.dataflow.md b/src/content/en/docs/4.guides/3.processing/1.dataflow.md
index dcda5c74..a029aa2a 100644
--- a/src/content/en/docs/4.guides/3.processing/1.dataflow.md
+++ b/src/content/en/docs/4.guides/3.processing/1.dataflow.md
@@ -18,6 +18,8 @@ Not familiar with Dataflow concept? Check out the [Dataflow](/docs/concepts/engi
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/2.control-flow.md b/src/content/en/docs/4.guides/3.processing/2.control-flow.md
index 90743623..fc818b84 100644
--- a/src/content/en/docs/4.guides/3.processing/2.control-flow.md
+++ b/src/content/en/docs/4.guides/3.processing/2.control-flow.md
@@ -16,6 +16,8 @@ Not familiar with Control flow concept? Check out the [Control flow](/docs/conce
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/3.hybrid.md b/src/content/en/docs/4.guides/3.processing/3.hybrid.md
index 96bc7ca9..74bf46f2 100644
--- a/src/content/en/docs/4.guides/3.processing/3.hybrid.md
+++ b/src/content/en/docs/4.guides/3.processing/3.hybrid.md
@@ -20,6 +20,8 @@ For a brief overview of the concept of combining Dataflow and Control flow, we r
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/4.3d/1.index.md b/src/content/en/docs/4.guides/4.3d/1.index.md
index b977ab63..5bff2874 100644
--- a/src/content/en/docs/4.guides/4.3d/1.index.md
+++ b/src/content/en/docs/4.guides/4.3d/1.index.md
@@ -24,6 +24,8 @@ Powered by Three.js, this plugin creates a scene that contains a camera and two
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `three` peer dependency must be installed separately.
 
 ```bash
diff --git a/src/content/en/docs/4.guides/5.arrange.md b/src/content/en/docs/4.guides/5.arrange.md
index c04b00c8..441749ab 100644
--- a/src/content/en/docs/4.guides/5.arrange.md
+++ b/src/content/en/docs/4.guides/5.arrange.md
@@ -20,6 +20,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `elkjs` peer dependency must be installed separately.
 
 ```bash
diff --git a/src/content/en/docs/4.guides/6.context-menu.md b/src/content/en/docs/4.guides/6.context-menu.md
index 76d08444..f7a6adb7 100644
--- a/src/content/en/docs/4.guides/6.context-menu.md
+++ b/src/content/en/docs/4.guides/6.context-menu.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-context-menu-plugin
 ```
diff --git a/src/content/en/docs/4.guides/7.readonly.md b/src/content/en/docs/4.guides/7.readonly.md
index 1be877b0..5ee4bd24 100644
--- a/src/content/en/docs/4.guides/7.readonly.md
+++ b/src/content/en/docs/4.guides/7.readonly.md
@@ -18,6 +18,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-readonly-plugin
 ```
diff --git a/src/content/en/docs/4.guides/8.scopes.md b/src/content/en/docs/4.guides/8.scopes.md
index f490f21b..7ad8de3c 100644
--- a/src/content/en/docs/4.guides/8.scopes.md
+++ b/src/content/en/docs/4.guides/8.scopes.md
@@ -21,6 +21,8 @@ This approach involves using nodes as parent elements for other nodes. This enab
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-scopes-plugin
 ```
diff --git a/src/content/en/examples/1.basic/1.react.md b/src/content/en/examples/1.basic/1.react.md
index d0cc8396..e1cf9b87 100644
--- a/src/content/en/examples/1.basic/1.react.md
+++ b/src/content/en/examples/1.basic/1.react.md
@@ -22,4 +22,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-react-plugin` for seamless integration with **React.js**. Users have the option to select these nodes. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}
diff --git a/src/content/en/examples/1.basic/2.vue.md b/src/content/en/examples/1.basic/2.vue.md
index f32c7656..049ec00d 100644
--- a/src/content/en/examples/1.basic/2.vue.md
+++ b/src/content/en/examples/1.basic/2.vue.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-vue-plugin` for seamless integration with **Vue.js**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}
diff --git a/src/content/en/examples/1.basic/3.angular.md b/src/content/en/examples/1.basic/3.angular.md
index c61f1d27..14a0162d 100644
--- a/src/content/en/examples/1.basic/3.angular.md
+++ b/src/content/en/examples/1.basic/3.angular.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-angular-plugin` for seamless integration with **Angular**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"}
diff --git a/src/content/en/examples/1.basic/4.svelte.md b/src/content/en/examples/1.basic/4.svelte.md
index bab79f28..e53ab53e 100644
--- a/src/content/en/examples/1.basic/4.svelte.md
+++ b/src/content/en/examples/1.basic/4.svelte.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-svelte-plugin` for seamless integration with **Svelte**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"}
diff --git a/src/content/en/examples/1.basic/5.lit.md b/src/content/en/examples/1.basic/5.lit.md
index f1d25830..0d8913eb 100644
--- a/src/content/en/examples/1.basic/5.lit.md
+++ b/src/content/en/examples/1.basic/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `@retejs/lit-plugin` for seamless integration with **Lit**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-lit-js-vvx95j" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.modules.md b/src/content/en/examples/10.modules.md
index 2aad8c6f..f0457b28 100644
--- a/src/content/en/examples/10.modules.md
+++ b/src/content/en/examples/10.modules.md
@@ -16,4 +16,5 @@ navigation:
 
 This example showcases a schema reusability technique, where processing is carried out using `DataflowEngine`. This is accomplished by creating a dedicated `Module` node that loads a nested schema containing `Input` and `Output` nodes, subsequently generating corresponding sockets. As a result, the module node initializes the engine, feeds it with input data, executes it, and retrieves the output data.
 
+:kit
 :example{id="rete-js-v2-modules-vhr0h5" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.scopes.md b/src/content/en/examples/10.scopes.md
index cccb7c6a..9927c606 100644
--- a/src/content/en/examples/10.scopes.md
+++ b/src/content/en/examples/10.scopes.md
@@ -18,4 +18,5 @@ The structures shown in this example may also be referred to as subgraphs or nes
 
 Changing a node's parent is easy: simply long-press the node and move it over the new parent node.
 
+:kit
 :example{id="rete-js-v2-scopes-grgie8" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.selectable-connections.md b/src/content/en/examples/10.selectable-connections.md
index e3a21900..eab56b44 100644
--- a/src/content/en/examples/10.selectable-connections.md
+++ b/src/content/en/examples/10.selectable-connections.md
@@ -16,5 +16,6 @@ navigation:
 
 The editor doesn't offer a built-in connection selection feature. However, if you're using `BidirectFlow` and can't delete connections from UI, or you need to select connections for other purposes, you can create a custom connection and sync it with `AreaExtensions.selector`
 
+:kit
 :example{id="rete-js-v2-selectable-connections-cfetvh" module="/src/editor.tsx"}
 
diff --git a/src/content/en/examples/11.minimap.md b/src/content/en/examples/11.minimap.md
index b2ddd500..76143ac0 100644
--- a/src/content/en/examples/11.minimap.md
+++ b/src/content/en/examples/11.minimap.md
@@ -16,4 +16,5 @@ navigation:
 
 By default, a minimap is placed in the bottom-right corner and features rectangles that represent the positions of nodes and the viewport. All nodes added in the editor are dynamically displayed on the minimap, ensuring that they are all within the minimap's boundaries. Additionally, you can change the viewport's position by dragging its mini- viewport.
 
+:kit
 :example{id="rete-js-v2-minimap-ob9uqc" module="/src/editor.ts"}
diff --git a/src/content/en/examples/12.dock.md b/src/content/en/examples/12.dock.md
index 90ebd059..2c4af13d 100644
--- a/src/content/en/examples/12.dock.md
+++ b/src/content/en/examples/12.dock.md
@@ -16,4 +16,5 @@ navigation:
 
 Dock menu is a section with a list of nodes that users can add to the editor by clicking or dragging. In the default preset, this menu is placed at the bottom of the editor, but you can create your own preset with custom styles. Furthermore, you can dynamically add or remove nodes from this list, configuring them with the desired properties and specifying their order
 
+:kit
 :example{id="rete-js-v2-forked-t2enm0" module="/src/editor.ts"}
diff --git a/src/content/en/examples/12.sankey.md b/src/content/en/examples/12.sankey.md
index 419535d1..88375573 100644
--- a/src/content/en/examples/12.sankey.md
+++ b/src/content/en/examples/12.sankey.md
@@ -16,6 +16,7 @@ navigation:
 
 The Sankey diagram relies on the node editor's classic preset and includes custom components for nodes, connections, and sockets. Nodes are given a predefined capacity (equal to height), and ports are generated for each connection with a height (weight) equal to the connection's weight.
 
+:kit
 :example{id="rete-js-v2-sankey-diagram-v75qmr" module="/src/editor.ts"}
 
 Implementing this feature in your project is easy - just copy the `sankey` directory and some code from `editor.ts`, including the `Presets.classic.setup` options and `importGraph`. Additionally, you can restrict node movement with `createSankeyRestrictor` to keep source nodes on the left of target nodes. Finally, add an option to `arrange.layout` to increase the distance between nodes.
diff --git a/src/content/en/examples/14.connection-path.md b/src/content/en/examples/14.connection-path.md
index 82404f26..f6461e69 100644
--- a/src/content/en/examples/14.connection-path.md
+++ b/src/content/en/examples/14.connection-path.md
@@ -16,4 +16,5 @@ navigation:
 
 This example showcases the usage of a plugin for configuring connection paths. It facilitates the customization of both the paths (linear, step, monotone) and the points they traverse. Additionally, there's an option to include an arrow-shaped marker.
 
+:kit
 :example{id="rete-js-v2-connection-path-5dneyc" module="/src/editor.ts"}
diff --git a/src/content/en/examples/15.reroute.md b/src/content/en/examples/15.reroute.md
index 3a56e78d..a156a443 100644
--- a/src/content/en/examples/15.reroute.md
+++ b/src/content/en/examples/15.reroute.md
@@ -16,4 +16,5 @@ navigation:
 
 This particular example shows the usage of a plugin designed for user-controlled connection rerouting. Users can insert rerouting points by clicking on a connection or remove them by right-clicking. These points can be dragged or selected by users (similarly to nodes) to move multiple points at once.
 
+:kit
 :example{id="rete-js-v2-reroute-8doi0c" module="/src/editor.ts"}
diff --git a/src/content/en/examples/17.comments.md b/src/content/en/examples/17.comments.md
index 2a82c427..dccaee6a 100644
--- a/src/content/en/examples/17.comments.md
+++ b/src/content/en/examples/17.comments.md
@@ -16,4 +16,5 @@ navigation:
 
 This example demonstrates the use of the comments plugin. There are two types of comments: frames (for grouping nodes) and inline (for individual nodes). Users can add nodes to frame comments by drag and drop, while inline comments can be attached in a reverse manner by dragging and dropping them onto a node.
 
+:kit
 :example{id="rete-js-v2-comments-ql406e" module="/src/editor.ts"}
diff --git a/src/content/en/examples/18.history.md b/src/content/en/examples/18.history.md
index 83168fc6..aed70395 100644
--- a/src/content/en/examples/18.history.md
+++ b/src/content/en/examples/18.history.md
@@ -18,4 +18,5 @@ This example showcases the use of the history plugin. It tracks changes in the e
 
 All undo/redo operations are automatically grouped by time (default is 200 ms). So, if a sequence of operations occurs within a short time frame, the user can undo or redo them with a single keypress.
 
+:kit
 :example{id="rete-js-v2-history-gwl0cy" module="/src/editor.ts"}
diff --git a/src/content/en/examples/2.controls/1.react.md b/src/content/en/examples/2.controls/1.react.md
index a0ee1646..90d65d68 100644
--- a/src/content/en/examples/2.controls/1.react.md
+++ b/src/content/en/examples/2.controls/1.react.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **React.js**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-custom-controls-2vp0wx" module="/src/editor.tsx"}
diff --git a/src/content/en/examples/2.controls/2.vue.md b/src/content/en/examples/2.controls/2.vue.md
index 037f8dff..bbf7c301 100644
--- a/src/content/en/examples/2.controls/2.vue.md
+++ b/src/content/en/examples/2.controls/2.vue.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Vue.js**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-vue-js-custom-controls-qrdo2c" module="/src/editor.ts"}
diff --git a/src/content/en/examples/2.controls/3.angular.md b/src/content/en/examples/2.controls/3.angular.md
index e1f8d8bf..e32b717e 100644
--- a/src/content/en/examples/2.controls/3.angular.md
+++ b/src/content/en/examples/2.controls/3.angular.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Angular**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-angular-custom-controls-cknttr" module="/src/app/editor.ts"}
diff --git a/src/content/en/examples/2.controls/4.svelte.md b/src/content/en/examples/2.controls/4.svelte.md
index 578fa381..272e1522 100644
--- a/src/content/en/examples/2.controls/4.svelte.md
+++ b/src/content/en/examples/2.controls/4.svelte.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Svelte**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-svelte-controls-9dm3dn" module="/src/lib/editor.ts"}
diff --git a/src/content/en/examples/2.controls/5.lit.md b/src/content/en/examples/2.controls/5.lit.md
index d0b74da3..10a892dd 100644
--- a/src/content/en/examples/2.controls/5.lit.md
+++ b/src/content/en/examples/2.controls/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Lit**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-lit-js-custom-controls-3w4ypd" module="/src/editor.ts"}
diff --git a/src/content/en/examples/20.3d-configurator.md b/src/content/en/examples/20.3d-configurator.md
index 244e598d..c91c6359 100644
--- a/src/content/en/examples/20.3d-configurator.md
+++ b/src/content/en/examples/20.3d-configurator.md
@@ -15,4 +15,5 @@ navigation:
 
 This example showcases the use of an editor that lets you combine nodes to create unique color blends and apply them to a car's body and wheels. The editor uses `DataflowEngine` for node processing. Initial nodes are loaded from a JSON file through a custom importer implemented for this editor.
 
+:kit
 :example{id="rete-js-2-3d-configurator-43o7ex" module="/src/node-editor/index.js"}
diff --git a/src/content/en/examples/21.chatbot.md b/src/content/en/examples/21.chatbot.md
index 6cf1c17b..5311b020 100644
--- a/src/content/en/examples/21.chatbot.md
+++ b/src/content/en/examples/21.chatbot.md
@@ -23,6 +23,7 @@ navigation:
 
 This is a simple demonstration of a chatbot whose behavior is programmed using a visual editor. In this implementation, all elements are customized, including animated connections. The chat window is presented as a separate node that can be moved only using special handles at the bottom and top. A dataflow and control flow-based engine is used to process the graph. There is also validation of connections by checking socket compatibility.
 
+:kit
 :example{id="rete-js-v2-chatbot-programming-nok9iq" module="/src/editor.ts"}
 
 `DataflowEngine` and `ControlFlowEngine` are being used here, just like in the [Hybrid engine](/examples/processing/hybrid-engine) example.
diff --git a/src/content/en/examples/22.3d/1.index.md b/src/content/en/examples/22.3d/1.index.md
index 90d354d2..df7df4b1 100644
--- a/src/content/en/examples/22.3d/1.index.md
+++ b/src/content/en/examples/22.3d/1.index.md
@@ -20,5 +20,6 @@ With the [`rete-area-3d-plugin`](https://github.com/retejs/area-3d-plugin) plugi
 
 Based on **Three.js**, this scene uses `Sky` and `Water` modules (can be found in [the official example](https://threejs.org/examples/webgl_shaders_ocean.html)) to showcase the visual effect of integrated nodes and connections on a 3D environment.
 
+:kit
 :example{id="rete-js-v2-3d-vrnzly" module="/src/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/1.react.md b/src/content/en/examples/3.customization/1.react.md
index e6f45e57..b31ce201 100644
--- a/src/content/en/examples/3.customization/1.react.md
+++ b/src/content/en/examples/3.customization/1.react.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS. Custom components visualized with **React.js** can be used independently of your tech stack, even [without JSX](https://react.dev/reference/react/createElement). Therefore, if your UI framework lacks integration, you can render parts of the editor using **React.js**, leveraging this example.
 
+:kit
 :example{id="rete-js-v2-custom-node-jpwdh3" module="/src/editor.ts"}
diff --git a/src/content/en/examples/3.customization/2.vue.md b/src/content/en/examples/3.customization/2.vue.md
index 62263072..3ab419b8 100644
--- a/src/content/en/examples/3.customization/2.vue.md
+++ b/src/content/en/examples/3.customization/2.vue.md
@@ -22,5 +22,6 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS.
 
+:kit
 :example{id="rete-js-v2-vue-js-customization-ubl35h" module="/src/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/3.angular.md b/src/content/en/examples/3.customization/3.angular.md
index a33a3a61..7729329b 100644
--- a/src/content/en/examples/3.customization/3.angular.md
+++ b/src/content/en/examples/3.customization/3.angular.md
@@ -22,5 +22,6 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-v2-angular-customization-w9umwf" module="/src/app/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/4.svelte.md b/src/content/en/examples/3.customization/4.svelte.md
index 660b2aec..5529b4f5 100644
--- a/src/content/en/examples/3.customization/4.svelte.md
+++ b/src/content/en/examples/3.customization/4.svelte.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-svelte-forked-29v37z" module="/src/editor.ts"}
diff --git a/src/content/en/examples/3.customization/5.lit.md b/src/content/en/examples/3.customization/5.lit.md
index 67d60299..14078516 100644
--- a/src/content/en/examples/3.customization/5.lit.md
+++ b/src/content/en/examples/3.customization/5.lit.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-v2-lit-js-customization-gw7gzk" module="/src/editor.ts"}
diff --git a/src/content/en/examples/6.performance.md b/src/content/en/examples/6.performance.md
index e11863bf..74bdf2c0 100644
--- a/src/content/en/examples/6.performance.md
+++ b/src/content/en/examples/6.performance.md
@@ -17,4 +17,5 @@ navigation:
 
 Within this example, you can set the number of nodes to be displayed and assess the performance during their rendering. Given that visualizing a large number of elements on a page always comes with performance issues, you can explore examples such as [LOD](/examples/lod) and [LOD GPU](/examples/lod-gpu) using specialized approaches to mitigate these limitations
 
+:kit
 :example{id="rete-js-v2-performance-cnbfc0" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.area-extensions.md b/src/content/en/examples/7.area-extensions.md
index 0e24387e..288b93d4 100644
--- a/src/content/en/examples/7.area-extensions.md
+++ b/src/content/en/examples/7.area-extensions.md
@@ -22,4 +22,5 @@ This example showcases the use of built-in extensions provided by `rete-area-plu
 - `restrictor`: restricting zoom and pan areas within the area
 - `snapGrid`: snapping node positions to a grid
 
+:kit
 :example{id="rete-js-v2-area-extensions-rhskwv" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/14.dataflow.md b/src/content/en/examples/7.processing/14.dataflow.md
index 0143df3f..6ea6ac85 100644
--- a/src/content/en/examples/7.processing/14.dataflow.md
+++ b/src/content/en/examples/7.processing/14.dataflow.md
@@ -21,4 +21,5 @@ This example showcases a data processing pipeline using `rete-engine`, where dat
 
 Each node features a `data` method, which receives arrays of incoming data from their respective input sockets and delivers an object containing data corresponding to the output sockets. To initiate their execution, you can make use of the `engine.fetch` method by specifying the identifier of the target node. Consequently, the engine will execute all predecessors recursively, extracting their output data and delivering it to the specified node.
 
+:kit
 :example{id="rete-js-v2-dataflow-engine-tyhr1e" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/15.control-flow.md b/src/content/en/examples/7.processing/15.control-flow.md
index 18253b4f..9e57bccf 100644
--- a/src/content/en/examples/7.processing/15.control-flow.md
+++ b/src/content/en/examples/7.processing/15.control-flow.md
@@ -19,4 +19,5 @@ This example showcases an executing of schema via control flow using `rete-engin
 
 Each node features an `execute` method that takes an input port key as a control source, and a function for conveying control to outgoing nodes through a defined output port. To initiate the execution of the flow, you can use `engine.execute` method, specifying the identifier of the starting node. Consequently, the outgoing nodes will be executed sequentially, starting from the designated node.
 
+:kit
 :example{id="rete-js-v2-control-flow-engine-yqi8z7" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/15.hybrid-engine.md b/src/content/en/examples/7.processing/15.hybrid-engine.md
index 8f56fa03..209c8e2c 100644
--- a/src/content/en/examples/7.processing/15.hybrid-engine.md
+++ b/src/content/en/examples/7.processing/15.hybrid-engine.md
@@ -19,4 +19,5 @@ navigation:
 
 This example shows how `rete-engine` allows for the simultaneous integration of both dataflow and control flow. Consequently, certain nodes serve as data sources, others manage the flow, and a third set incorporates both of these approaches.
 
+:kit
 :example{id="rete-js-v2-hybrid-engine-erkdtu" module="/src/editor.ts"}
diff --git a/src/content/en/examples/8.arrange.md b/src/content/en/examples/8.arrange.md
index 85a76bde..bab1cfc6 100644
--- a/src/content/en/examples/8.arrange.md
+++ b/src/content/en/examples/8.arrange.md
@@ -19,4 +19,5 @@ Automated node arrangement, or commonly referred to as layouting, enables the po
 
 Additionally, it offers extensive customization capabilities, allowing users to configure node placement through various options and an applier to assign the calculated positions to nodes (e.g incorporating animations).
 
+:kit
 :example{id="rete-js-v2-arrange-layout-nodes-ri75lp" module="/src/editor.ts"}
diff --git a/src/content/en/examples/8.insert-node.md b/src/content/en/examples/8.insert-node.md
index 92d455d9..454d13dc 100644
--- a/src/content/en/examples/8.insert-node.md
+++ b/src/content/en/examples/8.insert-node.md
@@ -13,6 +13,7 @@ In this scenario, the user can insert the node into connection between other nod
 
 After adding the connection, the graph is arranged with animation.
 
+:kit
 :example{id="rete-js-v2-insert-node-givohx" module="/src/editor.ts"}
 
 Use the `insert-node` directory and call `insertableNodes` with proper arguments to integrate this feature into your application.
diff --git a/src/content/en/examples/8.magnetic-connection.md b/src/content/en/examples/8.magnetic-connection.md
index b1fa4626..16ca36f1 100644
--- a/src/content/en/examples/8.magnetic-connection.md
+++ b/src/content/en/examples/8.magnetic-connection.md
@@ -11,6 +11,7 @@ navigation:
 
 The given example showcases a technique to enhance UX by enlarging the connection dropping area. This means that users do not have to aim directly at the socket to make a connection, particularly when the socket is small or the zoom level is low.
 
+:kit
 :example{id="rete-js-v2-magnetic-connection-078ild" module="/src/editor.ts"}
 
 In order to implement this strategy in your project, just copy the `magnetic-connection` directory and the corresponding `useMagneticConnection` function call in the `editor.ts` module. Depending on the rendering plugin you are using, you can either use the existing component from the directory or create your own.
diff --git a/src/content/en/examples/8.smooth-zoom.md b/src/content/en/examples/8.smooth-zoom.md
index 7c30e42a..dddf20bb 100644
--- a/src/content/en/examples/8.smooth-zoom.md
+++ b/src/content/en/examples/8.smooth-zoom.md
@@ -15,6 +15,7 @@ navigation:
 
 The editor comes with instant zoom enabled by default, with a step equivalent to one scroll wheel movement. If you require customization of this behavior, you can extend the `Zoom` class
 
+:kit
 :example{id="rete-js-v2-smooth-zoom-6sqv8j" module="/src/editor.ts"}
 
 Within this example, the core logic is contained in `src/zoom.ts`. To integrate it into the editor, just include the following line:
diff --git a/src/content/en/examples/9.context-menu.md b/src/content/en/examples/9.context-menu.md
index ef1aa0a0..36a998c0 100644
--- a/src/content/en/examples/9.context-menu.md
+++ b/src/content/en/examples/9.context-menu.md
@@ -18,4 +18,5 @@ This example demonstrates the use of a context menu presented as a separate plug
 
 The provided functionality relies on a classic preset, but for enhanced customization, it can be substituted to facilitate more dynamic menu item generation.
 
+:kit
 :example{id="rete-js-v2-context-menu-jcelzo" module="/src/editor.ts"}
diff --git a/src/content/en/examples/9.panning-boundary.md b/src/content/en/examples/9.panning-boundary.md
index 7be261c0..af7b5b92 100644
--- a/src/content/en/examples/9.panning-boundary.md
+++ b/src/content/en/examples/9.panning-boundary.md
@@ -16,6 +16,7 @@ navigation:
 
 This example demonstrates the implementation of panning the area when the cursor with a dragged node is approaches the editor's boundary. Depending on the distance to any of the area's boundaries, starting from a certain threshold, the panning speed will be inversely proportional to the distance to the boundary.
 
+:kit
 :example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
 
 Although this example was originally designed for React.js, the showcased feature is completely framework-agnostic. You can seamlessly integrate it into your application on a different stack by copying the feature module and connecting it into your editor.
diff --git a/src/content/en/examples/9.readonly.md b/src/content/en/examples/9.readonly.md
index 4b201c85..6f5d328e 100644
--- a/src/content/en/examples/9.readonly.md
+++ b/src/content/en/examples/9.readonly.md
@@ -18,4 +18,5 @@ The provided example showcases a simple plugin known as `rete-readonly-plugin`.
 
 On the other hand, the plugin intentionally lacks various customization options to keep it simple, allowing you to explore its source code and create your own solutions tailored to your specific use case (e.g. restricting the addition of specific node types only).
 
+:kit
 :example{id="rete-js-v2-readonly-4pi274" module="/src/editor.ts"}
diff --git a/src/content/uk/docs/4.guides/1.basic.md b/src/content/uk/docs/4.guides/1.basic.md
index d77e3e01..380da94b 100644
--- a/src/content/uk/docs/4.guides/1.basic.md
+++ b/src/content/uk/docs/4.guides/1.basic.md
@@ -19,10 +19,14 @@ keywords: базовий,область,ядро
 :ref-github{title="Плагін з'єднань" link="https://github.com/retejs/connection-plugin"}
 ::
 
-Щоб виконати цей гайд, ви можете створити додаток на **[Codesandbox](https://codesandbox.io)**, вибравши будь-який шаблон клієнтського додатку, або створити додаток локально. Дуже рекомендується починати з [Rete Kit](/uk/docs/development/rete-kit) і використовувати його для створення додатку, якщо ви ще цього не зробили.
+Щоб виконати цей гайд, ви можете створити додаток на **[Codesandbox](https://codesandbox.io)**, вибравши будь-який шаблон клієнтського додатку, або створити додаток локально.
+
+:kit
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
 ```
diff --git a/src/content/uk/docs/4.guides/10.minimap.md b/src/content/uk/docs/4.guides/10.minimap.md
index 2e053104..71a0e7b8 100644
--- a/src/content/uk/docs/4.guides/10.minimap.md
+++ b/src/content/uk/docs/4.guides/10.minimap.md
@@ -16,6 +16,8 @@ keywords: міні-карта,ux,користувацький досвід
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-minimap-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/11.dock-menu.md b/src/content/uk/docs/4.guides/11.dock-menu.md
index ad87a4b8..8974a16c 100644
--- a/src/content/uk/docs/4.guides/11.dock-menu.md
+++ b/src/content/uk/docs/4.guides/11.dock-menu.md
@@ -16,6 +16,8 @@ keywords: док,бічна панель,док меню,ux,користувац
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-dock-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/12.connection-path.md b/src/content/uk/docs/4.guides/12.connection-path.md
index df78bf37..ca464640 100644
--- a/src/content/uk/docs/4.guides/12.connection-path.md
+++ b/src/content/uk/docs/4.guides/12.connection-path.md
@@ -16,6 +16,8 @@ keywords: шлях,шлях з'єднання,крива,крок,безьє
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-path-plugin d3-shape
 ```
diff --git a/src/content/uk/docs/4.guides/13.reroute.md b/src/content/uk/docs/4.guides/13.reroute.md
index 51c92a63..0f9a8d57 100644
--- a/src/content/uk/docs/4.guides/13.reroute.md
+++ b/src/content/uk/docs/4.guides/13.reroute.md
@@ -17,6 +17,8 @@ keywords: перенаправлення,рероутінг підключенн
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-reroute-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/14.undo-redo.md b/src/content/uk/docs/4.guides/14.undo-redo.md
index a45e19a1..9051348c 100644
--- a/src/content/uk/docs/4.guides/14.undo-redo.md
+++ b/src/content/uk/docs/4.guides/14.undo-redo.md
@@ -16,6 +16,8 @@ keywords: скасувати,повторити,історія,rete-history-plug
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-history-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/15.comments.md b/src/content/uk/docs/4.guides/15.comments.md
index fd029bfe..a1ea9cd5 100644
--- a/src/content/uk/docs/4.guides/15.comments.md
+++ b/src/content/uk/docs/4.guides/15.comments.md
@@ -16,6 +16,8 @@ keywords: коментарі,rete-comment-plugin
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-comment-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/1.react.md b/src/content/uk/docs/4.guides/2.renderers/1.react.md
index ed3a9106..43acba94 100644
--- a/src/content/uk/docs/4.guides/2.renderers/1.react.md
+++ b/src/content/uk/docs/4.guides/2.renderers/1.react.md
@@ -25,6 +25,8 @@ keywords: react,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-react-plugin rete-render-utils styled-components
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/2.vue.md b/src/content/uk/docs/4.guides/2.renderers/2.vue.md
index d2b1c2ae..cba13486 100644
--- a/src/content/uk/docs/4.guides/2.renderers/2.vue.md
+++ b/src/content/uk/docs/4.guides/2.renderers/2.vue.md
@@ -28,6 +28,8 @@ keywords: vue,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-vue-plugin rete-render-utils
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/3.angular.md b/src/content/uk/docs/4.guides/2.renderers/3.angular.md
index eaf8efc6..b85f22fa 100644
--- a/src/content/uk/docs/4.guides/2.renderers/3.angular.md
+++ b/src/content/uk/docs/4.guides/2.renderers/3.angular.md
@@ -28,6 +28,8 @@ keywords: angular,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-angular-plugin rete-render-utils @angular/elements@18
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/4.svelte.md b/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
index a330dab8..956e4f96 100644
--- a/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
+++ b/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
@@ -26,6 +26,8 @@ keywords: svelte,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-svelte-plugin rete-render-utils sass
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/5.lit.md b/src/content/uk/docs/4.guides/2.renderers/5.lit.md
index f8d26012..dc96cb30 100644
--- a/src/content/uk/docs/4.guides/2.renderers/5.lit.md
+++ b/src/content/uk/docs/4.guides/2.renderers/5.lit.md
@@ -26,6 +26,8 @@ keywords: lit,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i @retejs/lit-plugin rete-render-utils lit
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/1.dataflow.md b/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
index 0f6fca0f..8cabbd91 100644
--- a/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
+++ b/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
@@ -18,6 +18,8 @@ keywords: потік даних,дані,двигун,скидання,кеш
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/2.control-flow.md b/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
index ec901cde..06a24d15 100644
--- a/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
+++ b/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
@@ -16,6 +16,8 @@ keywords: управління потоком,управління,двигун
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/3.hybrid.md b/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
index 6478d834..d79f1936 100644
--- a/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
+++ b/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
@@ -19,6 +19,8 @@ keywords: гібрид,двигун,потік даних,управління 
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/4.3d/1.index.md b/src/content/uk/docs/4.guides/4.3d/1.index.md
index 89c13807..d39b3d07 100644
--- a/src/content/uk/docs/4.guides/4.3d/1.index.md
+++ b/src/content/uk/docs/4.guides/4.3d/1.index.md
@@ -24,6 +24,8 @@ keywords: 3d,three.js,вбудувати
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 Перед використанням цього плагіна необхідно окремо встановити однорангову залежність `three`.
 
 ```bash
diff --git a/src/content/uk/docs/4.guides/5.arrange.md b/src/content/uk/docs/4.guides/5.arrange.md
index a8ac7ac5..5665ffc5 100644
--- a/src/content/uk/docs/4.guides/5.arrange.md
+++ b/src/content/uk/docs/4.guides/5.arrange.md
@@ -20,6 +20,8 @@ keywords: макет,упорядкування,положення вузла
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 Перед використанням цього плагіна необхідно окремо встановити однорангову залежність `elkjs`.
 
 ```bash
diff --git a/src/content/uk/docs/4.guides/6.context-menu.md b/src/content/uk/docs/4.guides/6.context-menu.md
index 1eb1aadb..f9272a5b 100644
--- a/src/content/uk/docs/4.guides/6.context-menu.md
+++ b/src/content/uk/docs/4.guides/6.context-menu.md
@@ -16,6 +16,8 @@ keywords: контекстне меню,меню
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-context-menu-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/7.readonly.md b/src/content/uk/docs/4.guides/7.readonly.md
index aa96de84..4d064522 100644
--- a/src/content/uk/docs/4.guides/7.readonly.md
+++ b/src/content/uk/docs/4.guides/7.readonly.md
@@ -18,6 +18,8 @@ keywords: тільки для читання
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-readonly-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/8.scopes.md b/src/content/uk/docs/4.guides/8.scopes.md
index fcdea0d2..436d149c 100644
--- a/src/content/uk/docs/4.guides/8.scopes.md
+++ b/src/content/uk/docs/4.guides/8.scopes.md
@@ -21,6 +21,8 @@ keywords: області,батькой-нащадок,підграф,вклад
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-scopes-plugin
 ```
diff --git a/src/content/uk/examples/1.basic/1.react.md b/src/content/uk/examples/1.basic/1.react.md
index 9706f6d4..6fc07ded 100644
--- a/src/content/uk/examples/1.basic/1.react.md
+++ b/src/content/uk/examples/1.basic/1.react.md
@@ -21,4 +21,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-react-plugin` для безшовної інтеграції з **React.js**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/2.vue.md b/src/content/uk/examples/1.basic/2.vue.md
index 1812089d..cc5e3920 100644
--- a/src/content/uk/examples/1.basic/2.vue.md
+++ b/src/content/uk/examples/1.basic/2.vue.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-vue-plugin` для безшовної інтеграції з **Vue.js**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/3.angular.md b/src/content/uk/examples/1.basic/3.angular.md
index fe064656..6002c2a1 100644
--- a/src/content/uk/examples/1.basic/3.angular.md
+++ b/src/content/uk/examples/1.basic/3.angular.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-angular-plugin` для безшовної інтеграції з **Angular**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/4.svelte.md b/src/content/uk/examples/1.basic/4.svelte.md
index d520f19b..321dec9a 100644
--- a/src/content/uk/examples/1.basic/4.svelte.md
+++ b/src/content/uk/examples/1.basic/4.svelte.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-svelte-plugin` для безшовної інтеграції з **Svelte**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/5.lit.md b/src/content/uk/examples/1.basic/5.lit.md
index 1e578f51..5ba87fe2 100644
--- a/src/content/uk/examples/1.basic/5.lit.md
+++ b/src/content/uk/examples/1.basic/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `@retejs/lit-plugin` для безшовної інтеграції з **Lit**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-lit-js-vvx95j" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.modules.md b/src/content/uk/examples/10.modules.md
index 21ab626c..45674e83 100644
--- a/src/content/uk/examples/10.modules.md
+++ b/src/content/uk/examples/10.modules.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє техніку повторного використання схеми, де обробка виконується за допомогою `DataflowEngine`. Це досягається шляхом створення виділеного вузла `Module`, який завантажує вкладену схему, що містить вузли `Input` і `Output`, згодом генеруючи відповідні сокети. У результаті вузол модулю ініціалізує двигун, заповнює його вхідними даними, виконує їх і отримує вихідні дані.
 
+:kit
 :example{id="rete-js-v2-modules-vhr0h5" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.scopes.md b/src/content/uk/examples/10.scopes.md
index 4144427f..832cf7ce 100644
--- a/src/content/uk/examples/10.scopes.md
+++ b/src/content/uk/examples/10.scopes.md
@@ -18,4 +18,5 @@ navigation:
 
 Змінити батьківський вузол легко: просто натисніть і утримуйте вузол і перемістіть його на новий батьківський вузол.
 
+:kit
 :example{id="rete-js-v2-scopes-grgie8" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.selectable-connections.md b/src/content/uk/examples/10.selectable-connections.md
index e924c6e3..a2323b1b 100644
--- a/src/content/uk/examples/10.selectable-connections.md
+++ b/src/content/uk/examples/10.selectable-connections.md
@@ -16,5 +16,6 @@ navigation:
 
 Редактор не має вбудованої функції вибору з’єднань. Однак якщо ви використовуєте `BidirectFlow` і не можете видалити з’єднання з UI, або вам потрібно вибрати з’єднання для інших цілей, ви можете створити кастомне з’єднання та синхронізувати його з `AreaExtensions.selector`
 
+:kit
 :example{id="rete-js-v2-selectable-connections-cfetvh" module="/src/editor.tsx"}
 
diff --git a/src/content/uk/examples/11.minimap.md b/src/content/uk/examples/11.minimap.md
index f9ebd455..be910907 100644
--- a/src/content/uk/examples/11.minimap.md
+++ b/src/content/uk/examples/11.minimap.md
@@ -16,4 +16,5 @@ navigation:
 
 За замовчуванням міні-карта розміщується у нижньому правому куті та містить прямокутники, які представляють положення вузлів і вьюпорту. Усі вузли, додані в редакторі, динамічно відображаються на міні-карті, гарантуючи, що всі вони знаходяться в межах міні-карти. Крім того, ви можете змінити положення вікна перегляду, перетягнувши його міні-вьюпорт.
 
+:kit
 :example{id="rete-js-v2-minimap-ob9uqc" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/12.dock.md b/src/content/uk/examples/12.dock.md
index 8dfe11e6..4c7eea55 100644
--- a/src/content/uk/examples/12.dock.md
+++ b/src/content/uk/examples/12.dock.md
@@ -16,4 +16,5 @@ navigation:
 
 Док-меню — це розділ зі списком вузлів, які користувачі можуть додати до редактора шляхом кліку або перетягування. У стандартному пресеті це меню розміщено в нижній частині редактора, але ви можете створити власний пресет із власними стилями. Крім того, ви можете динамічно додавати або видаляти вузли з цього списку, налаштовуючи для них потрібні властивості та вказуючи їх порядок
 
+:kit
 :example{id="rete-js-v2-forked-t2enm0" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/12.sankey.md b/src/content/uk/examples/12.sankey.md
index 25438de1..068f016d 100644
--- a/src/content/uk/examples/12.sankey.md
+++ b/src/content/uk/examples/12.sankey.md
@@ -16,6 +16,7 @@ navigation:
 
 Діаграма Санкі базується на класичному пресеті редактора вузлів і включає кастомні компоненти для вузлів, з’єднань і сокетів. Вузлам надається заздалегідь визначена ємність (рівна висоті), а порти генеруються для кожного з’єднання з висотою (вагою), що дорівнює вазі з’єднання.
 
+:kit
 :example{id="rete-js-v2-sankey-diagram-v75qmr" module="/src/editor.ts"}
 
 Інтегрувати цю фічу у вашому проекті легко – просто скопіюйте каталог `sankey` і деякий код з `editor.ts`, включаючи параметри `Presets.classic.setup` та `importGraph`. Крім того, ви можете обмежити рух вузлів за допомогою `createSankeyRestrictor`, щоб вихідні вузли залишалися ліворуч від вхідних. Нарешті, додайте параметр до `arrange.layout`, щоб збільшити відстань між вузлами.
diff --git a/src/content/uk/examples/14.connection-path.md b/src/content/uk/examples/14.connection-path.md
index f80f07e9..810fae6c 100644
--- a/src/content/uk/examples/14.connection-path.md
+++ b/src/content/uk/examples/14.connection-path.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє використання плагіна для налаштування шляхів підключення. Це полегшує налаштування як шляхів (лінійних, ступінчастих, монотонних), так і точок, які вони проходять. Крім того, є можливість включити маркер у формі стрілки.
 
+:kit
 :example{id="rete-js-v2-connection-path-5dneyc" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/15.reroute.md b/src/content/uk/examples/15.reroute.md
index bca6d6ec..bbad691e 100644
--- a/src/content/uk/examples/15.reroute.md
+++ b/src/content/uk/examples/15.reroute.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей конкретний приклад показує використання плагіна, розробленого для перенаправлення з’єднання користувачем. Користувачі можуть вставляти точки зміни маршруту, натиснувши на з’єднання, або видалити їх, клацнувши правою кнопкою миші. Користувачі можуть перетягувати або вибирати ці точки (подібно до вузлів), щоб перемістити декілька точок одночасно.
 
+:kit
 :example{id="rete-js-v2-reroute-8doi0c" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/17.comments.md b/src/content/uk/examples/17.comments.md
index 0772b597..b8e2d4f4 100644
--- a/src/content/uk/examples/17.comments.md
+++ b/src/content/uk/examples/17.comments.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє використання плагіна коментарів. Є два типи коментарів: рамки (для групування вузлів) та інлайн (для окремих вузлів). Користувачі можуть додавати вузли до коментарів фрейму шляхом перетягування, тоді як вбудовані коментарі можна приєднувати у зворотному порядку, перетягуючи їх на вузол.
 
+:kit
 :example{id="rete-js-v2-comments-ql406e" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/18.history.md b/src/content/uk/examples/18.history.md
index 6b6b94c9..c9b26dae 100644
--- a/src/content/uk/examples/18.history.md
+++ b/src/content/uk/examples/18.history.md
@@ -18,4 +18,5 @@ navigation:
 
 Усі операції скасування/повторення автоматично групуються за часом (за замовчуванням 200 мс). Таким чином, якщо послідовність операцій відбувається протягом короткого періоду часу, користувач може скасувати або повторити їх одним натисканням клавіші.
 
+:kit
 :example{id="rete-js-v2-history-gwl0cy" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/1.react.md b/src/content/uk/examples/2.controls/1.react.md
index a6acdc0a..5e3d8e20 100644
--- a/src/content/uk/examples/2.controls/1.react.md
+++ b/src/content/uk/examples/2.controls/1.react.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **React.js**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-custom-controls-2vp0wx" module="/src/editor.tsx"}
diff --git a/src/content/uk/examples/2.controls/2.vue.md b/src/content/uk/examples/2.controls/2.vue.md
index f8ad3add..2bd24033 100644
--- a/src/content/uk/examples/2.controls/2.vue.md
+++ b/src/content/uk/examples/2.controls/2.vue.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Vue.js**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-vue-js-custom-controls-qrdo2c" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/3.angular.md b/src/content/uk/examples/2.controls/3.angular.md
index 2a1582c2..d5d03555 100644
--- a/src/content/uk/examples/2.controls/3.angular.md
+++ b/src/content/uk/examples/2.controls/3.angular.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Angular**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-angular-custom-controls-cknttr" module="/src/app/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/4.svelte.md b/src/content/uk/examples/2.controls/4.svelte.md
index 7c7235df..17575423 100644
--- a/src/content/uk/examples/2.controls/4.svelte.md
+++ b/src/content/uk/examples/2.controls/4.svelte.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Svelte**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-svelte-controls-9dm3dn" module="/src/lib/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/5.lit.md b/src/content/uk/examples/2.controls/5.lit.md
index 0ab41466..f7c170b3 100644
--- a/src/content/uk/examples/2.controls/5.lit.md
+++ b/src/content/uk/examples/2.controls/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Lit**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-lit-js-custom-controls-3w4ypd" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/20.3d-configurator.md b/src/content/uk/examples/20.3d-configurator.md
index d3a93b67..94d19b11 100644
--- a/src/content/uk/examples/20.3d-configurator.md
+++ b/src/content/uk/examples/20.3d-configurator.md
@@ -15,4 +15,5 @@ navigation:
 
 Цей приклад демонструє використання редактора, який дозволяє комбінувати вузли для створення унікальних кольорових сумішей і застосовувати їх до кузова та коліс автомобіля. Редактор використовує `DataflowEngine` для обробки вузлів. Початкові вузли завантажуються з файлу JSON через спеціальний імпортер, реалізований для цього редактора.
 
+:kit
 :example{id="rete-js-2-3d-configurator-43o7ex" module="/src/node-editor/index.js"}
diff --git a/src/content/uk/examples/21.chatbot.md b/src/content/uk/examples/21.chatbot.md
index 4d34bb9a..344bfce2 100644
--- a/src/content/uk/examples/21.chatbot.md
+++ b/src/content/uk/examples/21.chatbot.md
@@ -23,6 +23,7 @@ navigation:
 
 Це проста демонстрація чат-бота, поведінка якого програмується за допомогою візуального редактора. У цій реалізації всі елементи кастомізовані, включаючи анімовані з’єднання. Вікно чату представлено у вигляді окремого вузла, який можна переміщати лише за допомогою спеціальних ручок внизу та вгорі. Для обробки графіка використовується механізм на основі потоку даних і керування. Існує також валідація підключень шляхом перевірки сумісності сокетів.
 
+:kit
 :example{id="rete-js-v2-chatbot-programming-nok9iq" module="/src/editor.ts"}
 
 Тут використовуються `DataflowEngine` і `ControlFlowEngine`, так само, як і в прикладі [Гібридний двигун](/uk/examples/processing/hybrid-engine).
diff --git a/src/content/uk/examples/22.3d/1.index.md b/src/content/uk/examples/22.3d/1.index.md
index b9e87744..7ae87d41 100644
--- a/src/content/uk/examples/22.3d/1.index.md
+++ b/src/content/uk/examples/22.3d/1.index.md
@@ -20,5 +20,6 @@ navigation:
 
 Базуючись на **Three.js**, ця сцена використовує модулі `Sky` і `Water` (можна знайти в [офіційному прикладі](https://threejs.org/examples/webgl_shaders_ocean.html)), щоб продемонструвати візуальний вплив інтегрованих вузлів і з'єднань на 3D-середовище.
 
+:kit
 :example{id="rete-js-v2-3d-vrnzly" module="/src/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/1.react.md b/src/content/uk/examples/3.customization/1.react.md
index e5bb9ada..b4367cf3 100644
--- a/src/content/uk/examples/3.customization/1.react.md
+++ b/src/content/uk/examples/3.customization/1.react.md
@@ -21,4 +21,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS. Кастомні компоненти, візуалізовані за допомогою **React.js**, можна використовувати незалежно від вашого стеку технологій, навіть [без JSX](https://react.dev/reference/react/createElement). Таким чином, якщо ваш UI фреймворк не інтегровано, ви можете відобразити частини редактора за допомогою **React.js**, використовуючи цей приклад.
 
+:kit
 :example{id="rete-js-v2-custom-node-jpwdh3" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/3.customization/2.vue.md b/src/content/uk/examples/3.customization/2.vue.md
index cbf64b75..e9206490 100644
--- a/src/content/uk/examples/3.customization/2.vue.md
+++ b/src/content/uk/examples/3.customization/2.vue.md
@@ -21,5 +21,6 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-vue-js-customization-ubl35h" module="/src/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/3.angular.md b/src/content/uk/examples/3.customization/3.angular.md
index 2f495b08..feb1f6da 100644
--- a/src/content/uk/examples/3.customization/3.angular.md
+++ b/src/content/uk/examples/3.customization/3.angular.md
@@ -21,5 +21,6 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-angular-customization-w9umwf" module="/src/app/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/4.svelte.md b/src/content/uk/examples/3.customization/4.svelte.md
index 14e09f98..d9c6dd9b 100644
--- a/src/content/uk/examples/3.customization/4.svelte.md
+++ b/src/content/uk/examples/3.customization/4.svelte.md
@@ -21,4 +21,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-svelte-forked-29v37z" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/3.customization/5.lit.md b/src/content/uk/examples/3.customization/5.lit.md
index 7a8aadbe..6a6e9a78 100644
--- a/src/content/uk/examples/3.customization/5.lit.md
+++ b/src/content/uk/examples/3.customization/5.lit.md
@@ -22,4 +22,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-lit-js-customization-gw7gzk" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/6.performance.md b/src/content/uk/examples/6.performance.md
index c9adf6c3..21251d9c 100644
--- a/src/content/uk/examples/6.performance.md
+++ b/src/content/uk/examples/6.performance.md
@@ -17,4 +17,5 @@ navigation:
 
 У цьому прикладі ви можете встановити кількість вузлів для відображення та оцінити продуктивність під час їх рендерингу. Враховуючи, що візуалізація великої кількості елементів на сторінці завжди пов’язана з проблемами продуктивності, ви можете дослідити такі приклади, як [LOD](/examples/lod) і [LOD GPU](/examples/lod-gpu), використовуючи спеціальні підходи для зменшення цих обмежень
 
+:kit
 :example{id="rete-js-v2-performance-cnbfc0" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/6.vertical-flow.md b/src/content/uk/examples/6.vertical-flow.md
index cc6c9c37..93284c40 100644
--- a/src/content/uk/examples/6.vertical-flow.md
+++ b/src/content/uk/examples/6.vertical-flow.md
@@ -16,7 +16,7 @@ navigation:
 - регулювання точок з'єднання з сокетами.
 - зміна шляху підключення на вертикальну орієнтацію.
 - зміна точок розміщення портів в аранжуванні.
--
+
 :proExample{src="https://retejs-vertical-flow.netlify.app"}
 
 Фактичний приклад створено з використанням React.js, але близько 75% перелічених змін не залежать від стеку. Це означає, що для їх використання в Angular, Vue.js або Svelte вам потрібно буде створити відповідний спеціальний компонент. Якщо ви зіткнетеся з будь-якими проблемами, не соромтеся зв’язатися через GitHub Issues у відповідному репозиторії.
diff --git a/src/content/uk/examples/7.area-extensions.md b/src/content/uk/examples/7.area-extensions.md
index 46c0ec95..a76d0875 100644
--- a/src/content/uk/examples/7.area-extensions.md
+++ b/src/content/uk/examples/7.area-extensions.md
@@ -22,4 +22,5 @@ navigation:
 - `restrictor`: обмежує масштабування та панорамування в межах області
 - `snapGrid`: прив'язка позицій вузлів до сітки
 
+:kit
 :example{id="rete-js-v2-area-extensions-rhskwv" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/14.dataflow.md b/src/content/uk/examples/7.processing/14.dataflow.md
index e08b0f8c..ed853e8d 100644
--- a/src/content/uk/examples/7.processing/14.dataflow.md
+++ b/src/content/uk/examples/7.processing/14.dataflow.md
@@ -21,4 +21,5 @@ navigation:
 
 Кожен вузол має метод `data`, який отримує масиви вхідних даних із відповідних вхідних сокетів і доставляє об’єкт, який містить дані, що відповідають вихідним сокетам. Щоб ініціювати їх виконання, ви можете скористатися методом `engine.fetch`, вказавши ідентифікатор цільового вузла. Відповідно, двигун виконає всіх попередників рекурсивно, витягуючи їхні вихідні дані та доставляючи їх до зазначеного вузла.
 
+:kit
 :example{id="rete-js-v2-dataflow-engine-tyhr1e" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/15.control-flow.md b/src/content/uk/examples/7.processing/15.control-flow.md
index 37277272..2f79ebf8 100644
--- a/src/content/uk/examples/7.processing/15.control-flow.md
+++ b/src/content/uk/examples/7.processing/15.control-flow.md
@@ -19,4 +19,5 @@ navigation:
 
 Кожен вузол має метод `execute`, який приймає ключ вхідного порту як джерело керування, і функцію для передачі керування вихідним вузлам через визначений вихідний порт. Щоб ініціювати виконання потоку, ви можете використовувати метод `engine.execute`, вказавши ідентифікатор початкового вузла. Відповідно, вихідні вузли будуть виконуватися послідовно, починаючи з призначеного вузла.
 
+:kit
 :example{id="rete-js-v2-control-flow-engine-yqi8z7" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/15.hybrid-engine.md b/src/content/uk/examples/7.processing/15.hybrid-engine.md
index 041a8419..fad9f7d8 100644
--- a/src/content/uk/examples/7.processing/15.hybrid-engine.md
+++ b/src/content/uk/examples/7.processing/15.hybrid-engine.md
@@ -19,4 +19,5 @@ navigation:
 
 У цьому прикладі показано, як `rete-engine` дозволяє одночасно інтегрувати потік даних і управління потоком. Отже, певні вузли служать джерелами даних, інші керують потоком, а третій набір включає обидва ці підходи.
 
+:kit
 :example{id="rete-js-v2-hybrid-engine-erkdtu" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/8.arrange.md b/src/content/uk/examples/8.arrange.md
index 2b556cd7..92e6debe 100644
--- a/src/content/uk/examples/8.arrange.md
+++ b/src/content/uk/examples/8.arrange.md
@@ -18,4 +18,5 @@ navigation:
 
 Крім того, він пропонує широкі можливості налаштування, дозволяючи користувачам налаштовувати розміщення вузлів за допомогою різних параметрів і програму застосування для призначення обчислених позицій вузлам (наприклад, включення анімації).
 
+:kit
 :example{id="rete-js-v2-arrange-layout-nodes-ri75lp" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/8.insert-node.md b/src/content/uk/examples/8.insert-node.md
index 29adf6db..5b459bfb 100644
--- a/src/content/uk/examples/8.insert-node.md
+++ b/src/content/uk/examples/8.insert-node.md
@@ -13,6 +13,7 @@ navigation:
 
 Після додавання з’єднання граф упорядковується з анімацією.
 
+:kit
 :example{id="rete-js-v2-insert-node-givohx" module="/src/editor.ts"}
 
 Використовуйте директорію `insert-node` і викликайте `insertableNodes` з відповідними аргументами, щоб інтегрувати цю фічу у ваш додаток.
diff --git a/src/content/uk/examples/8.magnetic-connection.md b/src/content/uk/examples/8.magnetic-connection.md
index c9c81627..ea4a22b5 100644
--- a/src/content/uk/examples/8.magnetic-connection.md
+++ b/src/content/uk/examples/8.magnetic-connection.md
@@ -11,6 +11,7 @@ navigation:
 
 Наведений приклад демонструє техніку покращення UX шляхом збільшення області відпускання з’єднання. Це означає, що користувачам не потрібно цілитися безпосередньо в сокет, щоб створити з’єднання, особливо якщо сокет невеликий або рівень масштабування низький.
 
+:kit
 :example{id="rete-js-v2-magnetic-connection-078ild" module="/src/editor.ts"}
 
 Щоб реалізувати цей підхід у вашому проекті, скопіюйте каталог `magnetic-connection` і виклик відповідної функції `useMagneticConnection` в модуль `editor.ts`. Залежно від рендер плагіна використовуйте існуючий компонент з'єднання в директорії або створіть власний.
diff --git a/src/content/uk/examples/8.smooth-zoom.md b/src/content/uk/examples/8.smooth-zoom.md
index 14284873..c62aed87 100644
--- a/src/content/uk/examples/8.smooth-zoom.md
+++ b/src/content/uk/examples/8.smooth-zoom.md
@@ -15,6 +15,7 @@ navigation:
 
 У редакторі за замовчуванням увімкнено миттєве масштабування з кроком, еквівалентним одному руху коліщатка прокручування. Якщо вам потрібно налаштувати цю поведінку, ви можете розширити клас `Zoom`
 
+:kit
 :example{id="rete-js-v2-smooth-zoom-6sqv8j" module="/src/editor.ts"}
 
 У цьому прикладі основна логіка міститься в `src/zoom.ts`. Щоб інтегрувати це в редактор, просто додайте такий рядок:
diff --git a/src/content/uk/examples/9.context-menu.md b/src/content/uk/examples/9.context-menu.md
index e7343e8c..bd498272 100644
--- a/src/content/uk/examples/9.context-menu.md
+++ b/src/content/uk/examples/9.context-menu.md
@@ -18,4 +18,5 @@ navigation:
 
 Надані функції покладається на класичний пресет, але для покращеної кастомізації його можна замінити, щоб полегшити створення динамічнішого пункту меню.
 
+:kit
 :example{id="rete-js-v2-context-menu-jcelzo" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/9.panning-boundary.md b/src/content/uk/examples/9.panning-boundary.md
index b1b3bb77..9ff39644 100644
--- a/src/content/uk/examples/9.panning-boundary.md
+++ b/src/content/uk/examples/9.panning-boundary.md
@@ -16,6 +16,7 @@ navigation:
 
 Цей приклад демонструє реалізацію панорамування області, коли курсор із перетягуваним вузлом наближається до межі редактора. Залежно від відстані до будь-якої з меж області, починаючи з певного порогу, швидкість панорамування буде обернено пропорційна відстані до межі.
 
+:kit
 :example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
 
 Хоча цей приклад спочатку був розроблений для React.js, показана функція повністю не залежить від фреймворку. Ви можете легко інтегрувати його у свій додаток на іншому стеку, скопіювавши модуль функцій і підключивши його до свого редактора.
diff --git a/src/content/uk/examples/9.readonly.md b/src/content/uk/examples/9.readonly.md
index d8621ff7..6477d0e4 100644
--- a/src/content/uk/examples/9.readonly.md
+++ b/src/content/uk/examples/9.readonly.md
@@ -18,4 +18,5 @@ navigation:
 
 З іншого боку, плагін навмисно не має різноманітних параметрів для кастомізації, щоб він був простим, дозволяючи досліджувати його вихідний код і створювати власні рішення, адаптовані до конкретного випадку використання (наприклад, обмеження додавання лише певних типів вузлів).
 
+:kit
 :example{id="rete-js-v2-readonly-4pi274" module="/src/editor.ts"}
diff --git a/src/locales/en.json b/src/locales/en.json
index 07dd967d..a3f26295 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -103,5 +103,16 @@
   "share": {
     "docs": "docs for Rete.js",
     "example": "example powered by Rete.js"
+  },
+  "kit": {
+    "banner": {
+      "text": "Want to start faster? Use {link} to create a fully configured project in minutes!",
+      "tooltip": "Copy the command {command} to clipboard",
+      "copyNotification": {
+        "success": "Copied to clipboard",
+        "error": "Failed to copy to clipboard"
+      },
+      "button": "Learn More"
+    }
   }
 }
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 56efe5f8..a550726a 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -103,5 +103,16 @@
   "share": {
     "docs": "документація Rete.js",
     "example": "приклад на базі Rete.js"
+  },
+  "kit": {
+    "banner": {
+      "text": "Хочете почати швидше? Використовуйте {link}, щоб створити повністю налаштований проект за кілька хвилин!",
+      "tooltip": "Скопіюйте команду {command} в буфер обміну",
+      "copyNotification": {
+        "success": "Скопійовано в буфер обміну",
+        "error": "Не вдалося скопіювати в буфер обміну"
+      },
+      "button": "Дізнатися більше"
+    }
   }
 }
diff --git a/src/plugins/main.js b/src/plugins/main.js
index d3de50bf..631b00e6 100644
--- a/src/plugins/main.js
+++ b/src/plugins/main.js
@@ -1,7 +1,7 @@
 import {
   Menu, MenuItem, Select, Submenu, Dropdown, Option,
   Drawer, Button, Alert, Tag, Tooltip, Collapse, Panel,
-  Card, Spin, Modal, SkeletonItem
+  Card, Spin, Modal, SkeletonItem, Notice
 } from "view-ui-plus-es";
 
 // eslint-disable-next-line no-undef
@@ -78,6 +78,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     SkeletonItem
   );
 
+  app.config.globalProperties.$Notice = Notice;
+  Notice.config({
+    "top": 70
+  });
+
   nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
 
     if (savedPosition) return savedPosition;