diff --git a/package-lock.json b/package-lock.json
index f034470..a227deb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte-steps",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte-steps",
-      "version": "1.0.3",
+      "version": "2.0.0",
       "license": "BSD-2-Clause",
       "devDependencies": {
         "@sveltejs/adapter-static": "^1.0.0-next",
diff --git a/package.json b/package.json
index fe32063..4a25d42 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-steps",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A customizable step component written in Svelte",
   "repository": {
     "type": "git",
diff --git a/src/lib/Steps.svelte b/src/lib/Steps.svelte
index 9b57bc5..48dc4fb 100644
--- a/src/lib/Steps.svelte
+++ b/src/lib/Steps.svelte
@@ -16,7 +16,7 @@
 		- `iconProps`: An object that will be passed as props to the `icon` component.
 	- `current`: current step index. Number. Default `0`
 	- `size`: size of the step buttons. String. Default `"3rem"`
-	- `lineHeight`: height of the connecting lines between the step buttons. String. Default `"0.3rem"`
+	- `line`: thickness of the connecting lines between the step buttons. String. Default `"0.3rem"`
 	- `primary`: Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'`
 	- `secondary`: Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'`
 	- `light`: Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'`
@@ -37,7 +37,8 @@
   export let steps
   export let current = 0
   export let size = '3rem'
-  export let lineHeight = '0.3rem'
+  export let lineHeight = undefined
+  export let line = '0.3rem'
   export let primary = 'var(--bs-primary, #3a86ff)'
   export let secondary = 'var(--bs-secondary, #bbbbc0)'
   export let light = 'var(--bs-light, white)'
@@ -45,6 +46,10 @@
   export let borderRadius = '50%'
   export let fontFamily = ''
 
+  //
+  if (lineHeight) {
+    line = lineHeight
+  }
   if (current > steps.length - 1) {
     current = steps.length - 1
   }
@@ -52,7 +57,7 @@
     current = 0
   }
 
-  const progress = tweened(current, {
+  $: progress = tweened(current, {
     duration: 400,
   })
 
@@ -80,11 +85,12 @@
 >
   <div class="block">
     <div class="background">
+      <!-- single line from start to end -->
       <div class="d-flex align-items-center" style="width: 100%; height: 100%">
         <div style="width: {half}%; height: 100%;" />
         <div
           class="bg-secondary"
-          style="height: {lineHeight}; width: {100 - half * 2}%;"
+          style="height: {line}; width: {100 - half * 2}%;"
         >
           <div
             class="progress-bar"
diff --git a/src/lib/StepsVertical.svelte b/src/lib/StepsVertical.svelte
new file mode 100644
index 0000000..81f36ba
--- /dev/null
+++ b/src/lib/StepsVertical.svelte
@@ -0,0 +1,238 @@
+<!--
+    @component 
+
+    @name svelte-steps
+
+    @description This is the steps component.
+
+    @props 
+    
+    - `steps`:
+	- Array of object. Length has to be more than 1
+	- Required
+	- Each item is a step object that can have:
+		- `text`: The text displayed below each steps.
+		- `icon`: A svelte component displayed inside each steps.
+		- `iconProps`: An object that will be passed as props to the `icon` component.
+	- `current`: current step index. Number. Default `0`
+	- `size`: size of the step buttons. String. Default `"2rem"`
+	- `line`: thickness of the connecting lines between the step buttons. String. Default `"0.15rem"`
+	- `primary`: Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'`
+	- `secondary`: Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'`
+	- `light`: Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'`
+	- `dark`: Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'`
+	- `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle)
+	- `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"`
+
+	@events
+
+	- `on:click(e)`: click event with arg as the clicked step index as `e.detail.current` and last step index as `e.detail.last`
+-->
+<script>
+  // A bootstrap step component
+  import { createEventDispatcher } from 'svelte'
+  import Check from './Check.svelte'
+
+  export let steps
+  export let current = 0
+  export let size = '2rem'
+  export let lineHeight = undefined // for backward compatibility
+  export let line = '0.15rem'
+  export let primary = 'var(--bs-primary, #3a86ff)'
+  export let secondary = 'var(--bs-secondary, #bbbbc0)'
+  export let light = 'var(--bs-light, white)'
+  export let dark = 'var(--bs-dark, black)'
+  export let borderRadius = '50%'
+  export let fontFamily = ''
+  export let reverse = false
+
+  //
+  if (lineHeight) {
+    line = lineHeight
+  }
+
+  if (current > steps.length - 1) {
+    current = steps.length - 1
+  }
+  if (current < 0) {
+    current = 0
+  }
+
+  $: half = 100 / steps.length / 2
+  const dispatch = createEventDispatcher()
+  let onClick = (i) => {
+    let last = current
+    current = i
+    dispatch('click', { current, last })
+  }
+</script>
+
+<div
+  class="steps-container"
+  style={`--size: ${size}; 
+      --line-thickness: ${line};
+			--primary: ${primary}; 
+			--secondary: ${secondary};
+			--light: ${light};
+			--dark: ${dark};
+			--border-radius: ${borderRadius};
+			--font-family: ${
+        fontFamily || "'Helvetica Neue', Helvetica, Arial, sans-serif"
+      };`}
+>
+  {#each steps as step, i}
+    <div
+      style="display: flex; align-items:center; min-height: 5rem;"
+      style:flex-direction={reverse ? 'row-reverse' : 'row'}
+    >
+      <div
+        style="display: flex; align-items: center; 
+        align-self: stretch; "
+      >
+        <div
+          style="min-width: var(--size); align-self: stretch; display: flex; 
+          flex-direction: column; align-items:center;
+          justify-content: center;"
+        >
+          {#if i > 0}
+            <div class="bar {i <= current ? `bg-primary` : `bg-secondary`}" />
+          {:else}
+            <div class="bar" />
+          {/if}
+          {#if i < steps.length - 1}
+            <div class="bar {i < current ? `bg-primary` : `bg-secondary`}" />
+          {:else}
+            <div class="bar" />
+          {/if}
+        </div>
+      </div>
+      <div
+        style="display: flex; align-items: center; "
+        style:flex-direction={reverse ? 'row-reverse' : 'row'}
+        style:margin-left={reverse ? '0' : '-' + size}
+        style:margin-right={reverse ? '-' + size : '0'}
+      >
+        <div
+          class="step
+						  {i <= current ? `bg-primary text-light` : `bg-secondary text-light`}
+						  "
+          class:shadow={i == current}
+          on:click={() => {
+            onClick(i)
+          }}
+        >
+          {#if step.icon}
+            {#if i < current}
+              <Check />
+            {:else if step.iconProps}
+              <svelte:component this={step.icon} {...step.iconProps} />
+            {:else}
+              <svelte:component this={step.icon} />
+            {/if}
+          {:else if i < current}
+            <Check />
+          {:else}
+            <span class="steps__number">{i + 1}</span>
+          {/if}
+        </div>
+
+        <div
+          class="steps__label"
+          style:margin-left={reverse ? '' : '1rem'}
+          style:margin-right={reverse ? '1rem' : ''}
+          style:text-align={reverse ? 'right' : 'left'}
+        >
+          {#if typeof step.text != 'undefined'}
+            <div
+              class:text-primary={i <= current}
+              on:click={() => {
+                onClick(i)
+              }}
+            >
+              {step.text}
+            </div>
+          {:else}
+            <div />
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .steps-container {
+    font-family: var(--font-family);
+  }
+  .block {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .bar {
+    flex-grow: 10;
+    width: var(--line-thickness);
+    max-width: var(--line-thickness);
+  }
+  .step {
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    min-width: var(--size);
+    height: var(--size);
+    font-size: calc(var(--size) * 0.5);
+  }
+  .step:hover {
+    cursor: pointer;
+    filter: brightness(85%);
+  }
+  .steps__label {
+    cursor: pointer;
+    font-size: larger;
+  }
+  .d-flex {
+    display: flex;
+  }
+  .d-flex.align-items-start {
+    align-items: flex-start;
+  }
+  .d-flex.align-items-center {
+    align-items: center;
+  }
+  .d-flex.justify-content-center {
+    justify-content: center;
+  }
+  .d-flex.justify-content-space-around {
+    justify-content: space-around;
+  }
+
+  .text-primary {
+    color: var(--primary) !important;
+  }
+  .text-light {
+    color: var(--light) !important;
+  }
+  .text-dark {
+    color: var(--dark) !important;
+  }
+  .bg-secondary {
+    background-color: var(--secondary) !important;
+  }
+  .bg-primary {
+    background-color: var(--primary) !important;
+  }
+  .shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .progress-bar {
+    background-color: var(--primary);
+    border-right: 1px solid white;
+  }
+</style>
diff --git a/src/lib/index.js b/src/lib/index.js
index 82a9afa..db27aaa 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1,2 @@
 export { default as Steps } from './Steps.svelte'
+export { default as StepsVertical } from './StepsVertical.svelte'
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 14550ea..c25b63f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Steps from '$lib/Steps.svelte'
+  import { Steps, StepsVertical } from '$lib'
   import Icon from '../demo-lib/icons/Icon.svelte'
   import { HighlightSvelte } from 'svelte-highlight'
   import atomOneDark from 'svelte-highlight/src/styles/atom-one-dark'
@@ -18,7 +18,9 @@
 
 <Steps {steps} />`,
       steps: [
-        { text: 'steppingstone one' },
+        {
+          text: 'stepping stone',
+        },
         { text: 'step two' },
         { text: 'the last step' },
       ],
@@ -54,7 +56,7 @@
         },
         { text: 'the last step', icon: Icon, iconProps: { name: 'person' } },
       ],
-      props: { borderRadius: 0 },
+      props: { borderRadius: '0' },
     },
     {
       title: 'Custom Color',
@@ -72,7 +74,7 @@
     },
     {
       title: 'Custom Size',
-      code: `<Steps {steps} size="2em" lineHeight="2px"/>`,
+      code: `<Steps {steps} size="2em" line="2px"/>`,
       steps: [
         { text: 'step one', icon: Icon, iconProps: { name: 'money' } },
         {
@@ -82,7 +84,7 @@
         },
         { text: 'the last step', icon: Icon, iconProps: { name: 'person' } },
       ],
-      props: { size: '2em', lineHeight: '2px' },
+      props: { size: '2em', line: '2px' },
     },
     {
       title: 'No Text',
@@ -100,7 +102,7 @@
     },
     {
       title: 'Bar',
-      code: `<Steps {steps} size="2rem" lineHeight="2rem"/>`,
+      code: `<Steps {steps} size="2rem" line="2rem"/>`,
       steps: [
         { text: 'step one', icon: Icon, iconProps: { name: 'money' } },
         {
@@ -110,7 +112,58 @@
         },
         { text: 'the last step', icon: Icon, iconProps: { name: 'person' } },
       ],
-      props: { size: '2rem', lineHeight: '2rem' },
+      props: { size: '2rem', line: '2rem' },
+    },
+  ]
+
+  let vertDemos = [
+    {
+      title: 'Vertical Steps',
+      code: `
+<script>
+  import { StepsVertical } from 'svelte-steps'
+  let steps = [
+        { text: 'step one' }, 
+        { text: 'step two' }, 
+        { text: 'the last step' }
+    ];
+<\/script>
+<VirticalSteps {steps}/>
+      `,
+      steps: [
+        { text: 'step one', icon: Icon, iconProps: { name: 'money' } },
+        {
+          text: 'step two',
+          icon: Icon,
+          iconProps: { name: 'paperclip', direction: 'n' },
+        },
+        { text: 'the last step', icon: Icon, iconProps: { name: 'person' } },
+      ],
+      props: {},
+    },
+    {
+      title: 'Vertical Steps - Reversed',
+      code: `
+<script>
+  import { StepsVertical } from 'svelte-steps'
+  let steps = [
+        { text: 'step one' }, 
+        { text: 'step two' }, 
+        { text: 'the last step' }
+    ];
+<\/script>
+<VirticalSteps {steps} reverse/>
+      `,
+      steps: [
+        { text: 'step one', icon: Icon, iconProps: { name: 'money' } },
+        {
+          text: 'step two',
+          icon: Icon,
+          iconProps: { name: 'paperclip', direction: 'n' },
+        },
+        { text: 'the last step', icon: Icon, iconProps: { name: 'person' } },
+      ],
+      props: { reverse: true },
     },
   ]
 
@@ -145,7 +198,7 @@
   {#each demos as demo}
     <div class="my-4">
       <h3>{demo.title}</h3>
-      <div class="row">
+      <div class="row d-flex align-items-center">
         <div class="col-md-6">
           <HighlightSvelte
             code={demo.code}
@@ -153,11 +206,33 @@
           />
         </div>
         <div class="col-md-6">
-          <Steps steps={demo.steps} {current} {...demo.props} />
+          <Steps steps={demo.steps} bind:current {...demo.props} />
         </div>
       </div>
     </div>
   {/each}
+
+  {#each vertDemos as vertDemo}
+    <div class="my-4">
+      <h3>{vertDemo.title}</h3>
+      <div class="row d-flex align-items-center">
+        <div class="col-md-6">
+          <HighlightSvelte
+            code={vertDemo.code}
+            style="padding: 1rem; border-radius: 0.5rem;"
+          />
+        </div>
+        <div class="col-md-6">
+          <StepsVertical
+            steps={vertDemo.steps}
+            bind:current
+            {...vertDemo.props}
+          />
+        </div>
+      </div>
+    </div>
+  {/each}
+
   <h3>Use with Bootstrap</h3>
   <p>
     It by default uses <code>--bs-primary</code>, <code>--bs-secondary</code>,
@@ -203,11 +278,12 @@
     </li>
     <li>
       <code>size</code>: size of the step buttons. String. Default
-      <code>"3rem"</code>
+      <code>"3rem"</code> (<code>"2rem"</code> for vertical steps)
     </li>
     <li>
-      <code>lineHeight</code>: height of the connecting lines between the step
-      buttons. String. Default <code>"0.3rem"</code>
+      <code>line</code>: thickness of the connecting lines between the step
+      buttons. String. Default <code>"0.3rem"</code> (<code>"0.15rem"</code> for
+      vertical steps)
     </li>
     <li>
       <code>primary</code>: Primary color of passed and current steps. String.
@@ -233,6 +309,10 @@
       <code>fontFamily</code>: Font family of the component. String. Default
       <code>"'Helvetica Neue', Helvetica, Arial, sans-serif"</code>
     </li>
+    <li>
+      <code>reverse</code>: for vertical steps only. Puts text labels to the
+      left. Default: <code>false</code>
+    </li>
   </ul>
   <h3>Events</h3>
   <ul>