diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -0,0 +1,48 @@
+// @flow
+
+import * as React from 'react';
+
+import type { AccountUserInfo } from 'lib/types/user-types';
+
+import SearchModal from '../../modals/search-modal.react';
+import { UserList, type UserRowProps } from './user-list.react';
+
+type Props = {
+  +onClose: () => void,
+  +name: string,
+  +userRowComponent: React.ComponentType<UserRowProps>,
+  +filterUser: (userInfo: AccountUserInfo) => boolean,
+  +usersCompareFunction: (
+    user1: AccountUserInfo,
+    user2: AccountUserInfo,
+  ) => number,
+};
+
+function UserListModal(props: Props): React.Node {
+  const {
+    onClose,
+    name,
+    userRowComponent,
+    filterUser,
+    usersCompareFunction,
+  } = props;
+  return (
+    <SearchModal
+      name={name}
+      size="large"
+      searchPlaceholder="Search by name"
+      onClose={onClose}
+    >
+      {(searchText: string) => (
+        <UserList
+          userRowComponent={userRowComponent}
+          filterUser={filterUser}
+          usersCompareFunction={usersCompareFunction}
+          searchText={searchText}
+        />
+      )}
+    </SearchModal>
+  );
+}
+
+export default UserListModal;