From 9cce910aee19bd0f4406d1a7d8cfa0af10e1cbef Mon Sep 17 00:00:00 2001
From: Yakov Rakhamimov <yakovr@wix.com>
Date: Sat, 26 Oct 2024 01:22:38 +0300
Subject: [PATCH] added tanstack router example

---
 apps/mantine.dev/src/pages/core/tabs.mdx | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/mantine.dev/src/pages/core/tabs.mdx b/apps/mantine.dev/src/pages/core/tabs.mdx
index 5ed01b9efa..c50821a5ee 100644
--- a/apps/mantine.dev/src/pages/core/tabs.mdx
+++ b/apps/mantine.dev/src/pages/core/tabs.mdx
@@ -184,6 +184,33 @@ function Demo() {
 }
 ```
 
+## Usage with @tanstack/react-router
+
+```tsx
+import { useNavigate, useParams } from '@tanstack/react-router';
+import { Tabs } from '@mantine/core';
+
+function Demo() {
+  const navigate = useNavigate();
+  const { tabValue } = useParams({ from: '/tabs/$tabId' });
+
+  return (
+    <Tabs
+      value={tabValue}
+      onChange={(value) => navigate({
+        to: `/tabs/$tabId`,
+        params: { tabId: value }
+      })}
+    >
+      <Tabs.List>
+        <Tabs.Tab value="first">First tab</Tabs.Tab>
+        <Tabs.Tab value="second">Second tab</Tabs.Tab>
+      </Tabs.List>
+    </Tabs>
+  );
+}
+```
+
 ## Usage with Next.js router
 
 ```tsx