diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index 9bb1677681e..8fda40b2884 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `Dropdown`, `Spinner`, `Tab`, `TabAddButton`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
index 1051888c6f5..075e0c433a0 100644
--- a/packages/graphiql-react/src/ui/index.ts
+++ b/packages/graphiql-react/src/ui/index.ts
@@ -2,3 +2,4 @@ export * from './button';
 export * from './dropdown';
 export * from './markdown';
 export * from './spinner';
+export * from './tabs';
diff --git a/packages/graphiql/src/components/Tabs.tsx b/packages/graphiql-react/src/ui/tabs.tsx
similarity index 90%
rename from packages/graphiql/src/components/Tabs.tsx
rename to packages/graphiql-react/src/ui/tabs.tsx
index 59eb23bcde0..e7628337740 100644
--- a/packages/graphiql/src/components/Tabs.tsx
+++ b/packages/graphiql-react/src/ui/tabs.tsx
@@ -1,9 +1,3 @@
-import React from 'react';
-
-/**
- * TODO: extract with other components to @graphiql/react
- */
-
 function TabCloseButton(props: { onClick: () => void }) {
   return (
     <div
@@ -20,7 +14,7 @@ function TabCloseButton(props: { onClick: () => void }) {
   );
 }
 
-export type TabProps = {
+type TabProps = {
   isActive: boolean;
   title: string;
   isCloseable: boolean;
@@ -58,7 +52,7 @@ export function TabAddButton(props: { onClick: () => void }) {
   );
 }
 
-export type TabsProps = {
+type TabsProps = {
   children: Array<React.ReactNode>;
   tabsProps?: React.HTMLAttributes<{}>;
 };
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
index 4914ece5515..8cb1027193d 100644
--- a/packages/graphiql/__mocks__/@graphiql/react.tsx
+++ b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -69,6 +69,9 @@ export {
   StopIcon,
   StorageContext,
   StorageContextProvider,
+  Tab,
+  TabAddButton,
+  Tabs,
   ToolbarButton,
   TypeDocumentation,
   TypeIcon,
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index c722783d752..7cc37431d4c 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -46,6 +46,9 @@ import {
   SettingsIcon,
   Spinner,
   StorageContextProvider,
+  Tab,
+  TabAddButton,
+  Tabs,
   ToolbarButton,
   UnStyledButton,
   useAutoCompleteLeafs,
@@ -78,8 +81,6 @@ import find from '../utility/find';
 import { formatError, formatResult } from '@graphiql/toolkit';
 import type { Fetcher, GetDefaultFieldNamesFn } from '@graphiql/toolkit';
 
-import { Tab, TabAddButton, Tabs } from './Tabs';
-
 const majorVersion = parseInt(React.version.slice(0, 2), 10);
 
 if (majorVersion < 16) {