diff --git a/web/components/stepper.css b/web/components/stepper.css
new file mode 100644
--- /dev/null
+++ b/web/components/stepper.css
@@ -0,0 +1,18 @@
+.stepperContainer {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.stepperItem {
+  overflow-y: auto;
+  height: 100%;
+}
+
+.stepperFooter {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 32px;
+  gap: 12px;
+}
diff --git a/web/components/stepper.react.js b/web/components/stepper.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/stepper.react.js
@@ -0,0 +1,99 @@
+// @flow
+import classnames from 'classnames';
+import * as React from 'react';
+import { useCallback } from 'react';
+
+import Button from './button.react';
+import css from './stepper.css';
+
+export type ButtonProps = {
+  +content: string,
+  +disabled?: boolean,
+  +onClick: () => void,
+};
+
+type ButtonType = 'prev' | 'next';
+
+type ItemProps = {
+  +content: React.Node,
+  +prevProps?: ButtonProps,
+  +nextProps?: ButtonProps,
+};
+
+function StepperItem(props: ItemProps): React.Node {
+  const { content, prevProps, nextProps } = props;
+
+  const prepareButton = useCallback(
+    (buttonProps: ButtonProps, type: ButtonType) => {
+      const { content: name, disabled, onClick } = buttonProps;
+
+      return (
+        <Button
+          variant={type === 'prev' ? 'secondary' : 'primary'}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {name}
+        </Button>
+      );
+    },
+    [],
+  );
+
+  const prevButton = React.useMemo(
+    () => (prevProps ? prepareButton(prevProps, 'prev') : null),
+    [prevProps, prepareButton],
+  );
+
+  const nextButton = React.useMemo(
+    () => (nextProps ? prepareButton(nextProps, 'next') : null),
+    [nextProps, prepareButton],
+  );
+
+  return (
+    <>
+      <div className={css.stepperItem}>{content}</div>
+      <div className={css.stepperFooter}>
+        {prevButton}
+        {nextButton}
+      </div>
+    </>
+  );
+}
+
+type ContainerProps = {
+  +activeStep: string,
+  +className?: string,
+  +children: React.ChildrenArray<React.Element<typeof StepperItem>>,
+};
+
+function StepperContainer(props: ContainerProps): React.Node {
+  const { children, activeStep, className } = props;
+
+  const index = React.useMemo(
+    () =>
+      new Map(
+        React.Children.toArray(children).map((child, i) => [
+          child.key?.toString().substring(2),
+          i,
+        ]),
+      ),
+    [children],
+  );
+
+  const activeComponent = children[index.get(activeStep) ?? 0];
+
+  const styles = classnames({
+    [css.stepperContainer]: true,
+    [className || '']: !!className,
+  });
+
+  return <div className={styles}>{activeComponent}</div>;
+}
+
+const Stepper = {
+  Container: StepperContainer,
+  Item: StepperItem,
+};
+
+export default Stepper;