+ )
+ }
+)
+
+export default CartItemActions
diff --git a/packages/ui/src/molecules/CartItem/CartItemContent.tsx b/packages/ui/src/molecules/CartItem/CartItemContent.tsx
new file mode 100644
index 0000000000..cbb4ad5141
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/CartItemContent.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemContentProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+ */
+ testId?: string
+}
+
+const CartItemContent = forwardRef(
+ function CartItemContent(
+ { testId = 'store-cart-item-content', children, ...otherProps },
+ ref
+ ) {
+ return (
+
+ {children}
+
+ )
+ }
+)
+
+export default CartItemContent
diff --git a/packages/ui/src/molecules/CartItem/CartItemImage.tsx b/packages/ui/src/molecules/CartItem/CartItemImage.tsx
new file mode 100644
index 0000000000..ea94062457
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/CartItemImage.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemImageProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+ */
+ testId?: string
+}
+
+const CartItemImage = forwardRef(function CartItemImage(
+ { testId = 'store-cart-item-image', children, ...otherProps },
+ ref
+) {
+ return (
+
+ {children}
+
+ )
+})
+
+export default CartItemImage
diff --git a/packages/ui/src/molecules/CartItem/CartItemPrices.tsx b/packages/ui/src/molecules/CartItem/CartItemPrices.tsx
new file mode 100644
index 0000000000..a2e9271298
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/CartItemPrices.tsx
@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemPricesProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+ */
+ testId?: string
+}
+
+const CartItemPrices = forwardRef(
+ function CartItemPrices(
+ { testId = 'store-cart-item-prices', children, ...otherProps },
+ ref
+ ) {
+ return (
+
+ {children}
+
+ )
+ }
+)
+
+export default CartItemPrices
diff --git a/packages/ui/src/molecules/CartItem/CartItemSummary.tsx b/packages/ui/src/molecules/CartItem/CartItemSummary.tsx
new file mode 100644
index 0000000000..6da5b01f28
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/CartItemSummary.tsx
@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemSummaryProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+ */
+ testId?: string
+}
+
+const CartItemSummary = forwardRef(
+ function CartItemSummary(
+ { testId = 'store-cart-item-summary', children, ...otherProps },
+ ref
+ ) {
+ return (
+
+ {children}
+
+ )
+ }
+)
+
+export default CartItemSummary
diff --git a/packages/ui/src/molecules/CartItem/CartItemTitle.tsx b/packages/ui/src/molecules/CartItem/CartItemTitle.tsx
new file mode 100644
index 0000000000..2e7a65e870
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/CartItemTitle.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemTitleProps extends HTMLAttributes {
+ /**
+ * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+ */
+ testId?: string
+}
+
+const CartItemTitle = forwardRef(function CartItemTitle(
+ { testId = 'store-cart-item-title', children, ...otherProps },
+ ref
+) {
+ return (
+
+ {children}
+
+ )
+})
+
+export default CartItemTitle
diff --git a/packages/ui/src/molecules/CartItem/index.tsx b/packages/ui/src/molecules/CartItem/index.tsx
new file mode 100644
index 0000000000..8bfcf4d10b
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/index.tsx
@@ -0,0 +1,20 @@
+export { default } from './CartItem'
+export type { CartItemProps } from './CartItem'
+
+export { default as CartItemActions } from './CartItemActions'
+export type { CartItemActionsProps } from './CartItemActions'
+
+export { default as CartItemContent } from './CartItemContent'
+export type { CartItemContentProps } from './CartItemContent'
+
+export { default as CartItemImage } from './CartItemImage'
+export type { CartItemImageProps } from './CartItemImage'
+
+export { default as CartItemPrices } from './CartItemPrices'
+export type { CartItemPricesProps } from './CartItemPrices'
+
+export { default as CartItemSummary } from './CartItemSummary'
+export type { CartItemSummaryProps } from './CartItemSummary'
+
+export { default as CartItemTitle } from './CartItemTitle'
+export type { CartItemTitleProps } from './CartItemTitle'
diff --git a/packages/ui/src/molecules/CartItem/stories/CartItem.mdx b/packages/ui/src/molecules/CartItem/stories/CartItem.mdx
new file mode 100644
index 0000000000..ea383f657f
--- /dev/null
+++ b/packages/ui/src/molecules/CartItem/stories/CartItem.mdx
@@ -0,0 +1,79 @@
+import { ArgsTable, Canvas, Props, Story } from '@storybook/addon-docs'
+
+import CartItem, {
+ CartItemActions,
+ CartItemContent,
+ CartItemImage,
+ CartItemPrices,
+ CartItemSummary,
+ CartItemTitle,
+} from '../'
+
+# Cart Item
+
+
+
+## Components
+
+The `CartItem` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `CartItem`: the wrapper component;
+- `CartItemContent`: the wrapper component for the image and summary;
+- `CartItemImage`: the wrapper component for the content's image;
+- `CartItemSummary`: the wrapper component for the title and prices;
+- `CartItemTitle`: the wrapper component for the title;
+- `CartItemPrices`: the wrapper component for the prices;
+- `CartItemActions`: the wrapper component for the remove from cart button and quantity selector;
+
+## Props
+
+All CartItem-related components support all attributes also supported by the `