diff --git a/public/docs/dart/latest/guide/making-components.jade b/public/docs/dart/latest/guide/making-components.jade
new file mode 100644
index 0000000000..30d2235763
--- /dev/null
+++ b/public/docs/dart/latest/guide/making-components.jade
@@ -0,0 +1,50 @@
+.l-main-section
+  p.
+    As mentioned earlier, you build Angular applications as a tree of nested components.  You've seen how to create
+    a top-level component.  You add child components to a parent component by using them in the parent component's
+    template.
+  p.
+    Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
+    component that uses a <code>&lt;child&gt;</code> component like so:
+
+  pre.prettyprint.linenums.lang-dart
+    code.
+      part of making_components;
+
+      @Component(
+        selector: 'parent'
+      )
+      @View(
+        template: '''
+          &lt;h1&gt;{{ message }}&lt;/h1&gt;
+          &lt;child&gt;&lt;/child&gt;
+      ''',
+        directives: const[ChildComponent]
+      )
+      class ParentComponent {
+        String message = "I'm the parent";
+      }
+
+  p You then just need to write the <code>ChildComponent</code> class to make it work:
+
+  pre.prettyprint.linenums.lang-dart
+    code.
+      part of making_components;
+
+      @Component(
+          selector: 'child'
+      )
+      @View(
+          template: '''
+          &lt;p&gt; {{ message }} &lt;/p&gt;
+      '''
+      )
+      class ChildComponent {
+        String message = "I'm the child";
+      }
+
+  p.
+    Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to
+    add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives
+  p.
+    [TODO: Motivate communication between components with iterator example that passes index to the child]