diff --git a/src/components-examples/BUILD.bazel b/src/components-examples/BUILD.bazel
index 92897e666de2..46483466bb91 100644
--- a/src/components-examples/BUILD.bazel
+++ b/src/components-examples/BUILD.bazel
@@ -56,6 +56,7 @@ ALL_EXAMPLES = [
     "//src/components-examples/cdk/drag-drop",
     "//src/components-examples/cdk/clipboard",
     "//src/components-examples/cdk/a11y",
+    "//src/components-examples/cdk/overlay",
     "//src/components-examples/cdk-experimental/popover-edit",
 ]
 
diff --git a/src/components-examples/cdk/overlay/BUILD.bazel b/src/components-examples/cdk/overlay/BUILD.bazel
new file mode 100644
index 000000000000..92eea8fd6f10
--- /dev/null
+++ b/src/components-examples/cdk/overlay/BUILD.bazel
@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "overlay",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/components-examples/cdk/overlay",
+    deps = [
+        "//src/cdk/overlay",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css
new file mode 100644
index 000000000000..8288eba90519
--- /dev/null
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css
@@ -0,0 +1,19 @@
+.example-list {
+  width: 100px;
+  border: solid 1px #ccc;
+  border-radius: 5px;
+  background: #fff;
+  text-align: center;
+  padding: 10px;
+  margin: 0;
+}
+
+.example-list > li {
+  list-style-type: none;
+  border-bottom: solid 1px #8b8b8b;
+  padding: 8px 0;
+}
+
+.example-list > li:last-child {
+  border-bottom: none;
+}
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html
new file mode 100644
index 000000000000..5ece34c61897
--- /dev/null
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html
@@ -0,0 +1,17 @@
+<!-- This button triggers the overlay and is it's origin -->
+<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+  {{isOpen ? "Close" : "Open"}}
+</button>
+
+<!-- This template displays the overlay content and is connected to the button -->
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="trigger"
+  [cdkConnectedOverlayOpen]="isOpen"
+>
+  <ul class="example-list">
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</ng-template>
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
new file mode 100644
index 000000000000..09575982dbbf
--- /dev/null
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Overlay basic example
+ */
+@Component({
+  selector: 'cdk-overlay-basic-example',
+  templateUrl: './cdk-overlay-basic-example.html',
+  styleUrls: ['./cdk-overlay-basic-example.css'],
+})
+export class CdkOverlayBasicExample {
+  isOpen = false;
+}
diff --git a/src/components-examples/cdk/overlay/index.ts b/src/components-examples/cdk/overlay/index.ts
new file mode 100644
index 000000000000..733535710b2f
--- /dev/null
+++ b/src/components-examples/cdk/overlay/index.ts
@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+import {CdkOverlayBasicExample} from './cdk-overlay-basic/cdk-overlay-basic-example';
+
+export {CdkOverlayBasicExample};
+
+const EXAMPLES = [CdkOverlayBasicExample];
+
+@NgModule({
+  imports: [OverlayModule],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+  entryComponents: EXAMPLES,
+})
+export class CdkOverlayExamplesModule {}
diff --git a/src/dev-app/connected-overlay/BUILD.bazel b/src/dev-app/connected-overlay/BUILD.bazel
index 63257bb042f4..d0cc04e0306e 100644
--- a/src/dev-app/connected-overlay/BUILD.bazel
+++ b/src/dev-app/connected-overlay/BUILD.bazel
@@ -13,6 +13,7 @@ ng_module(
         "//src/cdk/bidi",
         "//src/cdk/overlay",
         "//src/cdk/portal",
+        "//src/components-examples/cdk/overlay",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/radio",
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
index 7a1e26f2d4a3..086621dc49b4 100644
--- a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
+++ b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
@@ -14,10 +14,13 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {RouterModule} from '@angular/router';
+import {CdkOverlayExamplesModule} from '@angular/components-examples/cdk/overlay';
+
 import {ConnectedOverlayDemo} from './connected-overlay-demo';
 
 @NgModule({
   imports: [
+    CdkOverlayExamplesModule,
     CommonModule,
     FormsModule,
     MatButtonModule,
@@ -28,5 +31,4 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo';
   ],
   declarations: [ConnectedOverlayDemo],
 })
-export class ConnectedOverlayDemoModule {
-}
+export class ConnectedOverlayDemoModule {}
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.html b/src/dev-app/connected-overlay/connected-overlay-demo.html
index 20985f7aeaeb..c0d6bee6f8f6 100644
--- a/src/dev-app/connected-overlay/connected-overlay-demo.html
+++ b/src/dev-app/connected-overlay/connected-overlay-demo.html
@@ -1,5 +1,10 @@
+<h3>Basic overlay</h3>
+<cdk-overlay-basic-example></cdk-overlay-basic-example>
+
 <div style="height: 500px"></div>
 
+<h3>Debug Overlay</h3>
+
 <div class="demo-options-connected-overlay mat-typography">
   <div>
     <h2>Origin X</h2>