diff --git a/static/app/components/onboarding/productSelection.tsx b/static/app/components/onboarding/productSelection.tsx
index 3a27f81a4dc4d1..6b23d9b99e1782 100644
--- a/static/app/components/onboarding/productSelection.tsx
+++ b/static/app/components/onboarding/productSelection.tsx
@@ -116,111 +116,141 @@ export const platformProductAvailability = {
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-react-router': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-vue': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-angular': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-ember': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-gatsby': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-solid': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-solidstart': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
+    ProductSolution.METRICS,
   ],
   'javascript-svelte': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-tanstackstart-react': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
+    ProductSolution.METRICS,
   ],
   'javascript-astro': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   node: [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-azurefunctions': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
+  'node-awslambda': [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
+    ProductSolution.METRICS,
   ],
-  'node-awslambda': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
   'node-connect': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-express': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-fastify': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-gcpfunctions': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-hapi': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-hono': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-koa': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-nestjs': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-cloudflare-workers': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
+  'node-cloudflare-pages': [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
-  'node-cloudflare-pages': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
   php: [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
@@ -531,6 +561,18 @@ export function ProductSelection({
           checked={urlProducts.includes(ProductSolution.LOGS)}
         />
       )}
+      {products.includes(ProductSolution.METRICS) && (
+        <Product
+          label={t('Metrics')}
+          description={t(
+            'Custom metrics for tracking application performance and usage, automatically trace-connected.'
+          )}
+          docLink="https://docs.sentry.io/product/explore/metrics/"
+          onClick={() => handleClickProduct(ProductSolution.METRICS)}
+          disabled={disabledProducts[ProductSolution.METRICS]}
+          checked={urlProducts.includes(ProductSolution.METRICS)}
+        />
+      )}
       {products.includes(ProductSolution.SESSION_REPLAY) && (
         <Product
           label={t('Session Replay')}
diff --git a/static/app/data/platformCategories.tsx b/static/app/data/platformCategories.tsx
index 79a36134db50f0..beda207f886d1a 100644
--- a/static/app/data/platformCategories.tsx
+++ b/static/app/data/platformCategories.tsx
@@ -391,7 +391,37 @@ export const withoutLoggingSupport: Set<PlatformKey> = new Set([
 ]);
 
 // List of platforms that have metrics onboarding checklist content
-export const withMetricsOnboarding: Set<PlatformKey> = new Set([]);
+export const withMetricsOnboarding: Set<PlatformKey> = new Set([
+  'javascript',
+  'javascript-angular',
+  'javascript-astro',
+  'javascript-ember',
+  'javascript-gatsby',
+  'javascript-nextjs',
+  'javascript-nuxt',
+  'javascript-react',
+  'javascript-react-router',
+  'javascript-remix',
+  'javascript-solid',
+  'javascript-solidstart',
+  'javascript-svelte',
+  'javascript-sveltekit',
+  'javascript-tanstackstart-react',
+  'javascript-vue',
+  'node',
+  'node-awslambda',
+  'node-azurefunctions',
+  'node-cloudflare-pages',
+  'node-cloudflare-workers',
+  'node-connect',
+  'node-express',
+  'node-fastify',
+  'node-gcpfunctions',
+  'node-hapi',
+  'node-hono',
+  'node-koa',
+  'node-nestjs',
+]);
 
 // List of platforms that do not have metrics support. We make use of this list in the product to not provide any Metrics
 export const withoutMetricsSupport: Set<PlatformKey> = new Set([]);
diff --git a/static/app/gettingStartedDocs/javascript/angular/index.tsx b/static/app/gettingStartedDocs/javascript/angular/index.tsx
index d82eb8e16f3ead..3a95187d78f5aa 100644
--- a/static/app/gettingStartedDocs/javascript/angular/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/angular/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -18,6 +19,7 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/angular/metrics.tsx b/static/app/gettingStartedDocs/javascript/angular/metrics.tsx
new file mode 100644
index 00000000000000..4d2f9f28cd4f78
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/angular/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'angular',
+  packageName: '@sentry/angular',
+});
diff --git a/static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx
index bb23e1eef293f6..5a8dc9491a930b 100644
--- a/static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx
@@ -154,4 +154,11 @@ describe('javascript-angular onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/astro/index.tsx b/static/app/gettingStartedDocs/javascript/astro/index.tsx
index 340d1b8a505f82..3cf4bdda9dd2f7 100644
--- a/static/app/gettingStartedDocs/javascript/astro/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/astro/index.tsx
@@ -5,6 +5,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   crashReportOnboarding: crashReport,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
 };
diff --git a/static/app/gettingStartedDocs/javascript/astro/metrics.tsx b/static/app/gettingStartedDocs/javascript/astro/metrics.tsx
new file mode 100644
index 00000000000000..bc3a09c8bc7cac
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/astro/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'astro',
+  packageName: '@sentry/astro',
+});
diff --git a/static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx
index 6d381823b05398..a596e507aa3988 100644
--- a/static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx
@@ -198,4 +198,11 @@ describe('javascript-astro onboarding docs', () => {
     // This is a bit complex to test precisely, but we can ensure the config is split correctly
     expect(astroConfigSections.length).toBeGreaterThan(0);
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/ember/index.tsx b/static/app/gettingStartedDocs/javascript/ember/index.tsx
index 6277ae968201c2..bc455410fc6800 100644
--- a/static/app/gettingStartedDocs/javascript/ember/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/ember/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/ember/metrics.tsx b/static/app/gettingStartedDocs/javascript/ember/metrics.tsx
new file mode 100644
index 00000000000000..56bfed48f95d0f
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/ember/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'ember',
+  packageName: '@sentry/ember',
+});
diff --git a/static/app/gettingStartedDocs/javascript/gatsby/index.tsx b/static/app/gettingStartedDocs/javascript/gatsby/index.tsx
index 6277ae968201c2..bc455410fc6800 100644
--- a/static/app/gettingStartedDocs/javascript/gatsby/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/gatsby/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/gatsby/metrics.tsx b/static/app/gettingStartedDocs/javascript/gatsby/metrics.tsx
new file mode 100644
index 00000000000000..7bc67573421667
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/gatsby/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'gatsby',
+  packageName: '@sentry/gatsby',
+});
diff --git a/static/app/gettingStartedDocs/javascript/gatsby/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/gatsby/onboarding.spec.tsx
index 35a20cd50588b5..bfb13a5dacc2ed 100644
--- a/static/app/gettingStartedDocs/javascript/gatsby/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/gatsby/onboarding.spec.tsx
@@ -213,4 +213,11 @@ describe('javascript-gatsby onboarding docs', () => {
   // - Sentry.feedbackIntegration() is included when feedback is selected
   // - colorScheme: "system" is configured
   // - Feedback configuration options are applied
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/javascript/index.tsx b/static/app/gettingStartedDocs/javascript/javascript/index.tsx
index 468a55ef6385aa..be0cc8ed15e50d 100644
--- a/static/app/gettingStartedDocs/javascript/javascript/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/javascript/index.tsx
@@ -8,6 +8,7 @@ import {crashReport} from './crashReport';
 import {featureFlag} from './featureFlag';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {performance} from './performance';
 import {profiling} from './profiling';
@@ -26,6 +27,7 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/javascript/metrics.tsx b/static/app/gettingStartedDocs/javascript/javascript/metrics.tsx
new file mode 100644
index 00000000000000..ecb4d98b871db7
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/javascript/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'javascript',
+  packageName: '@sentry/browser',
+});
diff --git a/static/app/gettingStartedDocs/javascript/javascript/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/javascript/onboarding.spec.tsx
index 807eb9f8919ace..f87a9f5f883434 100644
--- a/static/app/gettingStartedDocs/javascript/javascript/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/javascript/onboarding.spec.tsx
@@ -126,4 +126,11 @@ describe('javascript onboarding docs', () => {
 
     expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx b/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
index d1e742e96e8197..b210eb1433802f 100644
--- a/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
@@ -34,4 +34,11 @@ describe('javascript-nextjs onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/sentry-example-page/))
     ).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/nextjs.tsx b/static/app/gettingStartedDocs/javascript/nextjs.tsx
index 7142dcaf47ce15..1075e37f62cf38 100644
--- a/static/app/gettingStartedDocs/javascript/nextjs.tsx
+++ b/static/app/gettingStartedDocs/javascript/nextjs.tsx
@@ -28,6 +28,7 @@ import {t, tct} from 'sentry/locale';
 import {
   getJavascriptFullStackOnboarding,
   getJavascriptLogsFullStackOnboarding,
+  getJavascriptMetricsFullStackOnboarding,
 } from 'sentry/utils/gettingStartedDocs/javascript';
 
 type Params = DocsParams;
@@ -614,6 +615,10 @@ const docs: Docs = {
     docsPlatform: 'nextjs',
     packageName: '@sentry/nextjs',
   }),
+  metricsOnboarding: getJavascriptMetricsFullStackOnboarding({
+    docsPlatform: 'nextjs',
+    packageName: '@sentry/nextjs',
+  }),
   agentMonitoringOnboarding: getNodeAgentMonitoringOnboarding({
     packageName: '@sentry/nextjs',
     configFileName: 'sentry.server.config.ts',
diff --git a/static/app/gettingStartedDocs/javascript/nuxt/index.tsx b/static/app/gettingStartedDocs/javascript/nuxt/index.tsx
index 1c5fd3e0764563..f3b4ae299da7ae 100644
--- a/static/app/gettingStartedDocs/javascript/nuxt/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/nuxt/index.tsx
@@ -5,6 +5,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -17,6 +18,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
   agentMonitoringOnboarding: agentMonitoring,
 };
 
diff --git a/static/app/gettingStartedDocs/javascript/nuxt/metrics.tsx b/static/app/gettingStartedDocs/javascript/nuxt/metrics.tsx
new file mode 100644
index 00000000000000..4d94d3e61a719f
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/nuxt/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'nuxt',
+  packageName: '@sentry/nuxt',
+});
diff --git a/static/app/gettingStartedDocs/javascript/nuxt/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/nuxt/onboarding.spec.tsx
index 449f945f8020ec..ff169e28e0ce6b 100644
--- a/static/app/gettingStartedDocs/javascript/nuxt/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/nuxt/onboarding.spec.tsx
@@ -40,4 +40,11 @@ describe('javascript-nuxt onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/sentry-example-page/))
     ).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/react-router/index.tsx b/static/app/gettingStartedDocs/javascript/react-router/index.tsx
index 156dc5c92e82c3..ac03eff6e69523 100644
--- a/static/app/gettingStartedDocs/javascript/react-router/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/react-router/index.tsx
@@ -4,6 +4,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {performance} from './performance';
 import {profiling} from './profiling';
@@ -18,6 +19,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/react-router/metrics.tsx b/static/app/gettingStartedDocs/javascript/react-router/metrics.tsx
new file mode 100644
index 00000000000000..0f72110a8eb6cb
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/react-router/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'react-router',
+  packageName: '@sentry/react-router',
+});
diff --git a/static/app/gettingStartedDocs/javascript/react-router/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/react-router/onboarding.spec.tsx
index 0d61ef3e521246..3237519e7420cf 100644
--- a/static/app/gettingStartedDocs/javascript/react-router/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/react-router/onboarding.spec.tsx
@@ -105,4 +105,11 @@ describe('javascript-react-router onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/Sentry\.logger\.info\(/))
     ).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/react/index.tsx b/static/app/gettingStartedDocs/javascript/react/index.tsx
index 72d5254b184a90..c75f8071926836 100644
--- a/static/app/gettingStartedDocs/javascript/react/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/react/index.tsx
@@ -4,6 +4,7 @@ import {logs} from 'sentry/gettingStartedDocs/javascript/react/logs';
 
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {performance} from './performance';
 import {profiling} from './profiling';
@@ -18,6 +19,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   logsOnboarding: logs,
   featureFlagOnboarding: featureFlag,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/react/metrics.tsx b/static/app/gettingStartedDocs/javascript/react/metrics.tsx
new file mode 100644
index 00000000000000..476a2c28beface
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/react/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'react',
+  packageName: '@sentry/react',
+});
diff --git a/static/app/gettingStartedDocs/javascript/react/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/react/onboarding.spec.tsx
index e895f82fe22b2b..510bce650794b2 100644
--- a/static/app/gettingStartedDocs/javascript/react/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/react/onboarding.spec.tsx
@@ -96,6 +96,41 @@ describe('javascript-react onboarding docs', () => {
     ).toBeInTheDocument();
   });
 
+  it('includes metrics API calls in verify when metrics is selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.METRICS],
+    });
+
+    expect(
+      screen.getByText(
+        textWithMarkupMatcher(/Sentry\.metrics\.count\('test_counter', 1\)/)
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('shows Metrics in next steps when metrics is selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+        ProductSolution.METRICS,
+      ],
+    });
+
+    expect(screen.getByText('Metrics')).toBeInTheDocument();
+  });
+
+  it('does not show Metrics in next steps when metrics is not selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+      ],
+    });
+
+    expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+  });
+
   it('shows Logging Integrations in next steps when logs is selected', () => {
     renderWithOnboardingLayout(docs, {
       selectedProducts: [
@@ -118,4 +153,11 @@ describe('javascript-react onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/react/onboarding.tsx b/static/app/gettingStartedDocs/javascript/react/onboarding.tsx
index 0b11453ad0b163..2485178df28190 100644
--- a/static/app/gettingStartedDocs/javascript/react/onboarding.tsx
+++ b/static/app/gettingStartedDocs/javascript/react/onboarding.tsx
@@ -21,12 +21,18 @@ const getVerifySnippet = (params: DocsParams) => {
         });`
     : '';
 
+  const metricsCode = params.isMetricsSelected
+    ? `
+        // Send a test metric before throwing the error
+        Sentry.metrics.count('test_counter', 1);`
+    : '';
+
   return `import * as Sentry from '@sentry/react';
 // Add this button component to your app to test Sentry's error tracking
 function ErrorButton() {
   return (
     <button
-      onClick={() => {${logsCode}
+      onClick={() => {${logsCode}${metricsCode}
         throw new Error('This is your first error!');
       }}
     >
@@ -272,6 +278,17 @@ logger.fatal("Database connection pool exhausted", {
       });
     }
 
+    if (params.isMetricsSelected) {
+      steps.push({
+        id: 'metrics',
+        name: t('Metrics'),
+        description: t(
+          'Learn how to track custom metrics to monitor your application performance and business KPIs.'
+        ),
+        link: 'https://docs.sentry.io/platforms/javascript/guides/react/metrics/',
+      });
+    }
+
     return steps;
   },
 };
diff --git a/static/app/gettingStartedDocs/javascript/remix/index.tsx b/static/app/gettingStartedDocs/javascript/remix/index.tsx
index ce64818abdf955..c896b204fd9f6f 100644
--- a/static/app/gettingStartedDocs/javascript/remix/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/remix/index.tsx
@@ -5,6 +5,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   crashReportOnboarding: crashReport,
   featureFlagOnboarding: featureFlag,
   profilingOnboarding: profiling,
+  metricsOnboarding: metrics,
   agentMonitoringOnboarding: agentMonitoring,
   logsOnboarding: logs,
 };
diff --git a/static/app/gettingStartedDocs/javascript/remix/metrics.tsx b/static/app/gettingStartedDocs/javascript/remix/metrics.tsx
new file mode 100644
index 00000000000000..ec037d6d168474
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/remix/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'remix',
+  packageName: '@sentry/remix',
+});
diff --git a/static/app/gettingStartedDocs/javascript/remix/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/remix/onboarding.spec.tsx
index c855a4cefa5410..df43c43e66d2d5 100644
--- a/static/app/gettingStartedDocs/javascript/remix/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/remix/onboarding.spec.tsx
@@ -18,4 +18,11 @@ describe('javascript-remix onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/npx @sentry\/wizard@latest -i remix/))
     ).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/solid/index.tsx b/static/app/gettingStartedDocs/javascript/solid/index.tsx
index 6277ae968201c2..bc455410fc6800 100644
--- a/static/app/gettingStartedDocs/javascript/solid/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/solid/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/solid/metrics.tsx b/static/app/gettingStartedDocs/javascript/solid/metrics.tsx
new file mode 100644
index 00000000000000..ebc8d5ef8cf508
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/solid/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'solid',
+  packageName: '@sentry/solid',
+});
diff --git a/static/app/gettingStartedDocs/javascript/solid/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/solid/onboarding.spec.tsx
index bfdf70c6e5205e..dfb75459dcfba3 100644
--- a/static/app/gettingStartedDocs/javascript/solid/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/solid/onboarding.spec.tsx
@@ -118,4 +118,11 @@ describe('javascript-solid onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/solidstart/index.tsx b/static/app/gettingStartedDocs/javascript/solidstart/index.tsx
index ce64818abdf955..13b6ecd97b8abe 100644
--- a/static/app/gettingStartedDocs/javascript/solidstart/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/solidstart/index.tsx
@@ -5,6 +5,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -18,6 +19,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/solidstart/metrics.tsx b/static/app/gettingStartedDocs/javascript/solidstart/metrics.tsx
new file mode 100644
index 00000000000000..107bfee5f234f5
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/solidstart/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'solidstart',
+  packageName: '@sentry/solidstart',
+});
diff --git a/static/app/gettingStartedDocs/javascript/svelte/index.tsx b/static/app/gettingStartedDocs/javascript/svelte/index.tsx
index 6277ae968201c2..bc455410fc6800 100644
--- a/static/app/gettingStartedDocs/javascript/svelte/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/svelte/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/svelte/metrics.tsx b/static/app/gettingStartedDocs/javascript/svelte/metrics.tsx
new file mode 100644
index 00000000000000..cfc3880743caf7
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/svelte/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'svelte',
+  packageName: '@sentry/svelte',
+});
diff --git a/static/app/gettingStartedDocs/javascript/svelte/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/svelte/onboarding.spec.tsx
index 286e634a944741..44be27267d666e 100644
--- a/static/app/gettingStartedDocs/javascript/svelte/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/svelte/onboarding.spec.tsx
@@ -120,4 +120,11 @@ describe('javascript-svelte onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
index d4e02fb1741b8d..486e71a90892a2 100644
--- a/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
@@ -34,4 +34,11 @@ describe('javascript-sveltekit onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/sentry-example-page/))
     ).toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.tsx
index 4d5d64a950351e..69333c4bc068d8 100644
--- a/static/app/gettingStartedDocs/javascript/sveltekit.tsx
+++ b/static/app/gettingStartedDocs/javascript/sveltekit.tsx
@@ -28,6 +28,7 @@ import {t, tct} from 'sentry/locale';
 import {
   getJavascriptFullStackOnboarding,
   getJavascriptLogsFullStackOnboarding,
+  getJavascriptMetricsFullStackOnboarding,
 } from 'sentry/utils/gettingStartedDocs/javascript';
 
 type Params = DocsParams;
@@ -269,6 +270,10 @@ const docs: Docs = {
     docsPlatform: 'sveltekit',
     packageName: '@sentry/sveltekit',
   }),
+  metricsOnboarding: getJavascriptMetricsFullStackOnboarding({
+    docsPlatform: 'sveltekit',
+    packageName: '@sentry/sveltekit',
+  }),
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx
index cc8dbc5a2ba84a..9a2c051a9a16bd 100644
--- a/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx
@@ -2,6 +2,7 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
 
 import {agentMonitoring} from './agentMonitoring';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 
@@ -10,6 +11,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/metrics.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/metrics.tsx
new file mode 100644
index 00000000000000..bf4e29fb0e8039
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/tanstackstart-react/metrics.tsx
@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'tanstackstart-react',
+  packageName: '@sentry/tanstackstart-react',
+});
diff --git a/static/app/gettingStartedDocs/javascript/vue/index.tsx b/static/app/gettingStartedDocs/javascript/vue/index.tsx
index e54980d48a7b30..4930bc89b88fba 100644
--- a/static/app/gettingStartedDocs/javascript/vue/index.tsx
+++ b/static/app/gettingStartedDocs/javascript/vue/index.tsx
@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -18,6 +19,7 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/javascript/vue/metrics.tsx b/static/app/gettingStartedDocs/javascript/vue/metrics.tsx
new file mode 100644
index 00000000000000..8a69ed0091a35a
--- /dev/null
+++ b/static/app/gettingStartedDocs/javascript/vue/metrics.tsx
@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'vue',
+  packageName: '@sentry/vue',
+});
diff --git a/static/app/gettingStartedDocs/javascript/vue/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript/vue/onboarding.spec.tsx
index 27f6116d39d19a..4cc017e57482a5 100644
--- a/static/app/gettingStartedDocs/javascript/vue/onboarding.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/vue/onboarding.spec.tsx
@@ -118,4 +118,11 @@ describe('javascript-vue onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });
diff --git a/static/app/utils/gettingStartedDocs/javascript.tsx b/static/app/utils/gettingStartedDocs/javascript.tsx
index 2916d1381dac3d..1b5cdd9a4cb403 100644
--- a/static/app/utils/gettingStartedDocs/javascript.tsx
+++ b/static/app/utils/gettingStartedDocs/javascript.tsx
@@ -394,6 +394,231 @@ Sentry.logger.info('User triggered test log', { log_source: 'sentry_test' })`,
   ],
 });
 
+export const getJavascriptMetricsOnboarding = <
+  PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
+>({
+  docsPlatform,
+  packageName,
+  installSnippetBlock,
+}: {
+  docsPlatform: string;
+  installSnippetBlock: ContentBlock;
+  packageName: `@sentry/${string}`;
+}): OnboardingConfig<PlatformOptions> => ({
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Add the Sentry SDK as a dependency. The minimum version of [packageName] that supports metrics is [code:10.24.0].',
+            {
+              code: <code />,
+              packageName: <code>{packageName}</code>,
+            }
+          ),
+        },
+        installSnippetBlock,
+        {
+          type: 'text',
+          text: tct(
+            'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.',
+            {
+              link: (
+                <ExternalLink
+                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/migration/`}
+                />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  configure: (params: DocsParams) => [
+    {
+      type: StepType.CONFIGURE,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Metrics are automatically enabled in your [code:Sentry.init()] configuration. You can emit metrics using the [code:Sentry.metrics] API.',
+            {code: <code />}
+          ),
+        },
+        {
+          type: 'code',
+          language: 'javascript',
+          code: `
+import * as Sentry from "${packageName}";
+
+Sentry.init({
+  dsn: "${params.dsn.public}",
+});
+
+// Emit custom metrics
+Sentry.metrics.count('button_click', 1);
+Sentry.metrics.gauge('page_load_time', 150);
+Sentry.metrics.distribution('response_time', 200);
+`,
+        },
+        {
+          type: 'text',
+          text: tct(
+            'For more detailed information, see the [link:metrics documentation].',
+            {
+              link: (
+                <ExternalLink
+                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/metrics/`}
+                />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      content: [
+        {
+          type: 'text',
+          text: t(
+            'Send a test metric from your app to verify metrics are arriving in Sentry.'
+          ),
+        },
+        {
+          type: 'code',
+          language: 'jsx',
+          code: `import * as Sentry from "${packageName}";
+
+// Emit a test metric
+Sentry.metrics.count('test_counter', 1);
+Sentry.metrics.gauge('test_gauge', 100);
+Sentry.metrics.distribution('test_distribution', 150);
+`,
+        },
+      ],
+    },
+  ],
+});
+
+export const getJavascriptMetricsFullStackOnboarding = <
+  PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
+>({
+  docsPlatform,
+  packageName,
+}: {
+  docsPlatform: string;
+  packageName: `@sentry/${string}`;
+}): OnboardingConfig<PlatformOptions> => ({
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'To add metrics make sure [packageName] is up-to-date. The minimum version of [packageName] that supports metrics is [code:10.24.0].',
+            {
+              code: <code />,
+              packageName: <code>{packageName}</code>,
+            }
+          ),
+        },
+        {
+          type: 'code',
+          language: 'bash',
+          tabs: [
+            {
+              label: 'npm',
+              value: 'npm',
+              language: 'bash',
+              code: `npm install ${packageName} --save`,
+            },
+            {
+              label: 'yarn',
+              value: 'yarn',
+              language: 'bash',
+              code: `yarn add ${packageName}`,
+            },
+            {
+              label: 'pnpm',
+              value: 'pnpm',
+              language: 'bash',
+              code: `pnpm add ${packageName}`,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  configure: (params: DocsParams) => [
+    {
+      type: StepType.CONFIGURE,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Metrics are automatically enabled in your [code:Sentry.init()] configuration. Metrics work seamlessly in both server and client contexts.',
+            {code: <code />}
+          ),
+        },
+        {
+          type: 'code',
+          language: 'javascript',
+          code: `
+import * as Sentry from "${packageName}";
+
+Sentry.init({
+  dsn: "${params.dsn.public}",
+});
+
+// Use metrics in both server and client code
+Sentry.metrics.count('user_action', 1);
+Sentry.metrics.distribution('api_response_time', 150);
+`,
+        },
+        {
+          type: 'text',
+          text: tct(
+            'For more detailed information, see the [link:metrics documentation].',
+            {
+              link: (
+                <ExternalLink
+                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/metrics/`}
+                />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      content: [
+        {
+          type: 'text',
+          text: t(
+            'Send a test metric to verify metrics are working in your application.'
+          ),
+        },
+        {
+          type: 'code',
+          language: 'jsx',
+          code: `import * as Sentry from "${packageName}";
+
+Sentry.metrics.count('test_metric', 1);`,
+        },
+      ],
+    },
+  ],
+});
+
 export const getJavascriptFullStackOnboarding = <
   PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
 >({