diff --git a/website/package.json b/website/package.json
index 0800350fd0..3bc552b185 100644
--- a/website/package.json
+++ b/website/package.json
@@ -63,6 +63,7 @@
     "@tsconfig/docusaurus": "^1.0.4",
     "babel-loader": "^8.2.3",
     "enhanced-resolve": "^5.9.2",
+    "react-router": "^6.3.0",
     "storybook-addon-root-attribute": "^1.0.2",
     "typescript": "^4.6.2"
   }
diff --git a/website/src/components/ApiRequest/ApiRequest.stories.jsx b/website/src/components/ApiRequest/ApiRequest.stories.jsx
new file mode 100644
index 0000000000..8a0aff8d9f
--- /dev/null
+++ b/website/src/components/ApiRequest/ApiRequest.stories.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Component from './index';
+import Layout from '@theme/Layout';
+import { BrowserRouter } from 'react-router-dom';
+
+export default {
+    title: 'API request component',
+    component: Component,
+};
+
+const Template = (args) => (
+    <BrowserRouter>
+        <Layout>
+            <Component {...args} />
+        </Layout>
+    </BrowserRouter>
+);
+
+export const Step1 = Template.bind({});
+Step1.args = {
+    open: true,
+    seedData: {
+        currentStep: 1,
+    },
+};
+
+export const Step2 = Template.bind({});
+Step2.args = {
+    seedData: {
+        currentStep: 2,
+    },
+    open: true,
+};
+
+export const Step3 = Template.bind({});
+Step3.args = {
+    seedData: {
+        currentStep: 3,
+    },
+    open: true,
+};
+
+export const Step4 = Template.bind({});
+Step4.args = {
+    seedData: {
+        currentStep: 4,
+    },
+    open: true,
+};
+
+export const WithLocalStorage = Template.bind({});
+WithLocalStorage.args = {
+    open: true,
+};
+
+export const Closed = Template.bind({});
diff --git a/website/src/components/ApiRequest.jsx b/website/src/components/ApiRequest/index.tsx
similarity index 97%
rename from website/src/components/ApiRequest.jsx
rename to website/src/components/ApiRequest/index.tsx
index 55bb02886d..725b066959 100644
--- a/website/src/components/ApiRequest.jsx
+++ b/website/src/components/ApiRequest/index.tsx
@@ -22,7 +22,7 @@ const Component = ({ verb, payload, url, title }) => {
     const prettyPayload = JSON.stringify(payload, null, indentation);
 
     return (
-        <Tabs groupId="api-request">
+        <Tabs>
             <TabItem value="http" label="HTTP">
                 <CodeBlock language="http" title={title}>
                     {`