diff --git a/.changeset/lazy-camels-trade.md b/.changeset/lazy-camels-trade.md
new file mode 100644
index 00000000000..689d4c5f479
--- /dev/null
+++ b/.changeset/lazy-camels-trade.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+replace `compose.ts` with `clsx` for class concatenation
diff --git a/custom-words.txt b/custom-words.txt
index e753ca01c43..15db1134f34 100644
--- a/custom-words.txt
+++ b/custom-words.txt
@@ -74,6 +74,7 @@ codesandbox
 combobox
 commitlint
 cosmicconfig
+clsx
 dompurify
 dustjs
 dset
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
index afc80804126..4da57cb0ccc 100644
--- a/packages/graphiql-react/package.json
+++ b/packages/graphiql-react/package.json
@@ -43,6 +43,7 @@
     "@reach/menu-button": "^0.17.0",
     "@reach/tooltip": "^0.17.0",
     "@reach/visually-hidden": "^0.17.0",
+    "clsx": "^1.2.1",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.2",
     "copy-to-clipboard": "^3.2.0",
diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
index f401d1ad41f..5ab7dae7da3 100644
--- a/packages/graphiql-react/src/editor/components/header-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../context';
 import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
@@ -29,6 +30,6 @@ export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
   }, [headerEditor, isHidden]);
 
   return (
-    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
   );
 }
diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
index 2d50b619d06..3d354157d7e 100644
--- a/packages/graphiql-react/src/editor/components/variable-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../context';
 import { useVariableEditor, UseVariableEditorArgs } from '../variable-editor';
@@ -31,6 +32,6 @@ export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
   }, [variableEditor, isHidden]);
 
   return (
-    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
   );
 }
diff --git a/packages/graphiql-react/src/history/components.tsx b/packages/graphiql-react/src/history/components.tsx
index 8c5ffbf3e2f..ca2c95ed3bc 100644
--- a/packages/graphiql-react/src/history/components.tsx
+++ b/packages/graphiql-react/src/history/components.tsx
@@ -1,5 +1,6 @@
 import { QueryStoreItem } from '@graphiql/toolkit';
 import { Fragment, useEffect, useRef, useState } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../editor';
 import { CloseIcon, PenIcon, StarFilledIcon, StarIcon } from '../icons';
@@ -66,7 +67,7 @@ export function HistoryItem(props: QueryHistoryItemProps) {
     formatQuery(props.item.query);
 
   return (
-    <li className={'graphiql-history-item' + (isEditable ? ' editable' : '')}>
+    <li className={clsx('graphiql-history-item', isEditable && 'editable')}>
       {isEditable ? (
         <>
           <input
diff --git a/packages/graphiql-react/src/toolbar/button.tsx b/packages/graphiql-react/src/toolbar/button.tsx
index 0399493d969..b5711d4b5fd 100644
--- a/packages/graphiql-react/src/toolbar/button.tsx
+++ b/packages/graphiql-react/src/toolbar/button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
 import { Tooltip, UnStyledButton } from '../ui';
-import { compose } from '../utility/compose';
 
 import './button.css';
 
@@ -19,9 +19,9 @@ export const ToolbarButton = forwardRef<
         {...props}
         ref={ref}
         type="button"
-        className={compose(
+        className={clsx(
           'graphiql-toolbar-button',
-          error ? 'error' : '',
+          error && 'error',
           props.className,
         )}
         onClick={event => {
diff --git a/packages/graphiql-react/src/toolbar/listbox.tsx b/packages/graphiql-react/src/toolbar/listbox.tsx
index ef523f9f89c..d5107c88226 100644
--- a/packages/graphiql-react/src/toolbar/listbox.tsx
+++ b/packages/graphiql-react/src/toolbar/listbox.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps, forwardRef, ReactNode } from 'react';
+import { clsx } from 'clsx';
 import { Listbox, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './listbox.css';
 
@@ -19,7 +19,7 @@ const ToolbarListboxRoot = forwardRef<
     <Listbox.Input
       {...props}
       ref={ref}
-      className={compose('graphiql-toolbar-listbox', props.className)}
+      className={clsx('graphiql-toolbar-listbox', props.className)}
       aria-label={labelWithValue}
     >
       <Tooltip label={labelWithValue}>
diff --git a/packages/graphiql-react/src/toolbar/menu.tsx b/packages/graphiql-react/src/toolbar/menu.tsx
index 7fb71cfe1e2..83d45976c5e 100644
--- a/packages/graphiql-react/src/toolbar/menu.tsx
+++ b/packages/graphiql-react/src/toolbar/menu.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, ReactNode } from 'react';
+import { clsx } from 'clsx';
 import { Menu, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './menu.css';
 
@@ -17,7 +17,7 @@ const ToolbarMenuRoot = forwardRef<
   <Menu {...props} ref={ref}>
     <Tooltip label={label}>
       <Menu.Button
-        className={compose(
+        className={clsx(
           'graphiql-un-styled graphiql-toolbar-menu',
           props.className,
         )}
diff --git a/packages/graphiql-react/src/ui/button-group.tsx b/packages/graphiql-react/src/ui/button-group.tsx
index 0dee87dc7e7..a85208827e6 100644
--- a/packages/graphiql-react/src/ui/button-group.tsx
+++ b/packages/graphiql-react/src/ui/button-group.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 
 import './button-group.css';
 
@@ -9,7 +10,7 @@ export const ButtonGroup = forwardRef<
   <div
     {...props}
     ref={ref}
-    className={`graphiql-button-group ${props.className || ''}`.trim()}
+    className={clsx('graphiql-button-group', props.className)}
   />
 ));
 ButtonGroup.displayName = 'ButtonGroup';
diff --git a/packages/graphiql-react/src/ui/button.tsx b/packages/graphiql-react/src/ui/button.tsx
index d010196b559..02aacdd6840 100644
--- a/packages/graphiql-react/src/ui/button.tsx
+++ b/packages/graphiql-react/src/ui/button.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { compose } from '../utility/compose';
+import { clsx } from 'clsx';
 
 import './button.css';
 
@@ -10,7 +10,7 @@ export const UnStyledButton = forwardRef<
   <button
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 UnStyledButton.displayName = 'UnStyledButton';
@@ -24,13 +24,12 @@ export const Button = forwardRef<
   <button
     {...props}
     ref={ref}
-    className={compose(
+    className={clsx(
       'graphiql-button',
-      props.state === 'success'
-        ? 'graphiql-button-success'
-        : props.state === 'error'
-        ? 'graphiql-button-error'
-        : '',
+      {
+        success: 'graphiql-button-success',
+        error: 'graphiql-button-error',
+      }[props.state!],
       props.className,
     )}
   />
diff --git a/packages/graphiql-react/src/ui/dialog.tsx b/packages/graphiql-react/src/ui/dialog.tsx
index 79b978eca04..e791bad5a16 100644
--- a/packages/graphiql-react/src/ui/dialog.tsx
+++ b/packages/graphiql-react/src/ui/dialog.tsx
@@ -1,9 +1,9 @@
+import { clsx } from 'clsx';
 import { Dialog as ReachDialog } from '@reach/dialog';
 import { VisuallyHidden } from '@reach/visually-hidden';
 import { ComponentProps, forwardRef } from 'react';
 import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
 
 import './dialog.css';
@@ -22,7 +22,7 @@ const DialogClose = forwardRef<
     {...props}
     ref={ref}
     type="button"
-    className={compose('graphiql-dialog-close', props.className)}
+    className={clsx('graphiql-dialog-close', props.className)}
   >
     <VisuallyHidden>Close dialog</VisuallyHidden>
     <CloseIcon />
diff --git a/packages/graphiql-react/src/ui/dropdown.tsx b/packages/graphiql-react/src/ui/dropdown.tsx
index 0b4531899ea..9cdc5564544 100644
--- a/packages/graphiql-react/src/ui/dropdown.tsx
+++ b/packages/graphiql-react/src/ui/dropdown.tsx
@@ -12,8 +12,8 @@ import {
   MenuList,
 } from '@reach/menu-button';
 import { ComponentProps, forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './dropdown.css';
 
@@ -24,7 +24,7 @@ const MenuButton = forwardRef<
   <ReachMenuButton
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 MenuButton.displayName = 'MenuButton';
@@ -42,7 +42,7 @@ const ListboxButton = forwardRef<
   <ReachListboxButton
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 ListboxButton.displayName = 'ListboxButton';
diff --git a/packages/graphiql-react/src/ui/markdown.tsx b/packages/graphiql-react/src/ui/markdown.tsx
index fd70175a34c..19ae3d59cb0 100644
--- a/packages/graphiql-react/src/ui/markdown.tsx
+++ b/packages/graphiql-react/src/ui/markdown.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { markdown } from '../markdown';
-import { compose } from '../utility/compose';
 
 import './markdown.css';
 
@@ -17,9 +17,9 @@ export const MarkdownContent = forwardRef<
   <div
     {...props}
     ref={ref}
-    className={compose(
+    className={clsx(
       `graphiql-markdown-${type}`,
-      onlyShowFirstChild ? ' graphiql-markdown-preview' : '',
+      onlyShowFirstChild && 'graphiql-markdown-preview',
       props.className,
     )}
     dangerouslySetInnerHTML={{ __html: markdown.render(children) }}
diff --git a/packages/graphiql-react/src/ui/spinner.tsx b/packages/graphiql-react/src/ui/spinner.tsx
index 818290ebd97..1c06a2fccb8 100644
--- a/packages/graphiql-react/src/ui/spinner.tsx
+++ b/packages/graphiql-react/src/ui/spinner.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { compose } from '../utility/compose';
+import { clsx } from 'clsx';
 
 import './spinner.css';
 
@@ -8,7 +8,7 @@ export const Spinner = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
     <div
       {...props}
       ref={ref}
-      className={compose('graphiql-spinner', props.className)}
+      className={clsx('graphiql-spinner', props.className)}
     />
   ),
 );
diff --git a/packages/graphiql-react/src/ui/tabs.tsx b/packages/graphiql-react/src/ui/tabs.tsx
index 1178f40e0b3..9779ebb965f 100644
--- a/packages/graphiql-react/src/ui/tabs.tsx
+++ b/packages/graphiql-react/src/ui/tabs.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
 import { Tooltip } from './tooltip';
 
@@ -20,9 +20,9 @@ const TabRoot = forwardRef<
     ref={ref}
     role="tab"
     aria-selected={isActive}
-    className={compose(
+    className={clsx(
       'graphiql-tab',
-      isActive ? 'graphiql-tab-active' : '',
+      isActive && 'graphiql-tab-active',
       props.className,
     )}
   >
@@ -39,7 +39,7 @@ const TabButton = forwardRef<
     {...props}
     ref={ref}
     type="button"
-    className={compose('graphiql-tab-button', props.className)}
+    className={clsx('graphiql-tab-button', props.className)}
   >
     {props.children}
   </UnStyledButton>
@@ -54,7 +54,7 @@ const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
         {...props}
         ref={ref}
         type="button"
-        className={compose('graphiql-tab-close', props.className)}
+        className={clsx('graphiql-tab-close', props.className)}
       >
         <CloseIcon />
       </UnStyledButton>
@@ -74,7 +74,7 @@ export const Tabs = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
       {...props}
       ref={ref}
       role="tablist"
-      className={compose('graphiql-tabs', props.className)}
+      className={clsx('graphiql-tabs', props.className)}
     >
       {props.children}
     </div>
diff --git a/packages/graphiql-react/src/utility/compose.ts b/packages/graphiql-react/src/utility/compose.ts
deleted file mode 100644
index 151f47ba2a2..00000000000
--- a/packages/graphiql-react/src/utility/compose.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function compose(...classes: (string | null | undefined)[]) {
-  let result = '';
-  for (const c of classes) {
-    if (c) {
-      result += (result ? ' ' : '') + c;
-    }
-  }
-  return result;
-}
diff --git a/yarn.lock b/yarn.lock
index 8041b12765f..a58748bc0dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8006,6 +8006,11 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"