diff --git a/docs/assets/screenshots/fab.png b/docs/assets/screenshots/fab.png
new file mode 100644
index 0000000000..6ab9c0a990
Binary files /dev/null and b/docs/assets/screenshots/fab.png differ
diff --git a/docs/assets/screenshots/paper.1_2.png b/docs/assets/screenshots/paper.1_2.png
new file mode 100644
index 0000000000..ac0f74f699
Binary files /dev/null and b/docs/assets/screenshots/paper.1_2.png differ
diff --git a/docs/assets/screenshots/paper.4_6.png b/docs/assets/screenshots/paper.4_6.png
new file mode 100644
index 0000000000..f69cda1a88
Binary files /dev/null and b/docs/assets/screenshots/paper.4_6.png differ
diff --git a/docs/assets/screenshots/paper.9_12.png b/docs/assets/screenshots/paper.9_12.png
new file mode 100644
index 0000000000..350f83ffc9
Binary files /dev/null and b/docs/assets/screenshots/paper.9_12.png differ
diff --git a/docs/assets/screenshots/progress-bar.png b/docs/assets/screenshots/progress-bar.png
new file mode 100644
index 0000000000..2afc9cbeca
Binary files /dev/null and b/docs/assets/screenshots/progress-bar.png differ
diff --git a/docs/assets/screenshots/switch.android.disabled.png b/docs/assets/screenshots/switch.android.disabled.png
new file mode 100644
index 0000000000..70ceb804aa
Binary files /dev/null and b/docs/assets/screenshots/switch.android.disabled.png differ
diff --git a/docs/assets/screenshots/switch.android.enabled.png b/docs/assets/screenshots/switch.android.enabled.png
new file mode 100644
index 0000000000..70a4ac96a0
Binary files /dev/null and b/docs/assets/screenshots/switch.android.enabled.png differ
diff --git a/docs/assets/screenshots/switch.ios.disabled.png b/docs/assets/screenshots/switch.ios.disabled.png
new file mode 100644
index 0000000000..8974841a9d
Binary files /dev/null and b/docs/assets/screenshots/switch.ios.disabled.png differ
diff --git a/docs/assets/screenshots/switch.ios.enabled.png b/docs/assets/screenshots/switch.ios.enabled.png
new file mode 100644
index 0000000000..96c4bae849
Binary files /dev/null and b/docs/assets/screenshots/switch.ios.enabled.png differ
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
index b931061ded..b457af997c 100644
--- a/docs/assets/styles.css
+++ b/docs/assets/styles.css
@@ -3,14 +3,28 @@
   margin: 0 -4px;
 }
 
-.screenshots > img {
-  width: 280px;
+.screenshots img {
+  max-width: 280px;
   height: auto;
+}
+
+.screenshots > div {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.screenshots > * {
   margin: 4px;
 }
 
+.screenshots span { 
+  color: #616161;
+  font-size: 13px;
+  line-height: 24px;
+}
+
 @media (min-width: 1100px) {
-  .screenshots > img {
-    width: 240px;
+  .screenshots img {
+    max-width: 240px;
   }
 }
diff --git a/src/components/FAB.js b/src/components/FAB.js
index c6083a3ca6..780d63f39d 100644
--- a/src/components/FAB.js
+++ b/src/components/FAB.js
@@ -45,6 +45,10 @@ type Props = {
 /**
  * A floating action button represents the primary action in an application.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/fab.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (
diff --git a/src/components/Paper.js b/src/components/Paper.js
index 2e0cd6efd3..61ef1d5a5f 100644
--- a/src/components/Paper.js
+++ b/src/components/Paper.js
@@ -22,6 +22,12 @@ type Props = {
 /**
  * Paper is a basic container that can give depth to the page.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/paper.1_2.png" />
+ *   <img src="screenshots/paper.4_6.png" />
+ *   <img src="screenshots/paper.9_12.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (
@@ -30,7 +36,6 @@ type Props = {
  *   </Paper>
  * );
  *
- *
  * const styles = StyleSheet.create({
  *   paper: {
  *    padding: 8,
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index e9afecfbfd..e2ec136e0a 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -35,6 +35,10 @@ const ProgressBarComponent = Platform.select({
 /**
  * Progress bar is an indicator used to present some activity in the app.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/progress-bar.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (
diff --git a/src/components/Switch.js b/src/components/Switch.js
index 793465a6ce..5de1118a54 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -34,6 +34,25 @@ type Props = {
 /**
  * Switch is a visual toggle between two mutually exclusive states—on and off.
  *
+ * <div class="screenshots">
+ *   <div>
+ *     <img src="screenshots/switch.android.enabled.png" />
+ *     <span>Android (enabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.android.disabled.png" />
+ *     <span>Android (disabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.ios.enabled.png" />
+ *     <span>iOS (enabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.ios.disabled.png" />
+ *     <span>iOS (disabled)</span>
+ *   </div>
+ * </div>
+ *
  * ## Usage
  * ```js
  * export default class MyComponent extends Component {