try some fixes

Author: BYK

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>

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>

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)