diff --git a/lib/BaseComponent.ts b/lib/BaseComponent.ts
index 5432cf8a0..1cafb433a 100644
--- a/lib/BaseComponent.ts
+++ b/lib/BaseComponent.ts
@@ -5,6 +5,7 @@ export class BaseComponent implements Component {
 	public templates: Template[];
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 	private basePath: string = __dirname;
 
 	/**
diff --git a/lib/BaseProjectLibrary.ts b/lib/BaseProjectLibrary.ts
index 1096b1555..ff269e05c 100644
--- a/lib/BaseProjectLibrary.ts
+++ b/lib/BaseProjectLibrary.ts
@@ -99,6 +99,7 @@ export class BaseProjectLibrary implements ProjectLibrary {
 
 				const component: Component = {
 					group: template.controlGroup,
+					groupPriority: 0,
 					name: newComponent,
 					templates: []
 				};
@@ -145,7 +146,9 @@ export class BaseProjectLibrary implements ProjectLibrary {
 	}
 
 	public getComponentNamesByGroup(group: string): string[] {
-		return this.components.filter(x => x.group === group).map(x => x.name);
+		return this.components.filter(x => x.group === group)
+			.sort((a, b) => b.groupPriority - a.groupPriority)
+			.map(x => x.name);
 	}
 
 	/**
diff --git a/lib/MultiTemplateComponent.ts b/lib/MultiTemplateComponent.ts
index 5d03f5fa3..9123f90d0 100644
--- a/lib/MultiTemplateComponent.ts
+++ b/lib/MultiTemplateComponent.ts
@@ -1,6 +1,7 @@
 export abstract class MultiTemplateComponent<T extends Template> implements Component {
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 
 	get templates(): T[] {
 		// TODO: prop-full
diff --git a/lib/types/Component.d.ts b/lib/types/Component.d.ts
index 012e10c17..203bf63d8 100644
--- a/lib/types/Component.d.ts
+++ b/lib/types/Component.d.ts
@@ -2,10 +2,15 @@
  * A set of Templates for a common component
  */
 interface Component {
-	/** Name of the parent group, e.g. Data Visualization */
-	group: string;
 	/** Component name, e.g. Pie Chart or Grid  */
 	name: string;
+	/** Name of the parent group, e.g. Data Visualization */
+	group: string;
+	/**
+	 * Controls the position of the component within the group.
+	 * Step by step mode lists components with higher values first.
+	 */
+	groupPriority: number;
 
 	templates: Template[];
 }
diff --git a/spec/unit/BaseProjectLibrary-spec.ts b/spec/unit/BaseProjectLibrary-spec.ts
index 1097a27b5..2a97d4bc6 100644
--- a/spec/unit/BaseProjectLibrary-spec.ts
+++ b/spec/unit/BaseProjectLibrary-spec.ts
@@ -273,6 +273,24 @@ describe("Unit - Base project library ", () => {
 		done();
 	});
 
+	it("should sort component in a group based on priority", async done => {
+		spyOnProperty(BaseProjectLibrary.prototype, "components").and.returnValue([
+			{ name: "Component1", group: "commonGroup", groupPriority: 1 },
+			{ name: "Component2", group: "commonGroup", groupPriority: 20 },
+			{ name: "Component3", group: "commonGroup", groupPriority: 13 },
+			{ name: "Component4", group: "commonGroup", groupPriority: 4 },
+			{ name: "Component5", group: "commonGroup", groupPriority: -4 },
+			{ name: "Component6", group: "commonGroup", groupPriority: 0 },
+			{ name: "Component7", group: "commonGroup", groupPriority: 0 }
+		] as Component[]);
+
+		const library = new BaseProjectLibrary(__dirname);
+		expect(library.getComponentNamesByGroup("commonGroup")).toEqual(
+			["Component2", "Component3", "Component4", "Component1", "Component6", "Component7", "Component5"]
+		);
+		done();
+	});
+
 	it("gets correct project", async done => {
 		spyOn(Util, "getDirectoryNames").and.returnValues(["chart", "combo", "grid"]);
 
diff --git a/templates/angular/igx-ts/grid/index.ts b/templates/angular/igx-ts/grid/index.ts
index 526a6f227..c3156911e 100644
--- a/templates/angular/igx-ts/grid/index.ts
+++ b/templates/angular/igx-ts/grid/index.ts
@@ -9,6 +9,7 @@ class IgxGridComponent extends BaseComponent {
 		super(__dirname);
 		this.name  = "Grid";
 		this.group = "Grids & Lists";
+		this.groupPriority = 10;
 	}
 }
 module.exports = new IgxGridComponent();