diff --git a/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts b/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts
new file mode 100644
index 0000000000..b755799eb3
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts
@@ -0,0 +1,23 @@
+// #docregion
+import {Component, Directive, Input, QueryList} from 'angular2/core';
+
+@Directive({
+  selector: '[bsPane]'
+})
+export class BsPane {
+  @Input() title: string;
+}
+
+@Component({
+  selector: 'tabs',
+  template: `
+    <ul class="nav nav-tabs">
+      <li *ngFor="var pane of panes"
+          role="presentation" [class.active]="pane.active">
+        <a href="javascript: false">{{pane.title}}</a>
+      </li>
+    </ul>`
+})
+export class BsTabs {
+  //@ContentChildren(BsPane) panes: QueryList<Pane>;
+}
diff --git a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts
new file mode 100644
index 0000000000..f1149c6b90
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts
@@ -0,0 +1,17 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {BsTabs, BsPane} from './bs_tabs';
+
+@Component({
+  selector: 'di-demo',
+  template: `
+    Demo:
+    <bs-tabs>
+      <div *bsPane="title: 'Summary'">
+        summary text ...
+      </div>
+    </bs-tabs>`,
+    directives: [BsTabs, BsPane]
+})
+export class DiDemo {
+}
diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/src/index.html
new file mode 100644
index 0000000000..9875293b30
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/index.html
@@ -0,0 +1,38 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Angular 2 QuickStart</title>
+
+    <!-- 1. Load libraries -->
+    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
+    <script src="https://code.angularjs.org/tools/typescript.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-alpha.52/angular2.dev.js"></script>
+
+    <!-- 2. Configure SystemJS -->
+    <script>
+      System.config({
+        transpiler: 'typescript',
+        typescriptOptions: { emitDecoratorMetadata: true },
+        packages: {'src': {defaultExtension: 'ts'}}
+      });
+    </script>
+
+    <!-- 3. Bootstrap -->
+    <script>
+      System.import('angular2/platform/browser').then(function(ng){
+        System.import('src/di_demo').then(function(src) {
+          ng.bootstrap(src.DiDemo);
+        });
+      });
+    </script>
+
+  </head>
+
+  <!-- 4. Display the application -->
+  <body>
+    <di-demo>Loading...</di-demo>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/public/index.jade b/public/index.jade
index d962cb5aa2..45f7a08f69 100644
--- a/public/index.jade
+++ b/public/index.jade
@@ -31,3 +31,12 @@ div
       |   Try in Plunker
   +makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html')
 br
+div
+  h3.text-headline Advanced Component Communication
+  p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost.
+  p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows tobs component to work with <code>ngFor</code> without any special knowledge of it.
+  p(style='text-align:right')
+    md-button.md-primary(href='http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=preview' target='_blank')
+      span.icon-open-in-new
+      |   Try in Plunker
+  +makeTabs('../docs/_fragments/homepage-tabs/ts/src/bs_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'bs_tabs.ts,di_demo.ts,index.html')
