diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.docs.json b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.docs.json
index f2ccc0d554b..8804541cd09 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.docs.json
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.docs.json
@@ -47,6 +47,13 @@
       "required": true,
       "description": "Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render"
     },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "description": "Class name for custom styling. Is applied to the custom element, [tab-container](https://github.com/github/tab-container-element)",
+      "defaultValue": ""
+    },
     {
       "name": "id",
       "type": "string",
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx
index ffbc185d9b1..58f9e2daa28 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx
@@ -161,6 +161,6 @@ describe('UnderlinePanels', () => {
         <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
       </UnderlinePanels>
     )
-    expect(render(<Element />).baseElement.firstChild?.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(render(<Element />).baseElement.firstChild?.firstChild).toHaveClass('test-class-name')
   })
 })
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 0a9ca088c3b..242dad23f57 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -24,7 +24,6 @@ import {type SxProp} from '../../sx'
 import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResizeObserver'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import classes from './UnderlinePanels.module.css'
-import {clsx} from 'clsx'
 import {BoxWithFallback} from '../../internal/components/BoxWithFallback'
 
 export type UnderlinePanelsProps = {
@@ -49,7 +48,7 @@ export type UnderlinePanelsProps = {
    */
   loadingCounters?: boolean
   /**
-   * Class name for custom styling
+   * Class name for custom styling. Is applied to the custom element, [tab-container](https://github.com/github/tab-container-element)
    */
   className?: string
 } & SxProp
@@ -170,12 +169,12 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
   }
 
   return (
-    <TabContainerComponent>
+    <TabContainerComponent className={className}>
       <UnderlineWrapper
         ref={wrapperRef}
         slot="tablist-wrapper"
         data-icons-visible={iconsVisible}
-        className={clsx(className, classes.StyledUnderlineWrapper)}
+        className={classes.StyledUnderlineWrapper}
         {...props}
       >
         <UnderlineItemList ref={listRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} role="tablist">