+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum erat odio, et lacinia + magna blandit ut. Nullam sagittis tristique magna, vel congue lorem convallis eu. Aenean vitae + pulvinar mi. Morbi nisi enim, tincidunt et sapien at, viverra facilisis nisi. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum erat odio, et lacinia + magna blandit ut. Nullam sagittis tristique magna, vel congue lorem convallis eu. Aenean vitae + pulvinar mi. Morbi nisi enim, tincidunt et sapien at, viverra facilisis nisi. Fusce sed suscipit + dui. Aenean tincidunt et lectus sed euismod. Proin sit amet diam a enim hendrerit euismod at sit + amet nibh. Etiam eleifend nulla a ex lacinia, eu laoreet lectus auctor. Nam sagittis, eros nec + convallis bibendum, tortor neque ultricies arcu, vitae volutpat metus nunc non ipsum. Cras + dapibus lorem vitae mauris porta, id lacinia orci blandit. Maecenas ac mauris urna. Curabitur + congue egestas ante, at malesuada diam consequat non. Etiam et ultrices eros. Proin in efficitur + arcu. Suspendisse interdum lorem quis placerat mattis. +
++ Nunc sed orci augue. Praesent interdum viverra lacinia. Quisque a est accumsan, maximus diam + vitae, tempor metus. Nam congue nec urna sed mollis. Suspendisse a lectus vel turpis accumsan + bibendum interdum sed nisl. Nam efficitur tincidunt ornare. In sagittis a ex quis blandit. Donec + odio massa, fringilla non mi nec, tristique dictum nisi. Nulla varius pulvinar tincidunt. Nam + porta convallis lorem, venenatis ornare ligula ornare porta. Donec ut libero sed dui laoreet + rutrum a pellentesque elit. Praesent pharetra leo quam, sed sodales leo consectetur ut. Cras + luctus nulla ac urna consectetur feugiat. +
++ Proin augue ex, tempus id luctus eget, ultrices id augue. Aenean eu dui at orci dignissim + viverra venenatis at lectus. In hac habitasse platea dictumst. Nullam facilisis congue sodales. + Aliquam malesuada lacus vel libero laoreet aliquam. Nunc gravida velit dapibus est interdum + tristique. Nunc tincidunt malesuada nisi id ornare. Aliquam tempus viverra odio a efficitur. + Nunc non ligula sodales, finibus eros nec, dignissim ex. Nulla porttitor vestibulum libero. Duis + non nisi turpis. Pellentesque pulvinar ipsum quis augue consectetur ultricies. Nulla venenatis, + quam eu suscipit facilisis, leo nibh aliquam quam, at ullamcorper nisi sapien at lectus. +
++ Nulla vulputate justo a orci condimentum aliquet. Mauris vestibulum metus id semper posuere. + Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer + dictum facilisis leo, at viverra ligula congue non. Etiam euismod fermentum turpis ut semper. + Aliquam pellentesque ante vitae leo tempus, vitae ullamcorper ex eleifend. Integer porta dapibus + nisi, ut egestas odio tincidunt eu. +
++ Cras vitae feugiat magna, vel rhoncus odio. Cras et consequat tortor, id placerat orci. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras vel + mi malesuada, mattis dui quis, faucibus lorem. Vestibulum ac pulvinar enim, ut dictum sem. Donec + eget purus at eros sodales tempus vel in nisl. Fusce volutpat at risus sed finibus. Etiam + condimentum enim ut rutrum pulvinar. Curabitur eu lacinia lacus, et interdum orci. Duis sagittis + metus sit amet erat mollis commodo ac a tellus. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Fusce turpis ipsum, bibendum eget efficitur at, porta + eu erat. Nullam ac commodo est, id elementum mi. Morbi id augue placerat mauris sodales gravida + in eu nunc. Nulla facilisis mauris eu lectus ornare, blandit imperdiet mauris sagittis. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum erat odio, et lacinia + magna blandit ut. Nullam sagittis tristique magna, vel congue lorem convallis eu. Aenean vitae + pulvinar mi. Morbi nisi enim, tincidunt et sapien at, viverra facilisis nisi. +
+
+
+ {children}
+
+
+);
+
+export default ModalBody;
diff --git a/components/Modal/src/partials/Container.tsx b/components/Modal/src/partials/Container.tsx
new file mode 100644
index 00000000..0016ac9c
--- /dev/null
+++ b/components/Modal/src/partials/Container.tsx
@@ -0,0 +1,57 @@
+import React, { FC, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import useIsMounted from '@byndyusoft-ui/use-is-mounted';
+import Portal from '@byndyusoft-ui/portal';
+import Overlay from '@byndyusoft-ui/Overlay';
+import { useModals, useModalsState } from '@byndyusoft-ui/modals-provider';
+import { IModalContainerProps } from '../Modal.types';
+
+const ModalContainer: FC
+
+
+ {isOpen && children}
+
+
+
+
+
+ );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ----------------- | ------------------ | ------------------ | ------------------------------------------------------------------------- |
+| children | ReactNode | - | Content to be rendered inside the overlay |
+| className | string | - | Additional CSS class for the overlay container |
+| classNames | IOverlayClassNames | Overlay.module.css | Object with class names for overlay elements |
+| refElement | HTMLElement | - | Reference to the element that will be used lock scroll |
+| color | string | #000000 | Overlay background color (hex format) |
+| backgroundOpacity | number | 0.6 | Background opacity (from 0 to 1) |
+| blur | number | 10 | Blur effect value in pixels |
+| zIndex | number | 100 | Overlay z-index |
+| isVisible | boolean | false | Controls overlay visibility |
+| center | boolean | false | Centers the content inside overlay |
+| fixed | boolean | false | Determines whether overlay should have fixed position instead of absolute |
+
+# Notes
+
+- Component uses `useBodyScrollLock` hook to prevent body scrolling when overlay is visible
+- The color prop expects a hex color value (e.g., "#000000")
+- The refElement prop is used to lock scroll of the element when overlay is visible
diff --git a/components/Overlay/package.json b/components/Overlay/package.json
new file mode 100644
index 00000000..5b7632f3
--- /dev/null
+++ b/components/Overlay/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@byndyusoft-ui/Overlay",
+ "version": "0.1.0",
+ "description": "Byndyusoft UI Overlay React Component",
+ "keywords": [
+ "byndyusoft",
+ "byndyusoft-ui",
+ "react",
+ "overlay"
+ ],
+ "author": "Dmitrii Maletskii Main content
+ Overlay content
+
+ {children && isVisible && children}
+
+ );
+ }
+);
+
+export default Overlay;
diff --git a/components/Overlay/src/Overlay.types.ts b/components/Overlay/src/Overlay.types.ts
new file mode 100644
index 00000000..6e08dfc9
--- /dev/null
+++ b/components/Overlay/src/Overlay.types.ts
@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+
+export interface IOverlayProps extends HTMLAttributes
+
+);
+
+const FrameTemplateWithModal: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+ const frameRef = useRef
+
+
+
+ Long content to demonstrate scrolling...
+
+
+ Overlay
+Text in div overlay
+
+
+ );
+};
+
+const FrameTemplateWithCustomProps: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+ const frameRef = useRef
+
+
+
+ Long content to demonstrate scrolling...
+
+
+ Overlay
+Text in div overlay
+
+
+ );
+};
+
+const FrameTemplateWithCustomStyles: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+ const frameRef = useRef
+
+ Long content to demonstrate scrolling...
+
+
+ );
+};
+
+const FrameTemplateWithLoading: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+ const frameRef = useRef
+
+ Long content to demonstrate scrolling...
+
+
+ );
+};
+
+export const GeneralOverlayStory: StoryObj
+
+
+
+ 
+
+
+ Overlay
+Text in div overlay
+{/* modal content */}
;
+}
+
+// Usage with custom target element
+function CustomScrollLock({ isLocked }) {
+ const containerRef = useRef
+ {/* content */}
+
+ );
+}
+```
+
+## API
+
+```typescript
+useScrollLock(isLocked?: boolean, target?: HTMLElement | null): void
+```
+
+#### Parameters
+
+- `isLocked` (boolean) - When `true`, element scroll will be locked. When `false` or `undefined`, scroll will be unlocked.
+- `target` (HTMLElement | null) - Optional. The HTML element to lock scrolling on. If not provided or null, defaults to document.body.
diff --git a/hooks/use-scroll-lock/package.json b/hooks/use-scroll-lock/package.json
new file mode 100644
index 00000000..d5d9c357
--- /dev/null
+++ b/hooks/use-scroll-lock/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@byndyusoft-ui/use-scroll-lock",
+ "version": "0.1.0",
+ "description": "Byndyusoft UI React Hook",
+ "keywords": [
+ "byndyusoft",
+ "byndyusoft-ui",
+ "react",
+ "hook",
+ "use-scroll-lock"
+ ],
+ "author": "Dmitrii Maletskii
+
+
+ {isModalOpen && (
+
+ );
+};
+
+const TemplateWithTarget = (): JSX.Element => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const modalRef = useRef
+
+ )}
+
+ Modal window
+When this window is opened, the scrolling of the body is blocked
+ +Long content to demonstrate scrolling...
+
+
+
+ {isModalOpen && (
+
+ );
+};
+
+export const UseScrollLockWithoutTarget: StoryObj
+
+ )}
+
+ Modal window
+When this window is opened, the scrolling of the element is blocked
+ +Long content to demonstrate scrolling...
+