diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx
index 4273ee86f9..06d7d1d434 100644
--- a/packages/ui/src/components/Box/Box.tsx
+++ b/packages/ui/src/components/Box/Box.tsx
@@ -40,11 +40,12 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Box');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement(props.as || 'div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children,
   });
diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index 7be4e5fdce..eef1e187c4 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/packages/ui/src/components/Container/Container.tsx
@@ -43,11 +43,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
       ...displayPropDefs,
       ...containerSpacingProps,
     };
-    const { className, style } = extractProps(props, propDefs);
+    const { className, style, dataProps } = extractProps(props, propDefs);
 
     return createElement('div', {
       ref,
       className: clsx(classNames.root, className),
+      ...dataProps,
       style,
       children,
     });
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index ded4fffffa..021fe87820 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/packages/ui/src/components/Flex/Flex.tsx
@@ -32,11 +32,12 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Flex');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children: props.children,
   });
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 27257c8972..18ed40b87b 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -32,11 +32,12 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
 
   const { classNames } = useStyles('Grid');
 
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children: props.children,
   });
@@ -48,11 +49,12 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Grid');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.item, className),
+    ...dataProps,
     style,
     children: props.children,
   });