diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c04df5d37..e9566eb3f 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -26,3 +26,5 @@ export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as Bucket } from './bucket.svelte';
+export { default as Steps } from './steps.svelte';
+export { default as Step } from './step.svelte';
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
new file mode 100644
index 000000000..722169ddd
--- /dev/null
+++ b/src/lib/components/step.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let done = false;
+    export let current = false;
+</script>
+
+<li
+    class="steps-item"
+    class:is-done={done}
+    class:is-current={current}
+    aria-label={` ${done ? 'done' : current ? 'current' : ''} step`}>
+    <span class="text"><slot /></span>
+</li>
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
new file mode 100644
index 000000000..37392948c
--- /dev/null
+++ b/src/lib/components/steps.svelte
@@ -0,0 +1,3 @@
+<ol class="steps">
+    <slot />
+</ol>