diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index 0805e05d07..1ed87dfd46 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -4,6 +4,7 @@
   <ButtonGroup />
   <Highlight />
   <Input />
+  <ProgressBar />
   <Integration />
 </template>
 
@@ -14,4 +15,5 @@ import Button from './components/button.vue'
 import Highlight from './components/highlight.vue'
 import Input from './components/input.vue'
 import Integration from './components/integration.vue'
+import ProgressBar from './components/progress-bar.vue'
 </script>
diff --git a/packages/x-design-system/demo/src/components/progress-bar.vue b/packages/x-design-system/demo/src/components/progress-bar.vue
new file mode 100644
index 0000000000..38e1eacd5d
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/progress-bar.vue
@@ -0,0 +1,65 @@
+<template>
+  <Wrapper feature="ProgressBar" :rows="rows">
+    <template #default>
+      <span>default</span>
+      <div class="xds:progress-bar xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+    </template>
+    <template #size>
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>sm</span>
+        <div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>lg</span>
+        <div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+    </template>
+    <template #color>
+      <div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
+        <span>default</span>
+        <div class="xds:progress-bar xds:w-320">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+      <div
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:flex xds:gap-8 xds:mr-16 xds:items-center"
+      >
+        <span>{{ key }}</span>
+        <div class="xds:progress-bar xds:w-320" :class="value">
+          <div class="xds:progress-bar-fill xds:w-[30%]" />
+        </div>
+      </div>
+    </template>
+
+    <template #combinations>
+      <span>lg warning</span>
+      <div class="xds:progress-bar xds:progress-bar-lg xds:progress-bar-warning xds:w-320">
+        <div class="xds:progress-bar-fill xds:w-[30%]" />
+      </div>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = ['default', 'size', 'color', 'combinations']
+const colors = {
+  neutral: 'xds:progress-bar-neutral',
+  lead: 'xds:progress-bar-lead',
+  auxiliary: 'xds:progress-bar-auxiliary',
+  accent: 'xds:progress-bar-accent',
+  highlight: 'xds:progress-bar-highlight',
+  success: 'xds:progress-bar-success',
+  warning: 'xds:progress-bar-warning',
+  error: 'xds:progress-bar-error',
+}
+</script>
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index ac048a63ae..26119a320f 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -4,3 +4,4 @@
 @import './button-group.css';
 @import './highlight.css';
 @import './input.css';
+@import './progress-bar.css';
diff --git a/packages/x-design-system/lib/components/progress-bar.css b/packages/x-design-system/lib/components/progress-bar.css
new file mode 100644
index 0000000000..700cf48994
--- /dev/null
+++ b/packages/x-design-system/lib/components/progress-bar.css
@@ -0,0 +1,30 @@
+/* Base */
+@utility progress-bar {
+  @apply xds:rounded-sm;
+  @apply xds:inline-block;
+  @apply xds:bg-neutral-25;
+  @apply xds:overflow-hidden;
+
+  /* `@apply xds:progress-bar-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-4;
+
+  & > .xds\:progress-bar-fill {
+    @apply xds:h-full;
+    @apply xds:bg-neutral-50;
+  }
+}
+
+/* Sizes */
+@utility progress-bar-md {
+  @apply xds:h-4;
+}
+@utility progress-bar-lg {
+  @apply xds:h-8;
+}
+
+/* Colors */
+@utility progress-bar-* {
+  & > .xds\:progress-bar-fill {
+    background-color: --value(--color- * -50);
+  }
+}