diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 42d0e6fe47..8c1c491588 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/packages/x-components/src/composables/index.ts
@@ -3,3 +3,4 @@ export * from './use-$x';
 export * from './use-register-x-module';
 export * from './use-on-display';
 export * from './use-store';
+export * from './use-state';
diff --git a/packages/x-components/src/composables/use-state.ts b/packages/x-components/src/composables/use-state.ts
new file mode 100644
index 0000000000..f502b30eb1
--- /dev/null
+++ b/packages/x-components/src/composables/use-state.ts
@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+import { ExtractState, XModuleName } from '../x-modules/x-modules.types';
+import { useStore } from './use-store';
+
+/**
+ * Generates a computed property which returns the selected state.
+ *
+ * @param module - The {@link XModuleName} of the getter.
+ * @param path - The state path.
+ * @returns The state properties of the module.
+ * @public
+ */
+export function useState<Module extends XModuleName, Path extends keyof ExtractState<Module>>(
+  module: Module,
+  path: Path
+): ExtractState<Module>[Path] {
+  const $store = useStore();
+  const state = computed((): ExtractState<Module>[Path] => {
+    return $store.state.x[module][path];
+  });
+  return state.value;
+}