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.module.css b/packages/react/src/PageHeader/PageHeader.module.css
index 992f1618d12..597cd8bc262 100644
--- a/packages/react/src/PageHeader/PageHeader.module.css
+++ b/packages/react/src/PageHeader/PageHeader.module.css
@@ -35,7 +35,7 @@
     We don't want these values to be overridden but still want to allow consumers to override them if needed.
   */
   /* stylelint-disable selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */
-  &:has([data-component='TitleArea'][data-size-variant='large']) {
+  &:has([data-component='PageHeader.TitleArea'][data-size-variant='large']) {
     font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
     font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
     line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */
@@ -43,7 +43,7 @@
     --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
   }
 
-  &:has([data-component='TitleArea'][data-size-variant='medium']) {
+  &:has([data-component='PageHeader.TitleArea'][data-size-variant='medium']) {
     font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
     font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
     line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
@@ -51,7 +51,7 @@
     --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
   }
 
-  &:has([data-component='TitleArea'][data-size-variant='subtitle']) {
+  &:has([data-component='PageHeader.TitleArea'][data-size-variant='subtitle']) {
     font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
     font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
     line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
@@ -61,7 +61,7 @@
 
   /* Responsive size variants */
   @media (--viewportRange-narrow) {
-    &:has([data-component='TitleArea'][data-size-variant-narrow='large']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-narrow='large']) {
       font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
@@ -69,7 +69,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-narrow='medium']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-narrow='medium']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -77,7 +77,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-narrow='subtitle']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-narrow='subtitle']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -87,7 +87,7 @@
   }
 
   @media (--viewportRange-regular) {
-    &:has([data-component='TitleArea'][data-size-variant-regular='large']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-regular='large']) {
       font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
@@ -95,7 +95,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-regular='medium']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-regular='medium']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -103,7 +103,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-regular='subtitle']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-regular='subtitle']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -113,7 +113,7 @@
   }
 
   @media (--viewportRange-wide) {
-    &:has([data-component='TitleArea'][data-size-variant-wide='large']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-wide='large']) {
       font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
@@ -121,7 +121,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-wide='medium']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-wide='medium']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -129,7 +129,7 @@
       --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
     }
 
-    &:has([data-component='TitleArea'][data-size-variant-wide='subtitle']) {
+    &:has([data-component='PageHeader.TitleArea'][data-size-variant-wide='subtitle']) {
       font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
       font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
       line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
@@ -138,39 +138,39 @@
     }
   }
 
-  &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]),
-  &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {
+  &[data-has-border='true']:has([data-component='PageHeader.Navigation'][data-hidden-all]),
+  &[data-has-border='true']:not(:has([data-component='PageHeader.Navigation'])) {
     border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
     padding-block-end: var(--base-size-8);
   }
 
   @media (--viewportRange-narrow) {
-    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) {
+    &[data-has-border='true']:has([data-component='PageHeader.Navigation'][data-hidden-narrow]) {
       border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
       padding-block-end: var(--base-size-8);
     }
   }
 
   @media (--viewportRange-regular) {
-    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) {
+    &[data-has-border='true']:has([data-component='PageHeader.Navigation'][data-hidden-regular]) {
       border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
       padding-block-end: var(--base-size-8);
     }
   }
 
   @media (--viewportRange-wide) {
-    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) {
+    &[data-has-border='true']:has([data-component='PageHeader.Navigation'][data-hidden-wide]) {
       border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
       padding-block-end: var(--base-size-8);
     }
   }
   /* stylelint-enable selector-pseudo-class-disallowed-list */
 
-  & [data-component='PH_LeadingAction'],
-  & [data-component='PH_TrailingAction'],
-  & [data-component='PH_Actions'],
-  & [data-component='PH_LeadingVisual'],
-  & [data-component='PH_TrailingVisual'] {
+  & [data-component='PageHeader.LeadingAction'],
+  & [data-component='PageHeader.TrailingAction'],
+  & [data-component='PageHeader.Actions'],
+  & [data-component='PageHeader.LeadingVisual'],
+  & [data-component='PageHeader.TrailingVisual'] {
     height: calc(var(--title-line-height) * 1em);
   }
 
diff --git a/packages/react/src/PageHeader/PageHeader.test.tsx b/packages/react/src/PageHeader/PageHeader.test.tsx
index a66f648d4bc..67182f73467 100644
--- a/packages/react/src/PageHeader/PageHeader.test.tsx
+++ b/packages/react/src/PageHeader/PageHeader.test.tsx
@@ -20,6 +20,45 @@ 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.TitleArea"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.ContextAreaActions"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.LeadingAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Breadcrumbs"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.LeadingVisual"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Title"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.TrailingVisual"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.TrailingAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Actions"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Description"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="PageHeader.Navigation"]')).toBeInTheDocument()
+  })
+
   it('respects the title variant prop', () => {
     const {getByText} = render(
       <PageHeader role="banner" aria-label="Title">
@@ -31,6 +70,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 +85,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 +112,7 @@ describe('PageHeader', () => {
 
     consoleSpy.mockRestore()
   })
+
   it('does not render "role" attribute when not explicitly specified', () => {
     const {container} = render(
       <PageHeader>
@@ -81,6 +123,7 @@ describe('PageHeader', () => {
     )
     expect(container.firstChild).not.toHaveAttribute('role')
   })
+
   it('renders "role" attribute when explicitly specified', () => {
     const {container} = render(
       <PageHeader role="banner">
@@ -91,6 +134,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 +145,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..96ce5c28620 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -69,7 +69,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
 
         if (!rootRef.current || rootRef.current.children.length <= 0) return
         const titleArea = Array.from(rootRef.current.children as HTMLCollection).find(child => {
-          return child instanceof HTMLElement && child.getAttribute('data-component') === 'TitleArea'
+          return child instanceof HTMLElement && child.getAttribute('data-component') === 'PageHeader.TitleArea'
         })
 
         // It is very unlikely to have a PageHeader without a TitleArea, but we still want to make sure we don't break the page if that happens.
@@ -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>
   )
@@ -211,7 +225,7 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
         className={clsx(classes.TitleArea, className)}
         // @ts-expect-error it needs a non nullable ref
         ref={titleAreaRef}
-        data-component="TitleArea"
+        data-component="PageHeader.TitleArea"
         {...getResponsiveAttributes('size-variant', variant)}
         {...getHiddenDataAttributes(hidden)}
       >
@@ -232,7 +246,7 @@ const LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>
   return (
     <div
       className={clsx(classes.LeadingAction, className)}
-      data-component="PH_LeadingAction"
+      data-component="PageHeader.LeadingAction"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
@@ -247,7 +261,7 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
   return (
     <div
       className={clsx(classes.Breadcrumbs, className)}
-      data-component="PH_Breadcrumbs"
+      data-component="PageHeader.Breadcrumbs"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
@@ -260,7 +274,7 @@ const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({ch
   return (
     <div
       className={clsx(classes.LeadingVisual, className)}
-      data-component="PH_LeadingVisual"
+      data-component="PageHeader.LeadingVisual"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
@@ -276,7 +290,7 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, classNa
   return (
     <Heading
       className={clsx(classes.Title, className)}
-      data-component="PH_Title"
+      data-component="PageHeader.Title"
       data-hidden={hidden}
       as={as}
       {...getHiddenDataAttributes(hidden)}
@@ -295,7 +309,7 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   return (
     <div
       className={clsx(classes.TrailingVisual, className)}
-      data-component="PH_TrailingVisual"
+      data-component="PageHeader.TrailingVisual"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
@@ -311,7 +325,7 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   return (
     <div
       className={clsx(classes.TrailingAction, className)}
-      data-component="PH_TrailingAction"
+      data-component="PageHeader.TrailingAction"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
@@ -323,7 +337,11 @@ export type ActionsProps = React.PropsWithChildren<ChildrenPropTypes>
 
 const Actions = ({children, className, hidden = false}: ActionsProps) => {
   return (
-    <div className={clsx(classes.Actions, className)} data-component="PH_Actions" {...getHiddenDataAttributes(hidden)}>
+    <div
+      className={clsx(classes.Actions, className)}
+      data-component="PageHeader.Actions"
+      {...getHiddenDataAttributes(hidden)}
+    >
       {children}
     </div>
   )
@@ -332,7 +350,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>
   )
@@ -364,7 +386,7 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
       aria-label={BaseComponent === 'nav' ? ariaLabel : undefined}
       aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}
       className={clsx(classes.Navigation, className)}
-      data-component="PH_Navigation"
+      data-component="PageHeader.Navigation"
       {...getHiddenDataAttributes(hidden)}
     >
       {children}
diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx
index 2166339f04c..ed4586d266f 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 3234e11e127..781295169f9 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={
             {
@@ -1200,6 +1204,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={
             {
@@ -1300,6 +1305,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}