From 75d244f51ea61e929e8ff1b5f6bc3bd0eb018c87 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Jul 2025 08:47:31 +0000
Subject: [PATCH 1/9] Add onboarding steps with CSS counters and component
 updates

Co-authored-by: burak.kaya <burak.kaya@sentry.io>
---
 app/globals.css                               | 17 ++++++++
 .../javascript/guides/react/index.mdx         | 41 +++++++++----------
 .../javascript/guides/svelte/index.mdx        | 19 +++++++--
 src/components/onboarding/index.tsx           | 17 +++++++-
 src/mdxComponents.ts                          |  3 +-
 5 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 11591d2a063dd..6c14d007c3ee7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -165,3 +165,20 @@ body {
 {
   color: rgb(134, 142, 150) !important;
 }
+
+/* CSS Counters for Onboarding Steps */
+.onboarding-steps {
+  counter-reset: onboarding-step;
+}
+
+.onboarding-step {
+  counter-increment: onboarding-step;
+}
+
+.onboarding-step h2::before {
+  content: "Step " counter(onboarding-step) ": ";
+}
+
+.onboarding-step h2[data-step-prefix]::before {
+  content: attr(data-step-prefix) counter(onboarding-step) ": ";
+}
diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx
index d317748f25310..0d49490217b79 100644
--- a/docs/platforms/javascript/guides/react/index.mdx
+++ b/docs/platforms/javascript/guides/react/index.mdx
@@ -159,8 +159,10 @@ import * as Sentry from "@sentry/react";
   [here](features/error-boundary/#manually-capturing-errors).
 </Alert>
 
-<OnboardingOption optionId="performance">
-## Step 4: Set Up React Router
+<OnboardingSteps>
+
+<OnboardingOption optionId="performance" isStep>
+## Set Up React Router
 If you're using `react-router` in your application, you need to set up the Sentry integration for your specific React Router version to trace `navigation` events.\
 Select your React Router version to start instrumenting your routing:
 
@@ -169,45 +171,40 @@ Select your React Router version to start instrumenting your routing:
 - [Older React Router versions](features/react-router)
 - [TanStack Router](features/tanstack-router)
 
-## Step 5: Capture Redux State Data (Optional)
-
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 4: Capture Redux State Data (Optional)
-</OnboardingOption>
+<OnboardingOption optionId="performance" isStep>
+## Capture Redux State Data (Optional)
 
 To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing your Redux store.
 
 <PlatformContent includePath="configuration/redux-init" />
 
-<OnboardingOption optionId="performance">
-  ## Step 6: Add Readable Stack Traces With Source Maps (Optional)
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 5: Add Readable Stack Traces With Source Maps (Optional)
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Add Readable Stack Traces With Source Maps (Optional)
+
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-<OnboardingOption optionId="performance">
-  ## Step 7: Avoid Ad Blockers With Tunneling (Optional)
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 6: Avoid Ad Blockers With Tunneling (Optional)
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Avoid Ad Blockers With Tunneling (Optional)
+
 <PlatformContent includePath="getting-started-tunneling" />
 
-<OnboardingOption optionId="performance">
-  ## Step 8: Verify Your Setup
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 7: Verify Your Setup
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Verify Your Setup
+
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
+</OnboardingOption>
+
+</OnboardingSteps>
+
 ### Issues
 
 To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx
index fdbc91d52e8ae..a4c0445e9aa75 100644
--- a/docs/platforms/javascript/guides/svelte/index.mdx
+++ b/docs/platforms/javascript/guides/svelte/index.mdx
@@ -161,15 +161,28 @@ const app = new App({
 export default app;
 ```
 
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+<OnboardingSteps>
+
+<OnboardingOption optionId="performance" isStep>
+## Add Readable Stack Traces With Source Maps (Optional)
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+</OnboardingOption>
+
+<OnboardingOption optionId="performance" isStep>
+## Avoid Ad Blockers With Tunneling (Optional)
 
 <PlatformContent includePath="getting-started-tunneling" />
 
-## Step 5: Verify Your Setup
+</OnboardingOption>
+
+<OnboardingOption optionId="performance" isStep>
+## Verify Your Setup
+
+</OnboardingOption>
+
+</OnboardingSteps>
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index b345f136925e6..96cde3ac3948f 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -144,23 +144,36 @@ export function OnboardingOption({
   children,
   optionId,
   hideForThisOption,
+  isStep = false,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   optionId: OptionId;
   hideForThisOption?: boolean;
+  isStep?: boolean;
 }) {
   validateOptionIds([{id: optionId}]);
+  const className = [
+    hideForThisOption ? 'hidden' : '',
+    isStep ? 'onboarding-step' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
     <div
       data-onboarding-option={optionId}
       data-hide-for-this-option={hideForThisOption}
-      className={hideForThisOption ? 'hidden' : ''}
+      className={className}
     >
       {children}
     </div>
   );
 }
 
+export function OnboardingSteps({children}: {children: ReactNode}) {
+  return <div className="onboarding-steps">{children}</div>;
+}
+
 /**
  * Updates DOM elements' visibility based on selected onboarding options
  */
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index 6023dc61be8f7..06f7b7feb257a 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -18,7 +18,7 @@ import {GuideGrid} from './components/guideGrid';
 import {JsBundleList} from './components/jsBundleList';
 import {LambdaLayerDetail} from './components/lambdaLayerDetail';
 import {LinkWithPlatformIcon} from './components/linkWithPlatformIcon';
-import {OnboardingOption, OnboardingOptionButtons} from './components/onboarding';
+import {OnboardingOption, OnboardingOptionButtons, OnboardingSteps} from './components/onboarding';
 import {OrgAuthTokenNote} from './components/orgAuthTokenNote';
 import {PageGrid} from './components/pageGrid';
 import {ParamTable} from './components/paramTable';
@@ -84,6 +84,7 @@ export function mdxComponents(
     PlatformSdkPackageName,
     OnboardingOption,
     OnboardingOptionButtons,
+    OnboardingSteps,
     RelayMetrics,
     SandboxLink,
     SignInNote,

From ad26d8abc59d042c374349ea438b560759156840 Mon Sep 17 00:00:00 2001
From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com>
Date: Wed, 2 Jul 2025 11:05:32 +0000
Subject: [PATCH 2/9] [getsentry/action-github-commit] Auto commit

---
 src/components/onboarding/index.tsx | 5 +----
 src/mdxComponents.ts                | 6 +++++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index 96cde3ac3948f..7ece71ebe5289 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -152,10 +152,7 @@ export function OnboardingOption({
   isStep?: boolean;
 }) {
   validateOptionIds([{id: optionId}]);
-  const className = [
-    hideForThisOption ? 'hidden' : '',
-    isStep ? 'onboarding-step' : '',
-  ]
+  const className = [hideForThisOption ? 'hidden' : '', isStep ? 'onboarding-step' : '']
     .filter(Boolean)
     .join(' ');
 
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index 06f7b7feb257a..9f652ffe2f1c8 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -18,7 +18,11 @@ import {GuideGrid} from './components/guideGrid';
 import {JsBundleList} from './components/jsBundleList';
 import {LambdaLayerDetail} from './components/lambdaLayerDetail';
 import {LinkWithPlatformIcon} from './components/linkWithPlatformIcon';
-import {OnboardingOption, OnboardingOptionButtons, OnboardingSteps} from './components/onboarding';
+import {
+  OnboardingOption,
+  OnboardingOptionButtons,
+  OnboardingSteps,
+} from './components/onboarding';
 import {OrgAuthTokenNote} from './components/orgAuthTokenNote';
 import {PageGrid} from './components/pageGrid';
 import {ParamTable} from './components/paramTable';

From baa0f1a7f45309f1a419d9845f86e5f2d4d732df Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Wed, 2 Jul 2025 12:10:59 +0100
Subject: [PATCH 3/9] Update app/globals.css

Co-authored-by: seer-by-sentry[bot] <157164994+seer-by-sentry[bot]@users.noreply.github.com>
---
 app/globals.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index 6c14d007c3ee7..bf8a916c29f7a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -175,10 +175,23 @@ body {
   counter-increment: onboarding-step;
 }
 
+/* CSS Counters for Onboarding Steps */
+.onboarding-steps {
+  counter-reset: onboarding-step;
+}
+
+.onboarding-step {
+  counter-increment: onboarding-step;
+}
+
+.onboarding-step .step-heading::before,
 .onboarding-step h2::before {
   content: "Step " counter(onboarding-step) ": ";
+  font-weight: inherit;
 }
 
+.onboarding-step .step-heading[data-step-prefix]::before,
 .onboarding-step h2[data-step-prefix]::before {
   content: attr(data-step-prefix) counter(onboarding-step) ": ";
 }
+}

From 0e0144c6a759c713643bff41bd965a883b290154 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Wed, 2 Jul 2025 12:14:11 +0100
Subject: [PATCH 4/9] Update src/components/onboarding/index.tsx

Co-authored-by: seer-by-sentry[bot] <157164994+seer-by-sentry[bot]@users.noreply.github.com>
---
 src/components/onboarding/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index 7ece71ebe5289..adf53c233a957 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -167,6 +167,10 @@ export function OnboardingOption({
   );
 }
 
+/**
+ * Wrapper component that provides CSS counter context for numbered onboarding steps
+ * @param children - OnboardingOption components that should be numbered as steps
+ */
 export function OnboardingSteps({children}: {children: ReactNode}) {
   return <div className="onboarding-steps">{children}</div>;
 }

From f357a414ab64fa463a3ad71b50f6ca0d9ef33f8b Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Wed, 2 Jul 2025 13:55:38 +0100
Subject: [PATCH 5/9] fix css error

---
 app/globals.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index bf8a916c29f7a..9322e40b173f5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -194,4 +194,3 @@ body {
 .onboarding-step h2[data-step-prefix]::before {
   content: attr(data-step-prefix) counter(onboarding-step) ": ";
 }
-}

From 5b344ef6d7f81605da8dfbd0752386d71154fdb8 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Wed, 2 Jul 2025 14:10:48 +0100
Subject: [PATCH 6/9] fix errors

---
 docs/platforms/javascript/guides/react/index.mdx  | 8 ++++----
 docs/platforms/javascript/guides/svelte/index.mdx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx
index 0d49490217b79..3910d48ff576e 100644
--- a/docs/platforms/javascript/guides/react/index.mdx
+++ b/docs/platforms/javascript/guides/react/index.mdx
@@ -173,7 +173,7 @@ Select your React Router version to start instrumenting your routing:
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Capture Redux State Data (Optional)
 
 To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing your Redux store.
@@ -182,21 +182,21 @@ To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Add Readable Stack Traces With Source Maps (Optional)
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Avoid Ad Blockers With Tunneling (Optional)
 
 <PlatformContent includePath="getting-started-tunneling" />
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Verify Your Setup
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx
index a4c0445e9aa75..c9c5c9dd0dbe7 100644
--- a/docs/platforms/javascript/guides/svelte/index.mdx
+++ b/docs/platforms/javascript/guides/svelte/index.mdx
@@ -163,21 +163,21 @@ export default app;
 
 <OnboardingSteps>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Add Readable Stack Traces With Source Maps (Optional)
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Avoid Ad Blockers With Tunneling (Optional)
 
 <PlatformContent includePath="getting-started-tunneling" />
 
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" isStep>
+<OnboardingOption isStep>
 ## Verify Your Setup
 
 </OnboardingOption>

From 59b3ca410c37c92ac88c4d518de6984822525286 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Wed, 2 Jul 2025 15:34:32 +0100
Subject: [PATCH 7/9] allow empty option id for steps

---
 src/components/onboarding/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index adf53c233a957..3d07fb36915a6 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -151,7 +151,10 @@ export function OnboardingOption({
   hideForThisOption?: boolean;
   isStep?: boolean;
 }) {
-  validateOptionIds([{id: optionId}]);
+  // Allow not passing an optionId when isStep is true
+  if (!isStep || optionId) {
+    validateOptionIds([{id: optionId}]);
+  }
   const className = [hideForThisOption ? 'hidden' : '', isStep ? 'onboarding-step' : '']
     .filter(Boolean)
     .join(' ');

From 28a681bd7c56a6e3463bc1da21aa9deed3bcd2c5 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Thu, 3 Jul 2025 11:34:23 +0100
Subject: [PATCH 8/9] try some fixes

---
 .../javascript/guides/react/index.mdx         | 12 ++++++---
 .../javascript/guides/svelte/index.mdx        | 26 +++++++++++++------
 src/components/onboarding/index.tsx           | 10 +++----
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx
index 3910d48ff576e..cd6c3aecb39b0 100644
--- a/docs/platforms/javascript/guides/react/index.mdx
+++ b/docs/platforms/javascript/guides/react/index.mdx
@@ -201,10 +201,6 @@ To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
-</OnboardingOption>
-
-</OnboardingSteps>
-
 ### Issues
 
 To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
@@ -227,6 +223,8 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
 
 <PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
+</OnboardingOption>
+
 <OnboardingOption optionId="performance">
 ### Tracing
 
@@ -251,6 +249,8 @@ Open the page in a browser (for most React applications, this will be at localho
 
 </OnboardingOption>
 
+<OnboardingOption>
+
 ### View Captured Data in Sentry
 
 Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear).
@@ -274,3 +274,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</OnboardingOption>
+
+</OnboardingSteps>
diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx
index c9c5c9dd0dbe7..29a90deefe55a 100644
--- a/docs/platforms/javascript/guides/svelte/index.mdx
+++ b/docs/platforms/javascript/guides/svelte/index.mdx
@@ -9,7 +9,11 @@ categories:
 
 <PlatformContent includePath="getting-started-prerequisites" />
 
-## Step 1: Install
+<OnboardingSteps>
+
+<OnboardingOption isStep>
+
+## Install
 
 Choose the features you want to configure, and this guide will show you how:
 
@@ -34,8 +38,11 @@ yarn add @sentry/svelte
 ```bash {tabTitle:pnpm}
 pnpm add @sentry/svelte
 ```
+</OnboardingOption>
 
-## Step 2: Configure
+<OnboardingOption isStep>
+
+## Configure
 
 To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your `main.js` or `main.ts` file.
 
@@ -160,10 +167,10 @@ const app = new App({
 
 export default app;
 ```
-
-<OnboardingSteps>
+</OnboardingOption>
 
 <OnboardingOption isStep>
+
 ## Add Readable Stack Traces With Source Maps (Optional)
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
@@ -180,10 +187,6 @@ export default app;
 <OnboardingOption isStep>
 ## Verify Your Setup
 
-</OnboardingOption>
-
-</OnboardingSteps>
-
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
 ### Issues
@@ -218,6 +221,8 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
 
 <PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
+</OnboardingOption>
+
 <OnboardingOption optionId="performance">
 ### Tracing
 
@@ -257,6 +262,7 @@ Open the page in a browser and click the button to trigger a frontend error and
 
 </OnboardingOption>
 
+<OnboardingOption>
 ### View Captured Data in Sentry
 
 Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear).
@@ -280,3 +286,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</OnboardingOption>
+
+</OnboardingSteps>
diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index 3d07fb36915a6..6e2245a9b1f06 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -142,18 +142,18 @@ const validateOptionIds = (options: Pick<OnboardingOptionType, 'id'>[]) => {
 
 export function OnboardingOption({
   children,
-  optionId,
+  optionId = 'all',
   hideForThisOption,
   isStep = false,
 }: {
   children: ReactNode;
-  optionId: OptionId;
+  optionId: OptionId | 'all';
   hideForThisOption?: boolean;
   isStep?: boolean;
 }) {
-  // Allow not passing an optionId when isStep is true
-  if (!isStep || optionId) {
-    validateOptionIds([{id: optionId}]);
+  if (!isStep || optionId !== 'all') {
+    // Allow not passing an optionId when isStep is true
+    validateOptionIds([{id: optionId as OptionId}]);
   }
   const className = [hideForThisOption ? 'hidden' : '', isStep ? 'onboarding-step' : '']
     .filter(Boolean)

From cfdc72cb299475536bf0cfebc1f6e44fe7a29206 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Thu, 3 Jul 2025 11:57:04 +0100
Subject: [PATCH 9/9] fix more stuff

---
 app/globals.css                               | 14 --------------
 .../javascript/guides/react/index.mdx         | 19 ++++++++++++++-----
 src/components/onboarding/index.tsx           |  4 ++--
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 9322e40b173f5..de7c493bb4107 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -175,22 +175,8 @@ body {
   counter-increment: onboarding-step;
 }
 
-/* CSS Counters for Onboarding Steps */
-.onboarding-steps {
-  counter-reset: onboarding-step;
-}
-
-.onboarding-step {
-  counter-increment: onboarding-step;
-}
-
 .onboarding-step .step-heading::before,
 .onboarding-step h2::before {
   content: "Step " counter(onboarding-step) ": ";
   font-weight: inherit;
 }
-
-.onboarding-step .step-heading[data-step-prefix]::before,
-.onboarding-step h2[data-step-prefix]::before {
-  content: attr(data-step-prefix) counter(onboarding-step) ": ";
-}
diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx
index cd6c3aecb39b0..06b2cc6ef2141 100644
--- a/docs/platforms/javascript/guides/react/index.mdx
+++ b/docs/platforms/javascript/guides/react/index.mdx
@@ -11,7 +11,11 @@ categories:
 
 <PlatformContent includePath="getting-started-prerequisites" />
 
-## Step 1: Install
+<OnboardingSteps>
+
+<OnboardingOption isStep>
+
+## Install
 
 Choose the features you want to configure, and this guide will show you how:
 
@@ -37,7 +41,11 @@ yarn add @sentry/react
 pnpm add @sentry/react
 ```
 
-## Step 2: Configure
+</OnboardingOption>
+
+<OnboardingOption isStep>
+
+## Configure
 
 ### Initialize the Sentry SDK
 
@@ -112,8 +120,9 @@ const container = document.getElementById(“app”);
 const root = createRoot(container);
 root.render(<App />);
 ```
-
-## Step 3: Capture React Errors
+</OnboardingOption>
+<OnboardingOption isStep>
+## Capture React Errors
 
 To make sure Sentry captures all your app's errors, configure error handling based on your React version.
 
@@ -159,7 +168,7 @@ import * as Sentry from "@sentry/react";
   [here](features/error-boundary/#manually-capturing-errors).
 </Alert>
 
-<OnboardingSteps>
+</OnboardingOption>
 
 <OnboardingOption optionId="performance" isStep>
 ## Set Up React Router
diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index 6e2245a9b1f06..10274c1a0501c 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -151,9 +151,9 @@ export function OnboardingOption({
   hideForThisOption?: boolean;
   isStep?: boolean;
 }) {
-  if (!isStep || optionId !== 'all') {
+  if (optionId !== 'all') {
     // Allow not passing an optionId when isStep is true
-    validateOptionIds([{id: optionId as OptionId}]);
+    validateOptionIds([{id: optionId}]);
   }
   const className = [hideForThisOption ? 'hidden' : '', isStep ? 'onboarding-step' : '']
     .filter(Boolean)