diff --git a/playground/entries/SpinContainer.tsx b/playground/entries/SpinContainer.tsx
index 9e398ffaf6..7e8e8d572e 100644
--- a/playground/entries/SpinContainer.tsx
+++ b/playground/entries/SpinContainer.tsx
@@ -1,6 +1,6 @@
 import { Flex } from '@semcore/ui/base-components';
 import Input from '@semcore/ui/input';
-import type { SpinContainerProps } from '@semcore/ui/spin-container';
+import type { NSSpinContainer } from '@semcore/ui/spin-container';
 import SpinContainer from '@semcore/ui/spin-container';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -9,7 +9,7 @@ import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type SpinContainerJSXProps = JSXProps<SpinContainerProps>;
+export type SpinContainerJSXProps = JSXProps<NSSpinContainer.Props>;
 
 function getJSX(props: SpinContainerJSXProps) {
   return (
diff --git a/semcore/spin-container/package.json b/semcore/spin-container/package.json
index 9dbe94f213..5fa1feca6d 100644
--- a/semcore/spin-container/package.json
+++ b/semcore/spin-container/package.json
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "types": "./lib/types/index.d.ts",
diff --git a/semcore/spin-container/src/SpinContainer.jsx b/semcore/spin-container/src/SpinContainer.tsx
similarity index 72%
rename from semcore/spin-container/src/SpinContainer.jsx
rename to semcore/spin-container/src/SpinContainer.tsx
index f58a00569d..e561d24108 100644
--- a/semcore/spin-container/src/SpinContainer.jsx
+++ b/semcore/spin-container/src/SpinContainer.tsx
@@ -1,28 +1,43 @@
 import { FadeInOut, Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
 import Spin from '@semcore/spin';
 import React from 'react';
 
+import type { NSSpinContainer } from './SpinContainer.type';
 import style from './style/spin-container.shadow.css';
 
-class SpinContainerRoot extends Component {
+type State = {
+  inert?: boolean;
+};
+
+class SpinContainerRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSSpinContainer.Component>,
+  typeof SpinContainerRoot.enhance,
+  {},
+  {},
+  State,
+  NSSpinContainer.DefaultProps
+> {
   static displayName = 'SpinContainer';
   static style = style;
   static defaultProps = {
     size: 'xxl',
     theme: 'dark',
     duration: 200,
-  };
+  } as const;
 
-  static enhance = [resolveColorEnhance()];
+  static enhance = [resolveColorEnhance()] as const;
 
-  state = {
+  state: State = {
     inert: this.props.loading,
   };
 
-  componentDidUpdate(prevProps) {
+  private inertTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidUpdate(prevProps: typeof this.asProps) {
     const { loading } = this.props;
     if (prevProps.loading !== loading) {
       if (this.inertTimer) {
@@ -85,8 +100,10 @@ class SpinContainerRoot extends Component {
   }
 }
 
-class Overlay extends Component {
-  static defaultProps = ({ size, theme }) => ({
+type OverlayProps = Intergalactic.InternalTypings.InferChildComponentProps<NSSpinContainer.Overlay.Component, typeof SpinContainerRoot, 'Overlay'>;
+
+class Overlay extends Component<OverlayProps> {
+  static defaultProps = ({ size, theme }: OverlayProps) => ({
     children: <Spin size={size} theme={theme} />,
   });
 
@@ -103,7 +120,7 @@ class Overlay extends Component {
   }
 }
 
-function Content(props) {
+function Content(props: Intergalactic.InternalTypings.InferComponentProps<NSSpinContainer.Content.Component>) {
   const SContent = Root;
   const { styles } = props;
   return sstyled(styles)(<SContent render={Box} />);
@@ -114,7 +131,10 @@ function Content(props) {
  *
  * {@link https://developer.semrush.com/intergalactic/components/spin-container/spin-container-api/|API} | {@link https://developer.semrush.com/intergalactic/components/spin-container/spin-container-code/|Examples}
  */
-const SpinContainer = createComponent(SpinContainerRoot, {
+const SpinContainer = createComponent<
+  NSSpinContainer.Component,
+  typeof SpinContainerRoot
+>(SpinContainerRoot, {
   Overlay,
   Content,
 });
diff --git a/semcore/spin-container/src/SpinContainer.type.ts b/semcore/spin-container/src/SpinContainer.type.ts
new file mode 100644
index 0000000000..f13b784e15
--- /dev/null
+++ b/semcore/spin-container/src/SpinContainer.type.ts
@@ -0,0 +1,65 @@
+import type { FadeInOutProps, BoxProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSSpin } from '@semcore/spin';
+
+declare namespace NSSpinContainer {
+  type Props = BoxProps &
+    NSSpin.Props & {
+      /**
+       * Color of container spinner; you can use your own color
+       */
+      background?: string;
+      /** Duration of animation displaying in ms
+       * @default 200
+       */
+      duration?: number;
+      /**
+       * Property responsible for displaying the spinner
+       * */
+      loading?: boolean;
+    };
+  type DefaultProps = {
+    size: 'xxl';
+    theme: 'dark';
+    duration: 200;
+  };
+  type Ctx = {
+    getOverlayProps: PropGetterFn;
+  };
+
+  namespace Content {
+    type Props = BoxProps & FadeInOutProps;
+
+    type Component = Intergalactic.Component<'div', Props>;
+  }
+
+  namespace Overlay {
+    type Props = BoxProps & {
+      /**
+       * Css background; you can use your own color
+       */
+      background?: string;
+    };
+    type DefaultProps = {
+      children: React.JSX.Element;
+    };
+
+    type Component = Intergalactic.Component<'div', Props>;
+  }
+
+  type Component = Intergalactic.Component<'div', Props, Ctx> & {
+    Content: Content.Component;
+    Overlay: Overlay.Component;
+  };
+}
+
+/** @deprecated It will be removed in v18. */
+export type SpinContainerProps = NSSpinContainer.Props;
+/** @deprecated It will be removed in v18. */
+export type SpinContainerContext = NSSpinContainer.Ctx;
+/** @deprecated It will be removed in v18. */
+export type SpinOverlayProps = NSSpinContainer.Content.Props;
+/** @deprecated It will be removed in v18. */
+export type SpinContainerOverlayProps = NSSpinContainer.Overlay.Props;
+
+export type { NSSpinContainer };
diff --git a/semcore/spin-container/src/index.d.ts b/semcore/spin-container/src/index.d.ts
deleted file mode 100644
index e1e292cd7a..0000000000
--- a/semcore/spin-container/src/index.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { FadeInOutProps, BoxProps } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { NSSpin } from '@semcore/spin';
-
-export type SpinContainerProps = BoxProps &
-  NSSpin.Props & {
-    /**
-     * Color of container spinner; you can use your own color
-     */
-    background?: string;
-    /** Duration of animation displaying in ms
-     * @default 200
-     */
-    duration?: number;
-    /**
-     * Property responsible for displaying the spinner
-     * */
-    loading?: boolean;
-  };
-
-export type SpinOverlayProps = BoxProps & FadeInOutProps & {};
-
-export type SpinContainerContext = {
-  getOverlayProps: PropGetterFn;
-};
-
-export type SpinContainerOverlayProps = BoxProps & {
-  /**
-   * Css background; you can use your own color
-   */
-  background?: string;
-};
-
-declare const SpinContainer: Intergalactic.Component<
-  'div',
-  SpinContainerProps,
-  SpinContainerContext
-> & {
-  Content: Intergalactic.Component<'div', SpinOverlayProps>;
-  Overlay: Intergalactic.Component<'div', SpinContainerOverlayProps>;
-};
-
-export default SpinContainer;
diff --git a/semcore/spin-container/src/index.js b/semcore/spin-container/src/index.ts
similarity index 53%
rename from semcore/spin-container/src/index.js
rename to semcore/spin-container/src/index.ts
index eb87b5c6ab..5ae1fccbd9 100644
--- a/semcore/spin-container/src/index.js
+++ b/semcore/spin-container/src/index.ts
@@ -1 +1,2 @@
 export { default } from './SpinContainer';
+export * from './SpinContainer.type';
diff --git a/semcore/spin-container/vite.config.ts b/semcore/spin-container/vite.config.ts
index 0991a16528..90f46b4cb2 100644
--- a/semcore/spin-container/vite.config.ts
+++ b/semcore/spin-container/vite.config.ts
@@ -7,7 +7,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       lib: {
-        entry: './src/index.js',
+        entry: './src/index.ts',
       },
       rollupOptions: {
         external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
diff --git a/website/docs/components/spin-container/spin-container-api.md b/website/docs/components/spin-container/spin-container-api.md
index d685b6b821..40f36685ec 100644
--- a/website/docs/components/spin-container/spin-container-api.md
+++ b/website/docs/components/spin-container/spin-container-api.md
@@ -11,7 +11,7 @@ import SpinContainer from '@semcore/ui/spin-container';
 <SpinContainer />;
 ```
 
-<TypesView type="SpinContainerProps" :types={...types} />
+<TypesView type="NSSpinContainer.Props" :types={...types} />
 
 ## SpinContainer.Content