diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
new file mode 100644
index 00000000000..31ba6454753
--- /dev/null
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ValueMappingsEditor } from './ValueMappingsEditor';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+const ValueMappingsEditorStories = storiesOf('UI/ValueMappingsEditor', module);
+
+ValueMappingsEditorStories.addDecorator(withCenteredStory);
+
+ValueMappingsEditorStories.add('default', () => {
+  return (
+    <ValueMappingsEditor
+      valueMappings={[]}
+      onChange={() => {
+        action('Mapping changed');
+      }}
+    />
+  );
+});