diff --git a/examples/cra-kitchen-sink/.storybook/addons.js b/examples/cra-kitchen-sink/.storybook/addons.js
index 55875383363f..26a5f5763205 100644
--- a/examples/cra-kitchen-sink/.storybook/addons.js
+++ b/examples/cra-kitchen-sink/.storybook/addons.js
@@ -7,3 +7,4 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
+import '@storybook/addon-viewport/register';
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index f3fa6fc94282..afdd5ceb1562 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,9 +1,12 @@
 import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+import { setViewports } from '@storybook/addon-viewport';
 
 // deprecated usage of infoAddon
 import infoAddon from '@storybook/addon-info';
 
+import viewports from './viewports.json';
+
 setOptions({
   name: 'CRA Kitchen Sink',
   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
@@ -20,6 +23,8 @@ setOptions({
 // deprecated usage of infoAddon
 setAddon(infoAddon);
 
+setViewports(viewports);
+
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
   require('../src/stories/welcome');
diff --git a/examples/cra-kitchen-sink/.storybook/viewports.json b/examples/cra-kitchen-sink/.storybook/viewports.json
new file mode 100644
index 000000000000..114abde3929b
--- /dev/null
+++ b/examples/cra-kitchen-sink/.storybook/viewports.json
@@ -0,0 +1,51 @@
+{
+	"iphone5": {
+		"name": "[Custom] iPhone 5",
+		"styles": {
+			"width": "320px",
+			"height": "568px"
+		}
+	},
+	"iphone6": {
+		"name": "[Custom] iPhone 6",
+		"styles": {
+			"width": "375px",
+			"height": "667px"
+		}
+	},
+	"iphone6p": {
+		"name": "[Custom] iPhone 6 Plus",
+		"styles": {
+			"width": "414px",
+			"height": "736px"
+		}
+	},
+	"ipad": {
+		"name": "[Custom] iPad",
+		"styles": {
+			"width": "768px",
+			"height": "1024px"
+		}
+	},
+	"galaxys5": {
+		"name": "[Custom] Galaxy S5",
+		"styles": {
+			"width": "360px",
+			"height": "640px"
+		}
+	},
+	"nexus5x": {
+		"name": "[Custom] Nexus 5X",
+		"styles": {
+			"width": "412px",
+			"height": "660px"
+		}
+	},
+	"nexus6p": {
+		"name": "[Custom] Nexus 6P",
+		"styles": {
+			"width": "412px",
+			"height": "732px"
+		}
+	}
+}
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 919a5e4ad8ae..dd97576bc00a 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -29,6 +29,7 @@
     "@storybook/addon-notes": "^3.4.0-alpha.9",
     "@storybook/addon-options": "^3.4.0-alpha.9",
     "@storybook/addon-storyshots": "^3.4.0-alpha.9",
+    "@storybook/addon-viewport": "^3.4.0-alpha.9",
     "@storybook/addons": "^3.4.0-alpha.9",
     "@storybook/client-logger": "^3.4.0-alpha.9",
     "@storybook/react": "^3.4.0-alpha.9",