diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 4c56b2e9a7..13ea03591d 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -6,6 +6,7 @@
*/
import React, {useState, cloneElement, Children, ReactElement} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import type {Props} from '@theme/Tabs';
import type {Props as TabItemProps} from '@theme/TabItem';
@@ -21,7 +22,7 @@ function isInViewport(element: HTMLElement): boolean {
return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
}
-function Tabs(props: Props): JSX.Element {
+function TabsComponent(props: Props): JSX.Element {
const {
lazy,
block,
@@ -163,4 +164,14 @@ function Tabs(props: Props): JSX.Element {
);
}
-export default Tabs;
+export default function Tabs(props: Props): JSX.Element {
+ const isBrowser = useIsBrowser();
+ return (
+
+ );
+}
diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
new file mode 100644
index 0000000000..af7dd77e12
--- /dev/null
+++ b/website/_dogfooding/_pages tests/tabs-tests.mdx
@@ -0,0 +1,22 @@
+# Tabs tests
+
+```mdx-code-block
+import BrowserWindow from '@site/src/components/BrowserWindow';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+```
+
+## Tabs with dynamic default value
+
+This can cause [bugs](https://github.com/facebook/react-native-website/issues/2771) when default value is different between SSR and client:
+
+```mdx-code-block
+export const isMacOS = typeof window !== 'undefined' && navigator.platform.startsWith('Mac');
+
+
+
+ Android content
+ iOS content
+
+
+```