diff --git a/src/components/Steps/Steps.module.scss b/src/components/Steps/Steps.module.scss
new file mode 100644
index 0000000..9a843b7
--- /dev/null
+++ b/src/components/Steps/Steps.module.scss
@@ -0,0 +1,18 @@
+.Steps {
+  display: flex;
+  gap: 9px;
+  padding: 12px;
+}
+
+.Steps__step {
+  min-width: 3px;
+  width: 100%;
+  height: 3px;
+  
+  border-radius: 2px;
+  background-color: var(--background-accent-neutral-fade);
+}
+
+.Steps__step_active {
+  background-color: var(--background-accent-themed);
+}
diff --git a/src/components/Steps/Steps.stories.tsx b/src/components/Steps/Steps.stories.tsx
new file mode 100644
index 0000000..0a3cf4c
--- /dev/null
+++ b/src/components/Steps/Steps.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Steps, type StepsProps } from './Steps';
+
+const meta = {
+  title: 'Blocks/Steps',
+  component: Steps,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Отображает визуальный индикатор шагов или прогресса в процессе, например в учебнике или многоступенчатой форме.'
+      }
+    }
+  },
+  args: {
+    count: 10,
+    progress: 5
+  }
+} satisfies Meta<StepsProps>;
+
+export default meta;
+type Story = StoryObj<StepsProps>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <div
+      style={{
+        height: '100px',
+        padding: 24,
+        boxSizing: 'border-box'
+      }}
+    >
+      <Steps {...args} />
+    </div>
+  )
+};
diff --git a/src/components/Steps/Steps.tsx b/src/components/Steps/Steps.tsx
new file mode 100644
index 0000000..6a3d5d9
--- /dev/null
+++ b/src/components/Steps/Steps.tsx
@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './Steps.module.scss';
+
+export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+  count: number
+  progress: number
+}
+
+export const Steps = forwardRef<HTMLDivElement, StepsProps>((props, ref) => {
+  const { className, count, progress, ...rest } = props;
+
+  return (
+    <div ref={ref} className={clsx(styles.Steps, className)} {...rest}>
+      {Array.from({ length: count }, (_, i) => (
+        <div
+          key={i}
+          className={clsx(styles.Steps__step, {
+            [styles.Steps__step_active]: i < progress
+          })}
+        />
+      ))}
+    </div>
+  );
+});
+
+Steps.displayName = 'Steps';
diff --git a/src/components/Steps/index.ts b/src/components/Steps/index.ts
new file mode 100644
index 0000000..c8bbb55
--- /dev/null
+++ b/src/components/Steps/index.ts
@@ -0,0 +1 @@
+export { Steps, type StepsProps } from './Steps';