diff --git a/src/InlineWidthQuery/__story__/story.tsx b/src/InlineWidthQuery/__story__/story.tsx
new file mode 100644
index 00000000..7d5e4a96
--- /dev/null
+++ b/src/InlineWidthQuery/__story__/story.tsx
@@ -0,0 +1,49 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {InlineWidthQuery} from '..';
+import {View} from '../../View';
+import {WindowSizeSensor} from '../../WindowSizeSensor';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+storiesOf('UI/InlineWidthQuery', module)
+ // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InlineWidthQuery.md')}))
+ .add('Example', () =>
+
+
+ Up to 300px
+
+
+ More than 300px
+
+
+ )
+ .add('100px increments', () =>
+
+
+ Up to 100px
+
+
+ 100px - 200px
+
+
+ 200px - 300px
+
+
+ 300px - 400px
+
+
+ 400px - 500px
+
+
+ 500px - 600px
+
+
+ 600px - 700px
+
+
+ 700px+
+
+
+ )
diff --git a/src/InlineWidthQuery/index.tsx b/src/InlineWidthQuery/index.tsx
new file mode 100644
index 00000000..f9b5d9b2
--- /dev/null
+++ b/src/InlineWidthQuery/index.tsx
@@ -0,0 +1,10 @@
+import {h} from '../util';
+import {WidthQuery} from '../WidthQuery';
+import {SizeSensor} from '../SizeSensor';
+
+export const InlineWidthQuery = (props) =>
+ h(SizeSensor, null, (state) =>
+ h('div', null,
+ h(WidthQuery, state, props.children)
+ )
+ );