From db3c99a2fcaf1de681aeb704b1daa78d0adf13d9 Mon Sep 17 00:00:00 2001
From: Jamie Shark <5520141+jamieshark@users.noreply.github.com>
Date: Wed, 16 Apr 2025 12:35:16 -0500
Subject: [PATCH 1/2] Adds className prop to UnderlineNav component.

---
 packages/react/src/UnderlineNav/UnderlineNav.test.tsx | 8 +++++++-
 packages/react/src/UnderlineNav/UnderlineNav.tsx      | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
index 5d7793390a3..65594c250a9 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
@@ -55,7 +55,7 @@ const ResponsiveUnderlineNav = ({
 
   return (
     <div>
-      <UnderlineNav aria-label="Repository" loadingCounters={loadingCounters}>
+      <UnderlineNav aria-label="Repository" className="foo" loadingCounters={loadingCounters}>
         {items.map(item => (
           <UnderlineNav.Item
             key={item.navigation}
@@ -142,6 +142,12 @@ describe('UnderlineNav', () => {
     expect(counter).toHaveAttribute('aria-hidden', 'true')
   })
 
+  it('adds className prop to base wrapper classes', () => {
+    const {getByRole} = render(<ResponsiveUnderlineNav />)
+    const nav = getByRole('navigation')
+    expect(nav).toHaveAttribute('class', 'UnderlineWrapper foo')
+  })
+
   it('renders the content of visually hidden span properly for screen readers', () => {
     const {getByRole} = render(<ResponsiveUnderlineNav />)
     const item = getByRole('link', {name: 'Issues (120)'})
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 143103ec5d6..6737f50160c 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -26,6 +26,7 @@ export type UnderlineNavProps = {
   children: React.ReactNode
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
+  className?: string
   sx?: SxProp['sx']
   /**
    * loading state for all counters. It displays loading animation for individual counters (UnderlineNav.Item) until all are resolved. It is needed to prevent multiple layout shift.
@@ -140,6 +141,7 @@ export const UnderlineNav = forwardRef(
       'aria-label': ariaLabel,
       sx: sxProp = defaultSxProp,
       loadingCounters = false,
+      className,
       children,
     }: UnderlineNavProps,
     forwardedRef,
@@ -306,7 +308,7 @@ export const UnderlineNav = forwardRef(
         }}
       >
         {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
-        <UnderlineWrapper as={as} aria-label={ariaLabel} ref={navRef} sx={sxProp}>
+        <UnderlineWrapper as={as} aria-label={ariaLabel} className={className} ref={navRef} sx={sxProp}>
           <UnderlineItemList ref={listRef} role="list">
             {listItems}
             {menuItems.length > 0 && (

From 949636f40f68b64ee6c99cadeb5cd236b43adfbb Mon Sep 17 00:00:00 2001
From: Jamie Shark <5520141+jamieshark@users.noreply.github.com>
Date: Wed, 16 Apr 2025 12:36:06 -0500
Subject: [PATCH 2/2] Changeset.

---
 .changeset/yummy-files-look.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yummy-files-look.md

diff --git a/.changeset/yummy-files-look.md b/.changeset/yummy-files-look.md
new file mode 100644
index 00000000000..bc3c3b1af50
--- /dev/null
+++ b/.changeset/yummy-files-look.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds className prop to UnderlineNav component.