diff --git a/.changeset/angry-sloths-cheer.md b/.changeset/angry-sloths-cheer.md
new file mode 100644
index 000000000..946b66117
--- /dev/null
+++ b/.changeset/angry-sloths-cheer.md
@@ -0,0 +1,6 @@
+---
+'@microsoft/atlas-site': minor
+'@microsoft/atlas-css': minor
+---
+
+Add steps component and documentation
diff --git a/css/src/components/index.scss b/css/src/components/index.scss
index 26e0a75b2..a50cde9b3 100644
--- a/css/src/components/index.scss
+++ b/css/src/components/index.scss
@@ -26,6 +26,7 @@
@import './toggle.scss';
@import './scroll.scss';
@import './site-header.scss';
+@import './steps.scss';
@import './stretched-link.scss';
@import './segmented-control.scss';
@import './layout.scss';
diff --git a/css/src/components/steps.scss b/css/src/components/steps.scss
new file mode 100644
index 000000000..c15e92c17
--- /dev/null
+++ b/css/src/components/steps.scss
@@ -0,0 +1,22 @@
+$step-font-size: $font-size-7 !default;
+$steps-gap: 0.4375em !default;
+$steps-size: 0.5em !default;
+
+.steps {
+ display: flex;
+ gap: $steps-gap;
+ flex-wrap: nowrap;
+ font-size: $step-font-size;
+
+ .step {
+ height: $steps-size;
+ aspect-ratio: 1 / 1;
+ border-radius: $border-radius-rounded;
+ background-color: $secondary;
+
+ &.step-selected {
+ aspect-ratio: 2 / 1;
+ background-color: $primary;
+ }
+ }
+}
diff --git a/integration/tests/accessibility.spec.ts b/integration/tests/accessibility.spec.ts
index 9a39d1af7..78f58445c 100644
--- a/integration/tests/accessibility.spec.ts
+++ b/integration/tests/accessibility.spec.ts
@@ -48,6 +48,7 @@ const pathnames = [
'/components/scroll.html',
'/components/select.html',
'/components/site-header.html',
+ '/components/steps.html',
'/components/stretched-link.html',
'/components/table.html',
'/components/tag.html',
diff --git a/site/src/components/steps.md b/site/src/components/steps.md
new file mode 100644
index 000000000..1bc69b5d0
--- /dev/null
+++ b/site/src/components/steps.md
@@ -0,0 +1,63 @@
+---
+title: Steps
+description: The steps component in the Atlas Design System
+template: standard
+figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/7raji0IWkuBRxs5kLiADgI/Copilot-Web-UI-kit?node-id=70108-9255&node-type=frame&t=G0FoPLEXPee1yysa-0
+classType: Component
+classPrefixes:
+ - steps
+ - step
+---
+
+# Steps
+
+Used to indicate the user's location in a finite progression. These steps are not interactive.
+
+For example, as a user progresses through 5 items, you would see something like this:
+
+```html
+Step 1 of 5
+
+Step 2 of 5
+
+Step 3 of 5
+
+Step 4 of 5
+
+Step 5 of 5
+
+```
+
+## Accessibility concerns
+
+Although the step component is not interactive, it is also not entirely presentational. Thus, it's recommended that you put `aria-hidden` on the component, while including a `visually-hidden` element that communicates the current state of the user's progress through the steps.