diff --git a/.changeset/silent-buses-knock.md b/.changeset/silent-buses-knock.md
new file mode 100644
index 00000000000..800a06860b3
--- /dev/null
+++ b/.changeset/silent-buses-knock.md
@@ -0,0 +1,14 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for:
+
+SplitPageLayout
+Stack
+StateLabel
+SubNav
+TabNav
+Text
+TextArea
+ThemeProvider
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 1fcbbc78f97..17ab7e8ca2f 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -67,6 +67,7 @@ export type PageLayoutProps = {
   _slotsConfig?: Record<'header' | 'footer' | 'sidebar', React.ElementType>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 // TODO: refs
@@ -79,6 +80,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   className,
   style,
   _slotsConfig: slotsConfig,
+  'data-component': dataComponent = 'PageLayout',
 }) => {
   const paneRef = useRef<HTMLDivElement>(null)
   const contentWrapperRef = useRef<HTMLDivElement>(null)
@@ -101,7 +103,13 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
 
   return (
     <PageLayoutContext.Provider value={memoizedContextValue}>
-      <RootWrapper style={style} padding={padding} className={className} hasSidebar={!!slots.sidebar}>
+      <RootWrapper
+        style={style}
+        padding={padding}
+        className={className}
+        hasSidebar={!!slots.sidebar}
+        dataComponent={dataComponent}
+      >
         {slots.sidebar}
         <div ref={sidebarContentWrapperRef} className={classes.PageLayoutWrapper} data-width={containerWidth}>
           {slots.header}
@@ -120,7 +128,10 @@ const RootWrapper = memo(
     children,
     className,
     hasSidebar,
-  }: React.PropsWithChildren<Pick<PageLayoutProps, 'style' | 'padding' | 'className'> & {hasSidebar?: boolean}>) => {
+    dataComponent,
+  }: React.PropsWithChildren<
+    Pick<PageLayoutProps, 'style' | 'padding' | 'className'> & {hasSidebar?: boolean; dataComponent: string}
+  >) => {
     return (
       <div
         style={
@@ -130,7 +141,7 @@ const RootWrapper = memo(
           } as React.CSSProperties
         }
         className={clsx(classes.PageLayoutRoot, className)}
-        data-component="PageLayout"
+        data-component={dataComponent}
         data-has-sidebar={hasSidebar || undefined}
       >
         {children}
@@ -549,6 +560,7 @@ export type PageLayoutHeaderProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
@@ -561,6 +573,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
   children,
   style,
   className,
+  'data-component': dataComponent = 'PageLayout.Header',
 }) => {
   // Combine divider and dividerWhenNarrow for backwards compatibility
   const dividerProp =
@@ -574,7 +587,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
     <header
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Header"
+      data-component={dataComponent}
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.Header, className)}
       style={
@@ -632,6 +645,7 @@ export type PageLayoutContentProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 // TODO: Account for pane width when centering content
@@ -645,6 +659,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
   children,
   className,
   style,
+  'data-component': dataComponent = 'PageLayout.Content',
 }) => {
   const Component = as
   const {contentWrapperRef} = React.useContext(PageLayoutContext)
@@ -654,7 +669,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
       ref={contentWrapperRef}
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Content"
+      data-component={dataComponent}
       style={style}
       className={clsx(classes.ContentWrapper, className)}
       {...getResponsiveAttributes('is-hidden', hidden)}
@@ -750,6 +765,7 @@ export type PageLayoutPaneBaseProps = {
   id?: string
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 export type PageLayoutPaneProps = PageLayoutPaneBaseProps &
@@ -799,6 +815,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       id,
       className,
       style,
+      'data-component': dataComponent = 'PageLayout.Pane',
     },
     forwardRef,
   ) => {
@@ -902,7 +919,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
           className={classes.Pane}
-          data-component="PageLayout.Pane"
+          data-component={dataComponent}
           data-resizable={resizable || undefined}
           style={
             {
@@ -1100,6 +1117,7 @@ export type PageLayoutSidebarBaseProps = {
 
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 export type PageLayoutSidebarProps = PageLayoutSidebarBaseProps &
@@ -1145,6 +1163,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLay
       id,
       className,
       style,
+      'data-component': dataComponent = 'PageLayout.Sidebar',
     },
     forwardRef,
   ) => {
@@ -1237,7 +1256,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLay
           {...labelProp}
           {...(id && {id: sidebarId})}
           className={classes.Sidebar}
-          data-component="PageLayout.Sidebar"
+          data-component={dataComponent}
           data-resizable={resizable || undefined}
           style={
             {
@@ -1313,6 +1332,7 @@ export type PageLayoutFooterProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> = ({
@@ -1325,6 +1345,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
   children,
   className,
   style,
+  'data-component': dataComponent = 'PageLayout.Footer',
 }) => {
   // Combine divider and dividerWhenNarrow for backwards compatibility
   const dividerProp =
@@ -1338,7 +1359,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
     <footer
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Footer"
+      data-component={dataComponent}
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.FooterWrapper, className)}
       style={
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx
index 0cc036ad5f5..5b73425d244 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -7,6 +7,25 @@ import {implementsClassName} from '../utils/testing'
 describe('SplitPageLayout', () => {
   implementsClassName(SplitPageLayout)
 
+  it('renders data-component attributes for all components', () => {
+    const {container} = render(
+      <SplitPageLayout>
+        <SplitPageLayout.Header>Header</SplitPageLayout.Header>
+        <SplitPageLayout.Content>Content</SplitPageLayout.Content>
+        <SplitPageLayout.Pane>Pane</SplitPageLayout.Pane>
+        <SplitPageLayout.Sidebar>Sidebar</SplitPageLayout.Sidebar>
+        <SplitPageLayout.Footer>Footer</SplitPageLayout.Footer>
+      </SplitPageLayout>,
+    )
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'SplitPageLayout')
+    expect(container.querySelector('[data-component="SplitPageLayout.Header"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Content"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Pane"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Sidebar"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Footer"]')).toBeInTheDocument()
+  })
+
   it('renders Pane with a custom ID', () => {
     const {getByText} = render(
       <SplitPageLayout>
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 8eeb4a9203d..982eb443fbd 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -7,6 +7,7 @@ import type {
   PageLayoutSidebarProps,
 } from '../PageLayout'
 import {PageLayout} from '../PageLayout'
+import type {WithSlotMarker} from '../utils/types'
 
 // ----------------------------------------------------------------------------
 // SplitPageLayout
@@ -16,6 +17,7 @@ export type SplitPageLayoutProps = {className?: string}
 export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
   return (
     <PageLayout
+      data-component="SplitPageLayout"
       containerWidth="full"
       padding="none"
       columnGap="none"
@@ -43,7 +45,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Header padding={padding} divider={divider} {...props} />
+  return <PageLayout.Header data-component="SplitPageLayout.Header" padding={padding} divider={divider} {...props} />
 }
 
 Header.displayName = 'SplitPageLayout.Header'
@@ -58,7 +60,7 @@ export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentPro
   padding = 'normal',
   ...props
 }) => {
-  return <PageLayout.Content width={width} padding={padding} {...props} />
+  return <PageLayout.Content data-component="SplitPageLayout.Content" width={width} padding={padding} {...props} />
 }
 
 Content.displayName = 'SplitPageLayout.Content'
@@ -77,6 +79,7 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
 }) => {
   return (
     <PageLayout.Pane
+      data-component="SplitPageLayout.Pane"
       position={position}
       sticky={sticky}
       padding={padding}
@@ -98,7 +101,15 @@ export const Sidebar: React.FC<React.PropsWithChildren<SplitPageLayoutSidebarPro
   divider = 'line',
   ...props
 }) => {
-  return <PageLayout.Sidebar position={position} padding={padding} divider={divider} {...props} />
+  return (
+    <PageLayout.Sidebar
+      data-component="SplitPageLayout.Sidebar"
+      position={position}
+      padding={padding}
+      divider={divider}
+      {...props}
+    />
+  )
 }
 
 Sidebar.displayName = 'SplitPageLayout.Sidebar'
@@ -114,13 +125,18 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Footer padding={padding} divider={divider} {...props} />
+  return <PageLayout.Footer data-component="SplitPageLayout.Footer" padding={padding} divider={divider} {...props} />
 }
 
 Footer.displayName = 'SplitPageLayout.Footer'
 
 // ----------------------------------------------------------------------------
 // Export
+;(Header as WithSlotMarker<typeof Header>).__SLOT__ = PageLayout.Header.__SLOT__
+;(Content as WithSlotMarker<typeof Content>).__SLOT__ = PageLayout.Content.__SLOT__
+;(Pane as WithSlotMarker<typeof Pane>).__SLOT__ = PageLayout.Pane.__SLOT__
+;(Sidebar as WithSlotMarker<typeof Sidebar>).__SLOT__ = PageLayout.Sidebar.__SLOT__
+;(Footer as WithSlotMarker<typeof Footer>).__SLOT__ = PageLayout.Footer.__SLOT__
 
 export const SplitPageLayout = Object.assign(Root, {
   Header,
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 9a96c6e71f6..3d305129df3 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -102,6 +102,7 @@ const Stack = forwardRef(
       <Component
         ref={forwardedRef}
         {...rest}
+        data-component="Stack"
         className={clsx(className, classes.Stack)}
         {...getResponsiveAttributes('gap', gap)}
         {...getResponsiveAttributes('direction', direction)}
@@ -144,6 +145,7 @@ const StackItem = forwardRef(({as: Component = 'div', children, grow, shrink, cl
     <Component
       ref={forwardedRef}
       {...rest}
+      data-component="StackItem"
       className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
       {...getResponsiveAttributes('shrink', shrink)}
diff --git a/packages/react/src/Stack/__tests__/Stack.test.tsx b/packages/react/src/Stack/__tests__/Stack.test.tsx
index 4a04ccb0718..93b5c419908 100644
--- a/packages/react/src/Stack/__tests__/Stack.test.tsx
+++ b/packages/react/src/Stack/__tests__/Stack.test.tsx
@@ -8,6 +8,11 @@ import classes from '../Stack.module.css'
 describe('Stack', () => {
   implementsClassName(Stack, classes.Stack)
 
+  it('renders data-component attribute', () => {
+    render(<Stack data-testid="stack" />)
+    expect(screen.getByTestId('stack')).toHaveAttribute('data-component', 'Stack')
+  })
+
   it('should support rendering content through `children`', () => {
     render(
       <Stack>
diff --git a/packages/react/src/Stack/__tests__/StackItem.test.tsx b/packages/react/src/Stack/__tests__/StackItem.test.tsx
index 91566b91e1c..371c786d5e0 100644
--- a/packages/react/src/Stack/__tests__/StackItem.test.tsx
+++ b/packages/react/src/Stack/__tests__/StackItem.test.tsx
@@ -8,6 +8,15 @@ import classes from '../Stack.module.css'
 describe('StackItem', () => {
   implementsClassName(StackItem, classes.StackItem)
 
+  it('renders data-component attribute', () => {
+    render(
+      <Stack>
+        <StackItem data-testid="stack-item">Content</StackItem>
+      </Stack>,
+    )
+    expect(screen.getByTestId('stack-item')).toHaveAttribute('data-component', 'StackItem')
+  })
+
   it('should render its children', () => {
     render(
       <Stack>
diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/packages/react/src/StateLabel/StateLabel.tsx
index 57d6b6047fb..bbc2414c263 100644
--- a/packages/react/src/StateLabel/StateLabel.tsx
+++ b/packages/react/src/StateLabel/StateLabel.tsx
@@ -84,6 +84,7 @@ const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
         {...rest}
         ref={ref}
         className={clsx(classes.StateLabel, className)}
+        data-component="StateLabel"
         data-size={inferredSize}
         data-status={status}
       >
diff --git a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx
index 4cf3f76893b..f489918f13c 100644
--- a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx
+++ b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx
@@ -7,6 +7,13 @@ import classes from '../StateLabel.module.css'
 describe('StateLabel', () => {
   implementsClassName(props => <StateLabel {...props} status="issueOpened" />, classes.StateLabel)
 
+  it('renders data-component attribute', () => {
+    expect(HTMLRender(<StateLabel status="issueOpened" />).container.firstChild).toHaveAttribute(
+      'data-component',
+      'StateLabel',
+    )
+  })
+
   it('respects the status prop', () => {
     expect(HTMLRender(<StateLabel status="issueOpened" />).container).toMatchSnapshot()
     expect(HTMLRender(<StateLabel status="issueClosed" />).container).toMatchSnapshot()
@@ -64,11 +71,13 @@ describe('StateLabel', () => {
     expect(screenArchived.getByText('Archived')).toBeInTheDocument() // text
     screenArchived.unmount()
   })
+
   it('renders open status without an icon', () => {
     const screen = HTMLRender(<StateLabel status="open">Open</StateLabel>)
     expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg
     expect(screen.getByText('Open')).toBeInTheDocument() // text
   })
+
   it('renders closed status without an icon', () => {
     const screen = HTMLRender(<StateLabel status="closed">Closed</StateLabel>)
     expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg
diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index a6e81a2fcbb..40050145444 100644
--- a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`StateLabel > prefers the size prop over deprecated variant prop 1`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="small"
     data-status="issueOpened"
   >
@@ -37,6 +38,7 @@ exports[`StateLabel > renders children 1`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueOpened"
   >
@@ -70,6 +72,7 @@ exports[`StateLabel > respects the deprecated variant prop 1`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="small"
     data-status="issueOpened"
   >
@@ -103,6 +106,7 @@ exports[`StateLabel > respects the deprecated variant prop 2`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueOpened"
   >
@@ -135,6 +139,7 @@ exports[`StateLabel > respects the size prop 1`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="small"
     data-status="issueOpened"
   >
@@ -168,6 +173,7 @@ exports[`StateLabel > respects the size prop 2`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueOpened"
   >
@@ -200,6 +206,7 @@ exports[`StateLabel > respects the status prop 1`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueOpened"
   >
@@ -232,6 +239,7 @@ exports[`StateLabel > respects the status prop 2`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueClosed"
   >
@@ -264,6 +272,7 @@ exports[`StateLabel > respects the status prop 3`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="issueClosedNotPlanned"
   >
@@ -293,6 +302,7 @@ exports[`StateLabel > respects the status prop 4`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="pullMerged"
   >
@@ -322,6 +332,7 @@ exports[`StateLabel > respects the status prop 5`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="pullQueued"
   >
@@ -351,6 +362,7 @@ exports[`StateLabel > respects the status prop 6`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="alertOpened"
   >
@@ -380,6 +392,7 @@ exports[`StateLabel > respects the status prop 7`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="alertFixed"
   >
@@ -409,6 +422,7 @@ exports[`StateLabel > respects the status prop 8`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="alertDismissed"
   >
@@ -438,6 +452,7 @@ exports[`StateLabel > respects the status prop 9`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="alertClosed"
   >
@@ -467,6 +482,7 @@ exports[`StateLabel > respects the status prop 10`] = `
 <div>
   <span
     class="prc-StateLabel-StateLabel-eEUJr"
+    data-component="StateLabel"
     data-size="medium"
     data-status="archived"
   >
diff --git a/packages/react/src/SubNav/SubNav.test.tsx b/packages/react/src/SubNav/SubNav.test.tsx
index 76192c7b79b..105e7aa210a 100644
--- a/packages/react/src/SubNav/SubNav.test.tsx
+++ b/packages/react/src/SubNav/SubNav.test.tsx
@@ -8,6 +8,20 @@ describe('SubNav', () => {
   implementsClassName(SubNav, classes.SubNav)
   implementsClassName(SubNav.Links, classes.Links)
 
+  it('renders data-component attributes', () => {
+    const {container} = HTMLRender(
+      <SubNav>
+        <SubNav.Links>
+          <SubNav.Link data-testid="link">Link</SubNav.Link>
+        </SubNav.Links>
+      </SubNav>,
+    )
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'SubNav')
+    expect(container.querySelector('[data-component="SubNav.Links"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SubNav.Link"]')).toBeInTheDocument()
+  })
+
   it('renders a <nav>', () => {
     const {container} = HTMLRender(<SubNav />)
     expect(container.firstChild?.nodeName).toEqual('NAV')
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 54b56942ad6..5e18a782fd9 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -19,7 +19,13 @@ const SubNav = React.forwardRef<HTMLElement, SubNavProps>(function SubNav(
   forwardRef,
 ) {
   return (
-    <nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
+    <nav
+      ref={forwardRef}
+      className={clsx(className, 'SubNav', styles.SubNav)}
+      aria-label={label}
+      {...rest}
+      data-component="SubNav"
+    >
       <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
       {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
     </nav>
@@ -31,7 +37,7 @@ SubNav.displayName = 'SubNav'
 
 const SubNavLinks = React.forwardRef<HTMLDivElement, SubNavLinksProps>(({children, className, ...rest}, forwardRef) => {
   return (
-    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
+    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest} data-component="SubNav.Links">
       {children}
     </div>
   )
@@ -49,6 +55,7 @@ const SubNavLink = React.forwardRef<HTMLAnchorElement, SubNavLinkProps>(
         data-selected={rest.selected}
         aria-current={rest.selected}
         {...rest}
+        data-component="SubNav.Link"
       >
         {children}
       </a>
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 876e130160f..673e61ea5de 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -51,7 +51,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   )
 
   return (
-    <div {...rest} ref={navRef as React.RefObject<HTMLDivElement>}>
+    <div {...rest} ref={navRef as React.RefObject<HTMLDivElement>} data-component="TabNav">
       <nav aria-label={ariaLabel} className={styles.TabNavNav}>
         <div role="tablist" className={styles.TabNavTabList}>
           {children}
@@ -88,6 +88,7 @@ const TabNavLink = React.forwardRef(function TabNavLink(
       aria-selected={selected ? true : undefined}
       className={clsx('TabNav-item', styles.TabNavLink, selected && 'selected', selected && styles.Selected, className)}
       {...rest}
+      data-component="TabNav.Link"
     />
   )
 }) as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
diff --git a/packages/react/src/TabNav/__tests__/TabNav.test.tsx b/packages/react/src/TabNav/__tests__/TabNav.test.tsx
index 63e11b78786..796f7537b94 100644
--- a/packages/react/src/TabNav/__tests__/TabNav.test.tsx
+++ b/packages/react/src/TabNav/__tests__/TabNav.test.tsx
@@ -34,6 +34,17 @@ describe('TabNav', () => {
     })
   })
 
+  it('renders data-component attributes', () => {
+    render(
+      <TabNav>
+        <TabNav.Link href="#">Link Text</TabNav.Link>
+      </TabNav>,
+    )
+
+    expect(screen.getByRole('navigation').parentElement).toHaveAttribute('data-component', 'TabNav')
+    expect(screen.getByRole('tab')).toHaveAttribute('data-component', 'TabNav.Link')
+  })
+
   it('sets aria-label appropriately', () => {
     render(<TabNav aria-label="Test label" />)
     expect(screen.getByLabelText('Test label')).toBeTruthy()
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index baec29ab744..3cb9c68e788 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -12,6 +12,11 @@ describe('Text', () => {
     expect(container.firstChild?.nodeName).toEqual('SPAN')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<Text />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'Text')
+  })
+
   it('renders children', () => {
     const {getByText} = render(<Text>Hello World</Text>)
     expect(getByText('Hello World')).toBeInTheDocument()
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 9f27baf8323..7bc199f10b8 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -22,6 +22,7 @@ function Text<As extends React.ElementType>(props: TextProps<As>, ref: Forwarded
   return (
     <Component
       className={clsx(className, classes.Text)}
+      data-component="Text"
       data-size={size}
       data-weight={weight}
       data-white-space={whiteSpace}
diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx
index 88242ff9c36..ce9af194dd9 100644
--- a/packages/react/src/Textarea/Textarea.test.tsx
+++ b/packages/react/src/Textarea/Textarea.test.tsx
@@ -37,6 +37,11 @@ describe('Textarea', () => {
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
 
+  it('renders data-component attribute', () => {
+    render(<Textarea />)
+    expect(screen.getByRole('textbox')).toHaveAttribute('data-component', 'Textarea')
+  })
+
   it('renders an empty textarea by default', () => {
     render(<Textarea />)
     const textareaElement = screen.getByRole('textbox') as HTMLTextAreaElement
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 8adc4c766fb..69aaee2af63 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -131,6 +131,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           <textarea
             value={value}
             defaultValue={defaultValue}
+            data-component="Textarea"
             data-resize={resize}
             aria-required={required}
             aria-invalid={isValid === 'error' ? 'true' : 'false'}
diff --git a/packages/react/src/ThemeProvider.tsx b/packages/react/src/ThemeProvider.tsx
index 7c3cb8cf2f7..713f13069dc 100644
--- a/packages/react/src/ThemeProvider.tsx
+++ b/packages/react/src/ThemeProvider.tsx
@@ -87,6 +87,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   return (
     <ThemeContext.Provider value={contextValue}>
       <div
+        data-component="ThemeProvider"
         data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light'}
         data-light-theme={dayScheme}
         data-dark-theme={nightScheme}
diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/__tests__/ThemeProvider.test.tsx
index 3735ad52e22..badee66b198 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/__tests__/ThemeProvider.test.tsx
@@ -537,6 +537,7 @@ describe('contextOnly', () => {
     const div = container.querySelector('[data-color-mode]')
     expect(div).toBeInTheDocument()
     expect(div?.tagName).toBe('DIV')
+    expect(div).toHaveAttribute('data-component', 'ThemeProvider')
     expect(div).toHaveAttribute('data-light-theme')
     expect(div).toHaveAttribute('data-dark-theme')
   })
diff --git a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 0bf5c5241e6..e76b3c20d10 100644
--- a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`SubNav.Link > respects the "selected" prop 1`] = `
       <a
         aria-current="true"
         class="prc-SubNav-Link-zaEfe"
+        data-component="SubNav.Link"
         data-selected="true"
       />
     </div>
@@ -20,6 +21,7 @@ exports[`SubNav.Link > respects the "selected" prop 1`] = `
     <a
       aria-current="true"
       class="prc-SubNav-Link-zaEfe"
+      data-component="SubNav.Link"
       data-selected="true"
     />
   </div>,