diff --git a/src/widgets/CMakeLists.txt b/src/widgets/CMakeLists.txt
index 29e760a3..e5f213eb 100644
--- a/src/widgets/CMakeLists.txt
+++ b/src/widgets/CMakeLists.txt
@@ -11,6 +11,7 @@ qt_add_qml_module(quickshell-widgets
 		IconImage.qml
 		ClippingRectangle.qml
 		WrapperItem.qml
+		WrapperMouseArea.qml
 		WrapperRectangle.qml
 		ClippingWrapperRectangle.qml
 )
diff --git a/src/widgets/WrapperMouseArea.qml b/src/widgets/WrapperMouseArea.qml
new file mode 100644
index 00000000..6d14a737
--- /dev/null
+++ b/src/widgets/WrapperMouseArea.qml
@@ -0,0 +1,50 @@
+import QtQuick
+
+///! MouseArea wrapper item.
+/// This component is useful for wrapping a single component in
+/// a mouse area. It works the same as @@WrapperItem, but with a @@QtQuick.MouseArea.
+///
+/// > [!NOTE] WrapperMouseArea is a @@MarginWrapperManager based component.
+/// > See its documentation for information on how margins and sizes are calculated.
+///
+/// > [!NOTE] The child item can be specified by writing it inline in the wrapper,
+/// > as in the example above, or by using the @@child property. See
+/// > @@WrapperManager.child for details.
+///
+/// > [!WARNING] You should not set @@Item.x, @@Item.y, @@Item.width,
+/// > @@Item.height or @@Item.anchors on the child item, as they are used
+/// > by WrapperItem to position it. Instead set @@Item.implicitWidth and
+/// > @@Item.implicitHeight.
+///
+/// [QtQuick.Layouts]: https://doc.qt.io/qt-6/qtquicklayouts-index.html
+MouseArea {
+	/// The default for @@topMargin, @@bottomMargin, @@leftMargin and @@rightMargin.
+	/// Defaults to 0.
+	property /*real*/alias margin: manager.margin
+	/// An extra margin applied in addition to @@topMargin, @@bottomMargin,
+	/// @@leftMargin, and @@rightMargin. Defaults to 0.
+	property /*real*/alias extraMargin: manager.extraMargin
+	/// The requested top margin of the content item, not counting @@extraMargin.
+	///
+	/// Defaults to @@margin, and may be reset by assigning `undefined`.
+	property /*real*/alias topMargin: manager.topMargin
+	/// The requested bottom margin of the content item, not counting @@extraMargin.
+	///
+	/// Defaults to @@margin, and may be reset by assigning `undefined`.
+	property /*real*/alias bottomMargin: manager.bottomMargin
+	/// The requested left margin of the content item, not counting @@extraMargin.
+	///
+	/// Defaults to @@margin, and may be reset by assigning `undefined`.
+	property /*real*/alias leftMargin: manager.leftMargin
+	/// The requested right margin of the content item, not counting @@extraMargin.
+	///
+	/// Defaults to @@margin, and may be reset by assigning `undefined`.
+	property /*real*/alias rightMargin: manager.rightMargin
+	/// Determines if child item should be resized larger than its implicit size if
+	/// the parent is resized larger than its implicit size. Defaults to false.
+	property /*bool*/alias resizeChild: manager.resizeChild
+	/// See @@WrapperManager.child for details.
+	property /*Item*/alias child: manager.child
+
+	MarginWrapperManager { id: manager }
+}
diff --git a/src/widgets/module.md b/src/widgets/module.md
index 4009b790..923dc536 100644
--- a/src/widgets/module.md
+++ b/src/widgets/module.md
@@ -10,6 +10,7 @@ qml_files = [
 	"IconImage.qml",
 	"ClippingRectangle.qml",
 	"WrapperItem.qml",
+	"WrapperMouseArea.qml",
 	"WrapperRectangle.qml",
 	"ClippingWrapperRectangle.qml",
 ]