diff --git a/.changeset/public-bags-retire.md b/.changeset/public-bags-retire.md
new file mode 100644
index 00000000000..f6844a30dad
--- /dev/null
+++ b/.changeset/public-bags-retire.md
@@ -0,0 +1,17 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for:
+
+Radio
+RadioGroup
+RelativeTime
+ScrollableRegion
+SegmentedControl
+Select
+SideNav
+SkeletonBox
+SkeletonAvatar
+SkeletonText
+Spinner
diff --git a/packages/react/src/Radio/Radio.test.tsx b/packages/react/src/Radio/Radio.test.tsx
index 43635bbc10a..1a7b9756dcd 100644
--- a/packages/react/src/Radio/Radio.test.tsx
+++ b/packages/react/src/Radio/Radio.test.tsx
@@ -23,6 +23,12 @@ describe('Radio', () => {
     expect(radio).toBeDefined()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(<Radio {...defaultProps} />)
+
+    expect(getByRole('radio')).toHaveAttribute('data-component', 'Radio')
+  })
+
   it('renders an unchecked radio by default', () => {
     const {getByRole} = render(<Radio {...defaultProps} />)
 
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index aef591a7bde..5ea79439a9f 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -80,6 +80,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         onChange={handleOnChange}
         className={clsx(className, sharedClasses.Input, classes.Radio)}
         {...rest}
+        data-component="Radio"
       />
     )
   },
diff --git a/packages/react/src/RadioGroup/RadioGroup.test.tsx b/packages/react/src/RadioGroup/RadioGroup.test.tsx
index 1b6fc91ffb3..a1583e786e1 100644
--- a/packages/react/src/RadioGroup/RadioGroup.test.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.test.tsx
@@ -28,6 +28,25 @@ describe('RadioGroup', () => {
     vi.clearAllMocks()
   })
 
+  it('renders data-component attributes', () => {
+    const {getByRole, getByText} = render(
+      <RadioGroup name="choices">
+        <RadioGroup.Label>Choices</RadioGroup.Label>
+        <RadioGroup.Caption>Pick one</RadioGroup.Caption>
+        <RadioGroup.Validation variant="error">Selection required</RadioGroup.Validation>
+        <FormControl>
+          <Radio value="one" />
+          <FormControl.Label>Choice one</FormControl.Label>
+        </FormControl>
+      </RadioGroup>,
+    )
+
+    expect(getByRole('group')).toHaveAttribute('data-component', 'RadioGroup')
+    expect(getByText('Choices')).toHaveAttribute('data-component', 'RadioGroup.Label')
+    expect(getByText('Pick one')).toHaveAttribute('data-component', 'RadioGroup.Caption')
+    expect(document.querySelector('[data-component="RadioGroup.Validation"]')).toHaveTextContent('Selection required')
+  })
+
   it('renders a disabled group of inputs', () => {
     const {getAllByRole, getByRole} = render(
       <RadioGroup name="choices" disabled>
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index a86c58eb90e..0c107648f3d 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -44,7 +44,7 @@ const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, dis
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup disabled={disabled} data-component="RadioGroup" {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </RadioGroupContext.Provider>
diff --git a/packages/react/src/RelativeTime/RelativeTime.test.tsx b/packages/react/src/RelativeTime/RelativeTime.test.tsx
index 4315a8532a0..ba9f48430f5 100644
--- a/packages/react/src/RelativeTime/RelativeTime.test.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.test.tsx
@@ -10,6 +10,13 @@ describe('RelativeTime', () => {
     expect(container.firstChild?.nodeName.toLowerCase()).toEqual('relative-time')
   })
 
+  it('renders data-component attribute', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    const {container} = render(<RelativeTime date={date} />)
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'RelativeTime')
+  })
+
   it('renders a date inside', () => {
     const date = new Date('2024-03-07T12:22:48.123Z')
     const {container} = render(<RelativeTime date={date} />)
diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx
index 65ca48fd7d0..b42612beef2 100644
--- a/packages/react/src/RelativeTime/RelativeTime.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.tsx
@@ -8,7 +8,7 @@ const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric
 function RelativeTime({date, datetime, children, noTitle, ...props}: RelativeTimeProps) {
   if (datetime) date = new Date(datetime)
   return (
-    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined}>
+    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined} data-component="RelativeTime">
       {children || date?.toLocaleDateString('en', localeOptions) || ''}
     </RelativeTimeComponent>
   )
diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx
index 0107b335721..d2823a5a79f 100644
--- a/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx
+++ b/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx
@@ -30,6 +30,16 @@ describe('ScrollableRegion', () => {
     window.ResizeObserver = originalResizeObserver
   })
 
+  test('renders data-component attribute', () => {
+    render(
+      <ScrollableRegion aria-label="Example label" data-testid="container">
+        Example content
+      </ScrollableRegion>,
+    )
+
+    expect(screen.getByTestId('container')).toHaveAttribute('data-component', 'ScrollableRegion')
+  })
+
   test('does not render with region props by default', () => {
     render(
       <ScrollableRegion aria-label="Example label" data-testid="container">
diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
index b177d76f399..6f464aea9a3 100644
--- a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
+++ b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
@@ -34,7 +34,13 @@ function ScrollableRegion({
     : {}
 
   return (
-    <div {...rest} {...regionProps} ref={ref} className={clsx(classes.ScrollableRegion, className)}>
+    <div
+      {...rest}
+      {...regionProps}
+      ref={ref}
+      className={clsx(classes.ScrollableRegion, className)}
+      data-component="ScrollableRegion"
+    >
       {children}
     </div>
   )
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
index 4c99c940cdc..351d58a0d22 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -34,6 +34,44 @@ const segmentData = [
 describe('SegmentedControl', () => {
   implementsClassName(props => <SegmentedControl aria-label="File view" {...props} />, classes.SegmentedControl)
 
+  it('renders data-component attribute on the root', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        {segmentData.map(({label}) => (
+          <SegmentedControl.Button key={label}>{label}</SegmentedControl.Button>
+        ))}
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('list')).toHaveAttribute('data-component', 'SegmentedControl')
+  })
+
+  it('renders data-component attribute on segmented control buttons', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        <SegmentedControl.Button>Preview</SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('button', {name: 'Preview'}).closest('li')).toHaveAttribute(
+      'data-component',
+      'SegmentedControl.Button',
+    )
+  })
+
+  it('renders data-component attribute on segmented control icon buttons', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        <SegmentedControl.IconButton icon={() => <EyeIcon />} aria-label="Preview" />
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('button', {name: 'Preview'}).closest('li')).toHaveAttribute(
+      'data-component',
+      'SegmentedControl.IconButton',
+    )
+  })
+
   it('renders with a selected segment - controlled', () => {
     const {getByText} = render(
       <SegmentedControl aria-label="File view">
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index fa2c7e0614f..707530b01f8 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -168,6 +168,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
       {...getResponsiveAttributes('variant', variant)}
       data-size={size}
       {...rest}
+      data-component="SegmentedControl"
     >
       {React.Children.map(children, (child, index) => {
         // Not a valid child element - skip rendering child
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 075bc8f3e6e..287099e1d1f 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -44,7 +44,11 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
   const LeadingVisual = leadingVisual ?? leadingIcon
 
   return (
-    <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
+    <li
+      className={clsx(classes.Item)}
+      data-selected={selected ? '' : undefined}
+      data-component="SegmentedControl.Button"
+    >
       <button
         aria-current={selected}
         aria-disabled={disabled || ariaDisabled || undefined}
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index d719a2b439f..03cdb0bbe39 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -38,7 +38,11 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
   const {'aria-disabled': ariaDisabled, ...rest} = props
 
   return (
-    <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
+    <li
+      className={clsx(classes.Item, className)}
+      data-selected={selected || undefined}
+      data-component="SegmentedControl.IconButton"
+    >
       <Tooltip
         type={description ? undefined : 'label'}
         text={description ? description : ariaLabel}
diff --git a/packages/react/src/Select/Select.test.tsx b/packages/react/src/Select/Select.test.tsx
index 8f5eaf813c5..d6593555e13 100644
--- a/packages/react/src/Select/Select.test.tsx
+++ b/packages/react/src/Select/Select.test.tsx
@@ -10,6 +10,38 @@ describe('Select', () => {
   implementsClassName(Select.Option)
   implementsClassName(Select.OptGroup)
 
+  it('renders data-component attributes', () => {
+    const {getByLabelText, getByText} = render(
+      <>
+        <label htmlFor="grouped">Choice</label>
+        <Select id="grouped">
+          <Select.OptGroup label="Group one">
+            <Select.Option value="one">Choice one</Select.Option>
+          </Select.OptGroup>
+        </Select>
+      </>,
+    )
+
+    const select = getByLabelText('Choice')
+
+    expect(select).toHaveAttribute('data-component', 'Select')
+    expect(select.querySelector('optgroup')).toHaveAttribute('data-component', 'Select.OptGroup')
+    expect(getByText('Choice one')).toHaveAttribute('data-component', 'Select.Option')
+  })
+
+  it('renders data-component on placeholder option', () => {
+    const {getByText} = render(
+      <>
+        <label htmlFor="placeholder">Choice</label>
+        <Select id="placeholder" placeholder="Pick a choice">
+          <Select.Option value="one">Choice one</Select.Option>
+        </Select>
+      </>,
+    )
+
+    expect(getByText('Pick a choice')).toHaveAttribute('data-component', 'Select.Option')
+  })
+
   it('renders a select input', () => {
     const {getByLabelText} = render(
       <>
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index b85b33e7a0f..d798c18178b 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -65,9 +65,10 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           className={clsx(classes.Select, disabled && classes.Disabled)}
           data-hasplaceholder={Boolean(placeholder)}
           defaultValue={defaultValue ?? placeholder ?? undefined}
+          data-component="Select"
         >
           {placeholder && (
-            <option value="" disabled={required} hidden={required}>
+            <option value="" disabled={required} hidden={required} data-component="Select.Option">
               {placeholder}
             </option>
           )}
@@ -80,11 +81,11 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 ) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
-  <option {...props} />
+  <option {...props} data-component="Select.Option" />
 )
 
 const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => (
-  <optgroup {...props} />
+  <optgroup {...props} data-component="Select.OptGroup" />
 )
 
 export default Object.assign(Select, {
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 0e80ceb2855..54d67609262 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -36,7 +36,7 @@ function SideNav({
   )
 
   return (
-    <Component className={newClassName} aria-label={ariaLabel}>
+    <Component className={newClassName} aria-label={ariaLabel} data-component="SideNav">
       {children}
     </Component>
   )
@@ -55,7 +55,12 @@ const SideNavLink = ({selected, to, variant, className, children, ...rest}: Styl
   // according to their docs, NavLink supports aria-current:
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
   return (
-    <Link aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName} {...rest}>
+    <Link
+      aria-current={isReactRouter || selected ? 'page' : undefined}
+      className={newClassName}
+      {...rest}
+      data-component="SideNav.Link"
+    >
       {children}
     </Link>
   )
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index f6724924843..0cef22ac703 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -12,10 +12,11 @@ export type SkeletonBoxProps = {
   className?: string
   /** Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.*/
   delay?: 'short' | 'long' | number
+  'data-component'?: string
 } & HTMLProps<HTMLElement>
 
 export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(function SkeletonBox(
-  {height, width, className, style, delay, ...props},
+  {height, width, className, style, delay, 'data-component': dataComponent = 'SkeletonBox', ...props},
   ref,
 ) {
   const [isVisible, setIsVisible] = useState(!delay)
@@ -43,6 +44,7 @@ export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(funct
       className={clsx(className, classes.SkeletonBox)}
       style={{height, width, ...(style || {})}}
       {...props}
+      data-component={dataComponent}
     />
   )
 })
diff --git a/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx b/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx
index a60cba6c2fa..b70bc72576f 100644
--- a/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx
+++ b/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx
@@ -7,6 +7,10 @@ import {act} from 'react'
 
 describe('SkeletonBox', () => {
   implementsClassName(SkeletonBox, classes.SkeletonBox)
+  it('renders data-component attribute', () => {
+    const {container} = render(<SkeletonBox />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonBox')
+  })
 
   it('uses the default size when size is not provided', () => {
     const {container} = render(<SkeletonBox width={200} height={100} />)
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx
index b250976e2da..5a710a119e3 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx
@@ -8,6 +8,11 @@ import classes from './SkeletonAvatar.module.css'
 describe('SkeletonAvatar', () => {
   implementsClassName(SkeletonAvatar, classes.SkeletonAvatar)
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<SkeletonAvatar />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonAvatar')
+  })
+
   it('applies the given size', () => {
     const {container} = render(<SkeletonAvatar size={48} />)
     expect(container.firstChild).toHaveStyle('--avatarSize-regular: 48px;')
diff --git a/packages/react/src/SkeletonText/SkeletonText.test.tsx b/packages/react/src/SkeletonText/SkeletonText.test.tsx
index afa2a0823d1..cb770d0c0ba 100644
--- a/packages/react/src/SkeletonText/SkeletonText.test.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.test.tsx
@@ -28,4 +28,26 @@ describe('SkeletonText', () => {
     const {container} = render(<SkeletonText maxWidth="200px" />)
     expect(container.firstChild).toHaveStyle({maxWidth: '200px'})
   })
+
+  it('renders data-component="SkeletonText" for a single line', () => {
+    const {container} = render(<SkeletonText />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonText')
+  })
+
+  // update below to data-component="SkeletonText" in next major
+  it('renders data-component="multilineContainer" for the multiline wrapper', () => {
+    const {container} = render(<SkeletonText lines={3} />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'multilineContainer')
+  })
+
+  it('renders multiline children as SkeletonBox instances', () => {
+    const {container} = render(<SkeletonText lines={3} />)
+    const children = Array.from(container.firstChild?.childNodes ?? [])
+
+    expect(children).toHaveLength(3)
+
+    for (const child of children) {
+      expect(child).toHaveAttribute('data-component', 'SkeletonText')
+    }
+  })
 })
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index 37ebb21b013..2a21a0b064c 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -19,7 +19,6 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
   if (lines < 2) {
     return (
       <SkeletonBox
-        data-component="SkeletonText"
         data-text-skeleton-size={size}
         width="100%"
         className={clsx(className, classes.SkeletonText)}
@@ -28,12 +27,14 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
           maxWidth,
         }}
         {...rest}
+        data-component="SkeletonText"
       />
     )
   }
 
   return (
     <div
+      // update below to data-component="SkeletonText" in next major
       data-component="multilineContainer"
       className={classes.SkeletonTextWrapper}
       style={{
diff --git a/packages/react/src/Spinner/Spinner.test.tsx b/packages/react/src/Spinner/Spinner.test.tsx
index aadf8b0239b..6688a3f9d3c 100644
--- a/packages/react/src/Spinner/Spinner.test.tsx
+++ b/packages/react/src/Spinner/Spinner.test.tsx
@@ -15,6 +15,11 @@ describe('Spinner', () => {
     expect(getByLabelText('Loading')).toBeInTheDocument()
   })
 
+  it('renders data-component attribute on the outermost element', () => {
+    const {container} = render(<Spinner />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'Spinner')
+  })
+
   it('should label the spinner with with custom loading text', async () => {
     const {getByLabelText} = render(<Spinner srText="Custom loading text" />)
 
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index d4166fb665a..1b3b62c8479 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -67,7 +67,7 @@ function Spinner({
 
   return (
     /* inline-flex removes the extra line height */
-    <span className={classes.Box}>
+    <span className={classes.Box} data-component="Spinner">
       <svg
         height={size}
         width={size}
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index a4ad1a8a537..e281566982b 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -9924,6 +9924,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -9972,6 +9973,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -10403,6 +10405,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -10843,6 +10846,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -10912,6 +10916,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -11343,6 +11348,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -11412,6 +11418,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -11843,6 +11850,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -11912,6 +11920,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -12343,6 +12352,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -12804,6 +12814,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -12852,6 +12863,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           >
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -13304,6 +13316,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -13765,6 +13778,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -13834,6 +13848,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -14286,6 +14301,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -14355,6 +14371,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -14807,6 +14824,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -14876,6 +14894,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -15328,6 +15347,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
             </div>
             <span
               class="prc-Spinner-Box-yUhAo"
+              data-component="Spinner"
             >
               <svg
                 aria-hidden="true"
@@ -15771,6 +15791,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -15819,6 +15840,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -16250,6 +16272,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -16690,6 +16713,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -16759,6 +16783,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -17190,6 +17215,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -17259,6 +17285,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -17690,6 +17717,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -17759,6 +17787,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -18190,6 +18219,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -18651,6 +18681,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -18699,6 +18730,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
         >
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -19151,6 +19183,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -19612,6 +19645,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -19681,6 +19715,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -20133,6 +20168,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -20202,6 +20238,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -20654,6 +20691,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -20723,6 +20761,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
@@ -21175,6 +21214,7 @@ exports[`TextInputWithTokens > renders with a loading indicator 1`] = `
           </div>
           <span
             class="prc-Spinner-Box-yUhAo"
+            data-component="Spinner"
           >
             <svg
               aria-hidden="true"
diff --git a/packages/react/src/__tests__/SideNav.test.tsx b/packages/react/src/__tests__/SideNav.test.tsx
index 979d3331ead..4803a5a16f1 100644
--- a/packages/react/src/__tests__/SideNav.test.tsx
+++ b/packages/react/src/__tests__/SideNav.test.tsx
@@ -12,6 +12,17 @@ describe('SideNav', () => {
     expect(render(<SideNav.Link />).container.firstChild).toHaveProperty('tagName', 'A')
   })
 
+  it('renders data-component attributes', () => {
+    const {getByRole} = render(
+      <SideNav aria-label="Label">
+        <SideNav.Link href="#one">One</SideNav.Link>
+      </SideNav>,
+    )
+
+    expect(getByRole('navigation')).toHaveAttribute('data-component', 'SideNav')
+    expect(getByRole('link', {name: 'One'})).toHaveAttribute('data-component', 'SideNav.Link')
+  })
+
   it('sets aria-label appropriately', () => {
     render(<SideNav aria-label="Label" />)
     expect(screen.getByRole('navigation')).toHaveAttribute('aria-label', 'Label')