diff --git a/playground/entries/ProgressBar.tsx b/playground/entries/ProgressBar.tsx
index 22114fc6ee..de7da825a4 100644
--- a/playground/entries/ProgressBar.tsx
+++ b/playground/entries/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import type { ProgressBarProps } from '@semcore/ui/progress-bar';
+import type { NSProgressBar } from '@semcore/ui/progress-bar';
 import ProgressBar from '@semcore/ui/progress-bar';
 import React from 'react';
 
@@ -6,13 +6,13 @@ import type { JSXProps } from '../types/JSXProps';
 import type { PlaygroundEntry } from '../types/Playground';
 import createGithubLink from '../utils/createGHLink';
 
-export type ProgressBarJSXProps = JSXProps<ProgressBarProps>;
+export type ProgressBarJSXProps = JSXProps<NSProgressBar.Props>;
 
 function getJSX({ handleControlChange, ...progressBarProps }: ProgressBarJSXProps) {
   return <ProgressBar {...progressBarProps} aria-label='Progress bar' w={200} />;
 }
 
-const entry: PlaygroundEntry<ProgressBarProps> = {
+const entry: PlaygroundEntry<NSProgressBar.Props> = {
   JSX: (props) => getJSX(props),
   controls: {
     size: {
diff --git a/semcore/progress-bar/src/ProgressBar.tsx b/semcore/progress-bar/src/ProgressBar.tsx
index 69d8b07497..ff9f0127ad 100644
--- a/semcore/progress-bar/src/ProgressBar.tsx
+++ b/semcore/progress-bar/src/ProgressBar.tsx
@@ -4,7 +4,7 @@ import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import React from 'react';
 
-import type { ProgressBarRootComponent, ProgressBarComponent, ProgressBarValueComponent } from './ProgressBar.type';
+import type { NSProgressBar } from './ProgressBar.type';
 import style from './style/progress-bar.shadow.css';
 
 function isCustomTheme(theme?: string) {
@@ -14,7 +14,7 @@ function isCustomTheme(theme?: string) {
 }
 
 class ProgressBarRoot extends Component<
-  Intergalactic.InternalTypings.InferComponentProps<ProgressBarRootComponent>,
+  Intergalactic.InternalTypings.InferComponentProps<NSProgressBar.Root>,
   typeof ProgressBarRoot.enhance
 > {
   static displayName = 'ProgressBar';
@@ -60,7 +60,7 @@ class ProgressBarRoot extends Component<
 
 function Value(
   props: Intergalactic.InternalTypings.InferChildComponentProps<
-    ProgressBarValueComponent,
+    NSProgressBar.Value.Root,
     typeof ProgressBarRoot,
     'Value'
   >,
@@ -81,6 +81,6 @@ function Value(
 
 const ProgressBar = createComponent(ProgressBarRoot, {
   Value,
-}) as ProgressBarComponent;
+}) as NSProgressBar.Component;
 
 export default ProgressBar;
diff --git a/semcore/progress-bar/src/ProgressBar.type.ts b/semcore/progress-bar/src/ProgressBar.type.ts
index 6bcda76000..92393add4a 100644
--- a/semcore/progress-bar/src/ProgressBar.type.ts
+++ b/semcore/progress-bar/src/ProgressBar.type.ts
@@ -1,43 +1,58 @@
+/* eslint-disable @typescript-eslint/no-namespace */
 import type { BoxProps } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 
-export type ProgressBarProps = BoxProps & {
-  /**
-   * Progress bar theme
-   * @default invert
-   */
-  theme?: 'dark' | 'invert' | string;
-  /**
-   * Progress bar size
-   * @default m
-   */
-  size?: 's' | 'm' | 'l';
-  /** Value as a percentage */
-  value?: number;
-  /** Duration of animation, ms
-   * @default 1000
-   */
-  duration?: number;
-};
-
-export type ValueProps = BoxProps & {
-  /** Controls the size of the value bar */
-  size?: 's' | 'm' | 'l';
-  /** Progress value */
-  value?: number;
-  /** Animation diration in milliseconds for transitions */
-  duration?: number;
-  /** Color theme */
-  theme?: string;
-};
-
-export type ProgressBarCxt = {
-  getValueProps: PropGetterFn;
-};
-
-export type ProgressBarRootComponent = Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt>;
-export type ProgressBarValueComponent = Intergalactic.Component<'div', ValueProps>;
-
-export type ProgressBarComponent = ProgressBarRootComponent & {
-  Value: ProgressBarValueComponent;
-};
+declare namespace NSProgressBar {
+  type Props = BoxProps & {
+    /**
+     * Progress bar theme
+     * @default invert
+     */
+    theme?: 'dark' | 'invert' | string;
+    /**
+     * Progress bar size
+     * @default m
+     */
+    size?: 's' | 'm' | 'l';
+    /** Value as a percentage */
+    value?: number;
+    /** Duration of animation, ms
+     * @default 1000
+     */
+    duration?: number;
+  };
+
+  type Ctx = {
+    getValueProps: PropGetterFn;
+  };
+
+  type Root = Intergalactic.Component<'div', Props, Ctx>;
+
+  namespace Value {
+    type Props = BoxProps & {
+      /** Controls the size of the value bar */
+      size?: 's' | 'm' | 'l';
+      /** Progress value */
+      value?: number;
+      /** Animation diration in milliseconds for transitions */
+      duration?: number;
+      /** Color theme */
+      theme?: string;
+    };
+
+    type Root = Intergalactic.Component<'div', Props>;
+  }
+
+  type Component = Root & {
+    Value: Value.Root;
+  };
+}
+
+/** @deprecated It will be removed in v18. */
+export type ProgressBarProps = NSProgressBar.Props;
+/** @deprecated It will be removed in v18. */
+export type ValueProps = NSProgressBar.Value.Props;
+/** @deprecated It will be removed in v18. */
+export type ProgressBarCxt = NSProgressBar.Ctx;
+
+export type { NSProgressBar };
diff --git a/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx b/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx
index f803453b7b..59c956e2c7 100644
--- a/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx
+++ b/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx
@@ -1,8 +1,8 @@
 import ProgressBar from '@semcore/ui/progress-bar';
-import type { ProgressBarProps } from '@semcore/ui/progress-bar';
+import type { NSProgressBar } from '@semcore/ui/progress-bar';
 import React from 'react';
 
-type ProgressBarExampleProps = ProgressBarProps;
+type ProgressBarExampleProps = NSProgressBar.Props;
 const Demo = (props: ProgressBarExampleProps) => {
   return (
     <ProgressBar tabIndex={0} value={props.value} size={props.size} theme={props.theme} aria-label='Custom theme example' duration={props.duration}>
diff --git a/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx b/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
index 301f67a6f5..c978978907 100644
--- a/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
+++ b/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
@@ -1,9 +1,9 @@
 import { Box } from '@semcore/ui/base-components';
 import ProgressBar from '@semcore/ui/progress-bar';
-import type { ProgressBarProps } from '@semcore/ui/progress-bar';
+import type { NSProgressBar } from '@semcore/ui/progress-bar';
 import React from 'react';
 
-type ProgressBarExampleProps = ProgressBarProps;
+type ProgressBarExampleProps = NSProgressBar.Props;
 const Demo = (props: ProgressBarExampleProps) => {
   return (
     <Box style={{ backgroundColor: '#191B23' }} h={50}>