diff --git a/.changeset/pretty-coats-sell.md b/.changeset/pretty-coats-sell.md
new file mode 100644
index 00000000000..6d55936a49e
--- /dev/null
+++ b/.changeset/pretty-coats-sell.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar
diff --git a/packages/react/src/PageHeader/PageHeader.test.tsx b/packages/react/src/PageHeader/PageHeader.test.tsx
index a66f648d4bc..0037ea0058c 100644
--- a/packages/react/src/PageHeader/PageHeader.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.test.tsx
@@ -20,6 +20,49 @@ describe('PageHeader', () => {
   implementsClassName(PageHeader.Actions, classes.Actions)
   implementsClassName(PageHeader.Description, classes.Description)
   implementsClassName(PageHeader.Navigation, classes.Navigation)
+
+  it('renders data-component attributes for PageHeader and exported subcomponents', () => {
+    const {container} = render(
+      <PageHeader aria-label="Title" role="banner">
+        <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
+        <PageHeader.ParentLink href="#">ParentLink</PageHeader.ParentLink>
+        <PageHeader.ContextBar>ContextBar</PageHeader.ContextBar>
+        <PageHeader.TitleArea>
+          <PageHeader.LeadingAction>LeadingAction</PageHeader.LeadingAction>
+          <PageHeader.Breadcrumbs>Breadcrumbs</PageHeader.Breadcrumbs>
+          <PageHeader.LeadingVisual>LeadingVisual</PageHeader.LeadingVisual>
+          <PageHeader.Title>Title</PageHeader.Title>
+          <PageHeader.TrailingVisual>TrailingVisual</PageHeader.TrailingVisual>
+          <PageHeader.TrailingAction>TrailingAction</PageHeader.TrailingAction>
+          <PageHeader.Actions>Actions</PageHeader.Actions>
+        </PageHeader.TitleArea>
+        <PageHeader.ContextAreaActions>ContextAreaActions</PageHeader.ContextAreaActions>
+        <PageHeader.Description>Description</PageHeader.Description>
+        <PageHeader.Navigation>Navigation</PageHeader.Navigation>
+      </PageHeader>,
+    )
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'PageHeader')
+    expect(container.querySelector('[data-component="PageHeader.ContextArea"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.ParentLink"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.ContextBar"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.ContextAreaActions"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Description"]')).toBeInTheDocument()
+
+    // New tests, but we need to update this to data-component="PageHeader.TitleArea later
+    expect(container.querySelector('[data-component="TitleArea"]')).toBeInTheDocument()
+
+    // New tests, but we need to update these from PH_ to PageHeader. later
+    expect(container.querySelector('[data-component="PH_LeadingAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_Breadcrumbs"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_LeadingVisual"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_Title"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_TrailingVisual"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_TrailingAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_Actions"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PH_Navigation"]')).toBeInTheDocument()
+  })
+
   it('respects the title variant prop', () => {
     const {getByText} = render(
       <PageHeader role="banner" aria-label="Title">
@@ -31,6 +74,7 @@ describe('PageHeader', () => {
     )
     expect(getByText('Title')).toHaveStyle('font-size: 32px')
   })
+
   it('renders "aria-label" prop when Navigation is rendered as "nav" landmark', () => {
     const {getByLabelText, getByText} = render(
       <PageHeader role="banner" aria-label="Title">
@@ -45,6 +89,7 @@ describe('PageHeader', () => {
     expect(getByLabelText('Custom')).toBeInTheDocument()
     expect(getByText('Navigation')).toHaveAttribute('aria-label', 'Custom')
   })
+
   it('does not render "aria-label" prop when Navigation is rendered as "div"', () => {
     const {getByText} = render(
       <PageHeader role="banner" aria-label="Title">
@@ -71,6 +116,7 @@ describe('PageHeader', () => {
 
     consoleSpy.mockRestore()
   })
+
   it('does not render "role" attribute when not explicitly specified', () => {
     const {container} = render(
       <PageHeader>
@@ -81,6 +127,7 @@ describe('PageHeader', () => {
     )
     expect(container.firstChild).not.toHaveAttribute('role')
   })
+
   it('renders "role" attribute when explicitly specified', () => {
     const {container} = render(
       <PageHeader role="banner">
@@ -91,6 +138,7 @@ describe('PageHeader', () => {
     )
     expect(container.firstChild).toHaveAttribute('role', 'banner')
   })
+
   it('does not render "aria-label" attribute when not explicitly specified', () => {
     const {container} = render(
       <PageHeader role="banner">
@@ -101,6 +149,7 @@ describe('PageHeader', () => {
     )
     expect(container.firstChild).not.toHaveAttribute('aria-label')
   })
+
   it('renders custom "aria-label" attribute when explicitly specified', () => {
     const {container} = render(
       <PageHeader aria-label="Custom aria-label" role="banner">
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 1acaadf06f3..59d861f5505 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -107,6 +107,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
       <BaseComponent
         ref={rootRef}
         className={clsx(classes.PageHeader, className)}
+        data-component="PageHeader"
         data-has-border={hasBorder ? 'true' : undefined}
         aria-label={ariaLabel}
         role={role}
@@ -127,7 +128,11 @@ const ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextArea, className)} {...getHiddenDataAttributes(hidden)}>
+    <div
+      className={clsx(classes.ContextArea, className)}
+      data-component="PageHeader.ContextArea"
+      {...getHiddenDataAttributes(hidden)}
+    >
       {children}
     </div>
   )
@@ -154,6 +159,7 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
           aria-label={ariaLabel}
           muted
           className={clsx(classes.ParentLink, className)}
+          data-component="PageHeader.ParentLink"
           {...getHiddenDataAttributes(hidden)}
           href={href}
         >
@@ -176,7 +182,11 @@ const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextBar, className)} {...getHiddenDataAttributes(hidden)}>
+    <div
+      className={clsx(classes.ContextBar, className)}
+      data-component="PageHeader.ContextBar"
+      {...getHiddenDataAttributes(hidden)}
+    >
       {children}
     </div>
   )
@@ -190,7 +200,11 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextAreaActions, className)} {...getHiddenDataAttributes(hidden)}>
+    <div
+      className={clsx(classes.ContextAreaActions, className)}
+      data-component="PageHeader.ContextAreaActions"
+      {...getHiddenDataAttributes(hidden)}
+    >
       {children}
     </div>
   )
@@ -332,7 +346,11 @@ const Actions = ({children, className, hidden = false}: ActionsProps) => {
 // PageHeader.Description: The description area of the header. Visible on all viewports
 const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
-    <div className={clsx(classes.Description, className)} {...getHiddenDataAttributes(hidden)}>
+    <div
+      className={clsx(classes.Description, className)}
+      data-component="PageHeader.Description"
+      {...getHiddenDataAttributes(hidden)}
+    >
       {children}
     </div>
   )
diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx
index 08e2cb0aaad..3742d595396 100644
--- a/packages/react/src/PageLayout/PageLayout.test.tsx
+++ b/packages/react/src/PageLayout/PageLayout.test.tsx
@@ -103,6 +103,25 @@ describe('PageLayout', async () => {
     expect(getByText('Pane')).toBeVisible()
   })
 
+  it('renders data-component attributes for PageLayout and exported subcomponents', () => {
+    const {container} = render(
+      <PageLayout>
+        <PageLayout.Header>Header</PageLayout.Header>
+        <PageLayout.Content>Content</PageLayout.Content>
+        <PageLayout.Pane>Pane</PageLayout.Pane>
+        <PageLayout.Sidebar>Sidebar</PageLayout.Sidebar>
+        <PageLayout.Footer>Footer</PageLayout.Footer>
+      </PageLayout>,
+    )
+
+    expect(container.querySelector('[data-component="PageLayout"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageLayout.Header"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageLayout.Content"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageLayout.Pane"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageLayout.Sidebar"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageLayout.Footer"]')).toBeInTheDocument()
+  })
+
   it('should support labeling landmarks through `aria-label`', () => {
     render(
       <PageLayout>
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 041bb73cc6a..e447757ae82 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -130,6 +130,7 @@ const RootWrapper = memo(
           } as React.CSSProperties
         }
         className={clsx(classes.PageLayoutRoot, className)}
+        data-component="PageLayout"
         data-has-sidebar={hasSidebar || undefined}
       >
         {children}
@@ -570,6 +571,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
     <header
       aria-label={label}
       aria-labelledby={labelledBy}
+      data-component="PageLayout.Header"
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.Header, className)}
       style={
@@ -649,6 +651,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
       ref={contentWrapperRef}
       aria-label={label}
       aria-labelledby={labelledBy}
+      data-component="PageLayout.Content"
       style={style}
       className={clsx(classes.ContentWrapper, className)}
       {...getResponsiveAttributes('is-hidden', hidden)}
@@ -896,6 +899,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
           className={classes.Pane}
+          data-component="PageLayout.Pane"
           data-resizable={resizable || undefined}
           style={
             {
@@ -1230,6 +1234,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLay
           {...labelProp}
           {...(id && {id: sidebarId})}
           className={classes.Sidebar}
+          data-component="PageLayout.Sidebar"
           data-resizable={resizable || undefined}
           style={
             {
@@ -1330,6 +1335,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
     <footer
       aria-label={label}
       aria-labelledby={labelledBy}
+      data-component="PageLayout.Footer"
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.FooterWrapper, className)}
       style={
diff --git a/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 0f60be9ba4a..4820e44e068 100644
--- a/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
 <div>
   <div
     class="prc-PageLayout-PageLayoutRoot-NJqoS"
+    data-component="PageLayout"
     style="--spacing: var(--spacing-condensed);"
   >
     <div
@@ -12,6 +13,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-component="PageLayout.Header"
         data-hidden="false"
         style="--spacing: var(--spacing-condensed);"
       >
@@ -32,6 +34,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
       >
         <main
           class="prc-PageLayout-ContentWrapper-984Tf"
+          data-component="PageLayout.Content"
           data-is-hidden="false"
         >
           <div
@@ -57,6 +60,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
           />
           <div
             class="prc-PageLayout-Pane-g6fEI"
+            data-component="PageLayout.Pane"
             style="--spacing: var(--spacing-none); --pane-min-width: 256px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); --pane-width-size: var(--pane-width-medium); --pane-width: 296px;"
           >
             Pane
@@ -72,6 +76,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-component="PageLayout.Footer"
         data-hidden="false"
         style="--spacing: var(--spacing-condensed);"
       >
@@ -96,6 +101,7 @@ exports[`PageLayout > renders default layout 1`] = `
 <div>
   <div
     class="prc-PageLayout-PageLayoutRoot-NJqoS"
+    data-component="PageLayout"
     style="--spacing: var(--spacing-normal);"
   >
     <div
@@ -104,6 +110,7 @@ exports[`PageLayout > renders default layout 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-component="PageLayout.Header"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
@@ -124,6 +131,7 @@ exports[`PageLayout > renders default layout 1`] = `
       >
         <main
           class="prc-PageLayout-ContentWrapper-984Tf"
+          data-component="PageLayout.Content"
           data-is-hidden="false"
         >
           <div
@@ -149,6 +157,7 @@ exports[`PageLayout > renders default layout 1`] = `
           />
           <div
             class="prc-PageLayout-Pane-g6fEI"
+            data-component="PageLayout.Pane"
             style="--spacing: var(--spacing-none); --pane-min-width: 256px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); --pane-width-size: var(--pane-width-medium); --pane-width: 296px;"
           >
             Pane
@@ -164,6 +173,7 @@ exports[`PageLayout > renders default layout 1`] = `
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-component="PageLayout.Footer"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
@@ -188,6 +198,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
 <div>
   <div
     class="prc-PageLayout-PageLayoutRoot-NJqoS"
+    data-component="PageLayout"
     style="--spacing: var(--spacing-normal);"
   >
     <div
@@ -196,6 +207,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-component="PageLayout.Header"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
@@ -216,6 +228,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
       >
         <main
           class="prc-PageLayout-ContentWrapper-984Tf"
+          data-component="PageLayout.Content"
           data-is-hidden="false"
         >
           <div
@@ -243,6 +256,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
           />
           <div
             class="prc-PageLayout-Pane-g6fEI"
+            data-component="PageLayout.Pane"
             style="--spacing: var(--spacing-none); --pane-min-width: 256px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); --pane-width-size: var(--pane-width-medium); --pane-width: 296px;"
           >
             Pane
@@ -259,6 +273,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-component="PageLayout.Footer"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
@@ -283,6 +298,7 @@ exports[`PageLayout > renders with dividers 1`] = `
 <div>
   <div
     class="prc-PageLayout-PageLayoutRoot-NJqoS"
+    data-component="PageLayout"
     style="--spacing: var(--spacing-normal);"
   >
     <div
@@ -291,6 +307,7 @@ exports[`PageLayout > renders with dividers 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-component="PageLayout.Header"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
@@ -312,6 +329,7 @@ exports[`PageLayout > renders with dividers 1`] = `
       >
         <main
           class="prc-PageLayout-ContentWrapper-984Tf"
+          data-component="PageLayout.Content"
           data-is-hidden="false"
         >
           <div
@@ -337,6 +355,7 @@ exports[`PageLayout > renders with dividers 1`] = `
           />
           <div
             class="prc-PageLayout-Pane-g6fEI"
+            data-component="PageLayout.Pane"
             style="--spacing: var(--spacing-none); --pane-min-width: 256px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); --pane-width-size: var(--pane-width-medium); --pane-width: 296px;"
           >
             Pane
@@ -353,6 +372,7 @@ exports[`PageLayout > renders with dividers 1`] = `
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-component="PageLayout.Footer"
         data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
diff --git a/packages/react/src/Pagehead/Pagehead.test.tsx b/packages/react/src/Pagehead/Pagehead.test.tsx
index 2a25c3ae858..c145f050326 100644
--- a/packages/react/src/Pagehead/Pagehead.test.tsx
+++ b/packages/react/src/Pagehead/Pagehead.test.tsx
@@ -14,5 +14,6 @@ describe('Pagehead', () => {
       </Pagehead>,
     )
     expect(container.firstChild).toHaveAttribute('data-testid', 'pagehead')
+    expect(container.firstChild).toHaveAttribute('data-component', 'Pagehead')
   })
 })
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index c0bead6c382..f393b5551fa 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -3,7 +3,7 @@ import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
 
 const Pagehead = ({as: BaseComponent = 'div', className, ...rest}: PageheadProps) => {
-  return <BaseComponent className={clsx(classes.Pagehead, className)} {...rest} />
+  return <BaseComponent className={clsx(classes.Pagehead, className)} data-component="Pagehead" {...rest} />
 }
 
 /**
diff --git a/packages/react/src/Popover/Popover.test.tsx b/packages/react/src/Popover/Popover.test.tsx
index 5f87faeaac1..b756dfb925d 100644
--- a/packages/react/src/Popover/Popover.test.tsx
+++ b/packages/react/src/Popover/Popover.test.tsx
@@ -33,10 +33,19 @@ describe('Popover', () => {
       )
 
       const {container} = render(element)
+      expect(container.firstChild).toHaveAttribute('data-component', 'Popover')
       expect(container.firstChild).toHaveAttribute('data-caret', pos)
     })
   }
 
+  it('renders data-component attributes for Popover and Popover.Content', () => {
+    const {container: popoverContainer} = render(<Popover />)
+    const {container: contentContainer} = render(<Popover.Content />)
+
+    expect(popoverContainer.firstChild).toHaveAttribute('data-component', 'Popover')
+    expect(contentContainer.firstChild).toHaveAttribute('data-component', 'Popover.Content')
+  })
+
   it('renders both elements as a <div>', () => {
     const {container: popoverContainer} = render(<Popover />)
     const {container: contentContainer} = render(<Popover.Content />)
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 6eb3a0d9fea..88a7b65b0f8 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -41,6 +41,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
     <div
       {...props}
       ref={forwardRef}
+      data-component="Popover"
       data-open={open ? '' : undefined}
       data-relative={relative ? '' : undefined}
       data-caret={caret}
@@ -86,6 +87,7 @@ const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = (
   return (
     <div
       ref={divRef}
+      data-component="Popover.Content"
       data-width={width}
       data-height={height}
       className={clsx(className, classes.PopoverContent)}
diff --git a/packages/react/src/Portal/Portal.test.tsx b/packages/react/src/Portal/Portal.test.tsx
index 7b4975b4616..ef71e98df9d 100644
--- a/packages/react/src/Portal/Portal.test.tsx
+++ b/packages/react/src/Portal/Portal.test.tsx
@@ -11,6 +11,10 @@ describe('Portal', () => {
     const generatedRoot = baseElement.querySelector('#__primerPortalRoot__')
     expect(generatedRoot).toBeInstanceOf(HTMLElement)
     expect(generatedRoot?.textContent.trim()).toEqual('123test123')
+
+    const portalNode = generatedRoot?.querySelector('[data-component="Portal"]')
+    expect(portalNode).toBeInstanceOf(HTMLElement)
+
     baseElement.innerHTML = ''
   })
 
@@ -35,6 +39,9 @@ describe('Portal', () => {
     expect(generatedRoot).toBeInstanceOf(HTMLElement)
     expect(generatedRoot?.textContent.trim()).toEqual('123test123')
 
+    const portalNode = generatedRoot?.querySelector('[data-component="Portal"]')
+    expect(portalNode).toBeInstanceOf(HTMLElement)
+
     baseElement.innerHTML = ''
   })
 
@@ -52,6 +59,9 @@ describe('Portal', () => {
     expect(portalRoot).toBeInstanceOf(HTMLElement)
     expect(portalRoot?.textContent.trim()).toEqual('123test123')
 
+    const portalNode = portalRoot?.querySelector('[data-component="Portal"]')
+    expect(portalNode).toBeInstanceOf(HTMLElement)
+
     baseElement.innerHTML = ''
   })
 
@@ -67,6 +77,9 @@ describe('Portal', () => {
     ;({baseElement} = render(toRender))
     expect(portalRoot?.textContent.trim()).toEqual('123test123')
 
+    const portalNode = portalRoot?.querySelector('[data-component="Portal"]')
+    expect(portalNode).toBeInstanceOf(HTMLElement)
+
     baseElement.innerHTML = ''
   })
 
@@ -99,6 +112,13 @@ describe('Portal', () => {
     expect(fancyPortalRoot1?.textContent.trim()).toEqual('456test456')
     expect(fancyPortalRoot2?.textContent.trim()).toEqual('789test789')
 
+    const portalNodeDefault = generatedRoot?.querySelector('[data-component="Portal"]')
+    expect(portalNodeDefault).toBeInstanceOf(HTMLElement)
+    const portalNode1 = fancyPortalRoot1?.querySelector('[data-component="Portal"]')
+    expect(portalNode1).toBeInstanceOf(HTMLElement)
+    const portalNode2 = fancyPortalRoot2?.querySelector('[data-component="Portal"]')
+    expect(portalNode2).toBeInstanceOf(HTMLElement)
+
     baseElement.innerHTML = ''
   })
 
@@ -118,6 +138,7 @@ describe('Portal', () => {
     render(toRender)
 
     expect(customPortalRoot.textContent.trim()).toEqual('context-portal-content')
+    expect(customPortalRoot.querySelector('[data-component="Portal"]')).toBeInstanceOf(HTMLElement)
 
     // Cleanup
     document.body.removeChild(customPortalRoot)
@@ -135,6 +156,7 @@ describe('Portal', () => {
 
     expect(generatedRoot).toBeInstanceOf(HTMLElement)
     expect(generatedRoot?.textContent.trim()).toEqual('default-portal-content')
+    expect(generatedRoot?.querySelector('[data-component="Portal"]')).toBeInstanceOf(HTMLElement)
 
     baseElement.innerHTML = ''
   })
@@ -151,6 +173,7 @@ describe('Portal', () => {
 
     expect(generatedRoot).toBeInstanceOf(HTMLElement)
     expect(generatedRoot?.textContent.trim()).toEqual('undefined-context-content')
+    expect(generatedRoot?.querySelector('[data-component="Portal"]')).toBeInstanceOf(HTMLElement)
 
     baseElement.innerHTML = ''
   })
@@ -178,6 +201,7 @@ describe('Portal', () => {
     // Should render in the portal specified by the prop, not the context
     expect(propPortalRoot.textContent.trim()).toEqual('prop-overrides-context')
     expect(contextPortalRoot.textContent.trim()).toEqual('')
+    expect(propPortalRoot.querySelector('[data-component="Portal"]')).toBeInstanceOf(HTMLElement)
 
     // Cleanup
     document.body.removeChild(contextPortalRoot)
diff --git a/packages/react/src/Portal/Portal.tsx b/packages/react/src/Portal/Portal.tsx
index 98c32142161..5fe960f8a88 100644
--- a/packages/react/src/Portal/Portal.tsx
+++ b/packages/react/src/Portal/Portal.tsx
@@ -79,6 +79,7 @@ export const Portal: React.FC<React.PropsWithChildren<PortalProps>> = ({
   // eslint-disable-next-line react-hooks/refs
   if (!elementRef.current) {
     const div = document.createElement('div')
+    div.setAttribute('data-component', 'Portal')
     // Portaled content should get their own stacking context so they don't interfere
     // with each other in unexpected ways. One should never find themselves tempted
     // to change the zIndex to a value other than "1".
diff --git a/packages/react/src/ProgressBar/ProgressBar.test.tsx b/packages/react/src/ProgressBar/ProgressBar.test.tsx
index 0321ee0daea..d6fe147f935 100644
--- a/packages/react/src/ProgressBar/ProgressBar.test.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.test.tsx
@@ -8,6 +8,23 @@ describe('ProgressBar', () => {
   implementsClassName(ProgressBar, classes.ProgressBarContainer)
   implementsClassName(ProgressBar.Item, classes.ProgressBarItem)
 
+  it('renders data-component attributes for ProgressBar and ProgressBar.Item', () => {
+    const {container} = render(<ProgressBar progress={50} aria-label="Upload test.png" />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'ProgressBar')
+    expect(container.querySelector('[role="progressbar"]')).toHaveAttribute('data-component', 'ProgressBar.Item')
+
+    const {container: multiItemContainer} = render(
+      <ProgressBar aria-label="Upload test.png">
+        <ProgressBar.Item progress={80} />
+      </ProgressBar>,
+    )
+    expect(multiItemContainer.firstChild).toHaveAttribute('data-component', 'ProgressBar')
+    expect(multiItemContainer.querySelector('[role="progressbar"]')).toHaveAttribute(
+      'data-component',
+      'ProgressBar.Item',
+    )
+  })
+
   it('respects the "barSize" prop', () => {
     const barSizeSmall = render(<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" />)
     expect(barSizeSmall.container.firstChild).toHaveAttribute('data-progress-bar-size', 'small')
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 4f6f9a117ee..579779f8f5f 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -54,6 +54,7 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
 
     return (
       <span
+        data-component="ProgressBar.Item"
         className={clsx(className, classes.ProgressBarItem)}
         {...rest}
         role="progressbar"
@@ -102,6 +103,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
     return (
       <span
         ref={forwardRef}
+        data-component="ProgressBar"
         className={clsx(className, classes.ProgressBarContainer)}
         data-progress-display={inline ? 'inline' : 'block'}
         data-progress-bar-size={barSize}