diff --git a/package-lock.json b/package-lock.json
index eaf503119263..f910f19ee252 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@gravity-ui/date-components": "^2.0.1",
         "@gravity-ui/icons": "^2.8.1",
         "@gravity-ui/page-constructor": "^5.2.0",
-        "@gravity-ui/uikit": "^6.17.0",
+        "@gravity-ui/uikit": "^6.20.0",
         "@mdx-js/mdx": "^2.3.0",
         "@mdx-js/react": "^2.3.0",
         "@octokit/rest": "^20.1.1",
@@ -2474,9 +2474,9 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "6.17.0",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.17.0.tgz",
-      "integrity": "sha512-aelbGQh0DxgZ/b3hbjZNBPc417mmoL4P5vq6yYOvUol/4GKimofgs7kOB2IjIVOAaEYivGgoVjmLQxREJfM15A==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.20.0.tgz",
+      "integrity": "sha512-ngeFZH0CgF+6cNwWTrtwecYkb1Rb7TWFg3eUg87TGLvXiEemepJuwLvM4t9WX3yZFzFCzIoHML2h/SM6VXhjyQ==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/i18n": "^1.3.0",
diff --git a/package.json b/package.json
index a0988c0518e0..a73bb65678a0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@gravity-ui/date-components": "^2.0.1",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/page-constructor": "^5.2.0",
-    "@gravity-ui/uikit": "^6.17.0",
+    "@gravity-ui/uikit": "^6.20.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@octokit/rest": "^20.1.1",
diff --git a/src/content/components/uikit/Overlay/OverlayComponent.tsx b/src/content/components/uikit/Overlay/OverlayComponent.tsx
new file mode 100644
index 000000000000..551bcd148c81
--- /dev/null
+++ b/src/content/components/uikit/Overlay/OverlayComponent.tsx
@@ -0,0 +1,32 @@
+import {Box, Flex, Loader, Overlay} from '@gravity-ui/uikit';
+import React from 'react';
+
+type OverlayComponentProps = {
+    visible?: boolean;
+    background?: 'base' | 'float';
+};
+
+export const OverlayComponent = ({visible, background}: OverlayComponentProps) => {
+    const anchorRef = React.useRef(null);
+
+    return (
+        <Box position="relative">
+            <Flex
+                ref={anchorRef}
+                style={{
+                    border: '2px dashed',
+                }}
+                width={100}
+                height={100}
+                color="var(--g-color-text-secondary)"
+                alignItems="center"
+                justifyContent="center"
+            >
+                Some text
+            </Flex>
+            <Overlay visible={visible} background={background}>
+                <Loader />
+            </Overlay>
+        </Box>
+    );
+};
diff --git a/src/content/components/uikit/Overlay/index.ts b/src/content/components/uikit/Overlay/index.ts
new file mode 100644
index 000000000000..41b79304cd16
--- /dev/null
+++ b/src/content/components/uikit/Overlay/index.ts
@@ -0,0 +1,29 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Overlay'};
+
+export const overlayConfig = {
+    id: 'overlay',
+    title: 'Overlay',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() => import('./OverlayComponent').then((mod) => mod.OverlayComponent)),
+        props: {
+            visible: {
+                type: 'switch',
+                defaultValue: true,
+            },
+            background: {
+                type: 'select',
+                values: mappingOptions(['base', 'float']),
+                defaultValue: 'base',
+            },
+        },
+    },
+};
diff --git a/src/content/components/uikit/index.ts b/src/content/components/uikit/index.ts
index 29e303f68637..4c85aa181ae2 100644
--- a/src/content/components/uikit/index.ts
+++ b/src/content/components/uikit/index.ts
@@ -18,6 +18,7 @@ import {listConfig} from './List';
 import {loaderConfig} from './Loader';
 import {menuConfig} from './Menu';
 import {modalConfig} from './Modal';
+import {overlayConfig} from './Overlay';
 import {paginationConfig} from './Pagination';
 import {paletteConfig} from './Palette';
 import {pinInputConfig} from './PinInput';
@@ -61,6 +62,7 @@ const uikitComponents: Component[] = [
     loaderConfig,
     menuConfig,
     modalConfig,
+    overlayConfig,
     paginationConfig,
     paletteConfig,
     pinInputConfig,