diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 64b49dd2..57038afb 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8260,6 +8260,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "kind",
+          "kind": "let",
+          "description": "Specify the kind of progress bar",
+          "type": "\"default\" | \"inline\" | \"indented\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",
diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
index e24a46f1..4cd09440 100644
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@@ -35,6 +35,16 @@ Use `hideLabel` to visually hide the label text.
 
 <ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+### Inline variant
+
+The inline variant visually hides the `helperText`.
+
+<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### Indented variant
+
+<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
 ### UX example
 
 This example shows how to animate the progress bar from 0 to 100% with start and end states.
diff --git a/types/ProgressBar/ProgressBar.svelte.d.ts b/types/ProgressBar/ProgressBar.svelte.d.ts
index f86e9a1b..d2f44f28 100644
--- a/types/ProgressBar/ProgressBar.svelte.d.ts
+++ b/types/ProgressBar/ProgressBar.svelte.d.ts
@@ -15,6 +15,12 @@ export interface ProgressBarProps
    */
   max?: number;
 
+  /**
+   * Specify the kind of progress bar
+   * @default "default"
+   */
+  kind?: "default" | "inline" | "indented";
+
   /**
    * Specify the size
    * @default "md"