diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 45a4fb75..00000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-8
diff --git a/README.md b/README.md
index 6279cf75..b6ffe92a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 # libreact
 
-[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
+[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface)
 
 React standard library — must-have toolbox for any React project.
 
@@ -33,11 +33,11 @@ const MyComponent = mock();
 
   - [Introduction](./docs/en/Introduction.md)
   - [Dummies](./docs/en/Dummies.md)
-     - [`mock()`](./docs/en/mock.md) and [`loadable()`](./docs/en/loadable.md)
+     - [`mock()`](./docs/en/mock.md) and [`loadable()`](./docs/en/loadable.md) — [*example*](https://codesandbox.io/s/j2ovpr03z3)
      - [`lazy()`](./docs/en/lazy.md), [`delayed()`](./docs/en/delayed.md), and [`viewport()`](./docs/en/viewport.md)
   - [Inversion](./docs/en/Inversion.md)
      - [`<State>`](./docs/en/State.md) and [`withState()`](./docs/en/State.md#withstate-hoc)
-        - [`<Toggle>`](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator)
+        - [`<Toggle>`](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator) &mdash; [*example*](https://codesandbox.io/s/zwkl16vv93)
         - [`<Flipflop>`](./docs/en/Flipflop.md), [`withFlipflop()`](./docs/en/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/en/Flipflop.md#withflipflop-decorator)
         - [`<Value>`](./docs/en/Value.md), [`withValue()`](./docs/en/Value.md#withvalue-hoc), and [`@withValue`](./docs/en/Value.md#withvalue-decorator)
         - [`<Counter>`](./docs/en/Counter.md), [`withCounter()`](./docs/en/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/en/Counter.md#withcounter-decorator)
@@ -48,20 +48,20 @@ const MyComponent = mock();
   - [Sensors](./docs/en/Sensors.md)
      - [`<ActiveSensor>`](./docs/en/ActiveSensor.md), [`withActive()`](./docs/en/ActiveSensor.md#withactive-hoc), and [`@withActive`](./docs/en/ActiveSensor.md#withactive-decorator)
      - [`<BatterySensor>`](./docs/en/BatterySensor.md), [`withBattery()`](./docs/en/BatterySensor.md#withbattery), and [`@withBattery`](./docs/en/BatterySensor.md#withbattery-1)
-     - [`<ExitSensor>`](./docs/en/ExitSensor.md)
+     - [`<ExitSensor>`](./docs/en/ExitSensor.md) &mdash; [*example*](https://codesandbox.io/s/7437x10z71)
      - [`<FocusSensor>`](./docs/en/FocusSensor.md), [`withFocus()`](./docs/en/FocusSensor.md#withfocus-hoc), and [`@withFocus`](./docs/en/FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./docs/en/GeoLocationSensor.md), [`withGeoLocation()`](./docs/en/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/en/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./docs/en/HoverSensor.md), [`withHover()`](./docs/en/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/en/HoverSensor.md#withhover-decorator)
      - [`<MediaDeviceSensor>`](./docs/en/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/en/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/en/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/en/MediaSensor.md), [`withMedia()`](./docs/en/MediaSensor.md#withmedia), and [`@withMedia`](./docs/en/MediaSensor.md#withmedia-1)
      - [`<MotionSensor>`](./docs/en/MotionSensor.md), [`withMotion()`](./docs/en/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/en/MotionSensor.md#withmotion-decorator)
-     - [`<MouseSensor>`](./docs/en/MouseSensor.md), [`withMouse()`](./docs/en/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/en/MouseSensor.md#withmouse-decorator)
+     - [`<MouseSensor>`](./docs/en/MouseSensor.md), [`withMouse()`](./docs/en/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/en/MouseSensor.md#withmouse-decorator) &mdash; [*example*](https://codesandbox.io/s/k3o16j7n47)
      - [`<NetworkSensor>`](./docs/en/NetworkSensor.md), [`withNetwork()`](./docs/en/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/en/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/en/LightSensor.md), [`withLight()`](./docs/en/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/en/LightSensor.md#withlight-decorator)
      - [`<LocationSensor>`](./docs/en/LocationSensor.md), [`withLocation()`](./docs/en/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/en/LocationSensor.md#withlocation-decora)
      - [`<OrientationSensor>`](./docs/en/OrientationSensor.md), [`withOrientation()`](./docs/en/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/en/OrientationSensor.md#withorientation-decorator)
      - [`<ScrollSensor>`](./docs/en/ScrollSensor.md)
-     - [`<SizeSensor>`](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator)
+     - [`<SizeSensor>`](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator) &mdash; [*example*](https://codesandbox.io/s/0y2qjm210p)
         - [`<WidthSensor>`](./docs/en/WidthSensor.md), [`withWidth()`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
      - [`<ViewportSensor>`](./docs/en/ViewportSensor.md), [`withViewport()`](./docs/en/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/en/ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./docs/en/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/en/ViewportSensor.md#viewportobserversensor)
@@ -74,7 +74,7 @@ const MyComponent = mock();
      - [`<Router>`](./docs/en/routing.md#router), [`<Route>`](./docs/en/routing.md#route), [`withRoute()`](./docs/en/routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./docs/en/translate.md#translations), [`<Translate>`](./docs/en/translate.md#translate-or-t), [`<T>`](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)
   - [UI](./docs/en/UI.md)
-     - [`<Portal>`](./docs/en/Portal.md) and [`<Overlay>`](./docs/en/Overlay.md)
+     - [`<Portal>`](./docs/en/Portal.md), [`<Overlay>`](./docs/en/Overlay.md), and [`<Modal>`](./docs/en/Modal.md)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
diff --git a/build/gulpfile.js b/build/gulpfile.js
new file mode 100644
index 00000000..41ba82f7
--- /dev/null
+++ b/build/gulpfile.js
@@ -0,0 +1,39 @@
+const gulp = require('gulp');
+const ts = require('gulp-typescript');
+const tsConfig = require('../tsconfig');
+const path = require('path');
+
+const ignore = [
+  '!../src/**/__tests__/**',
+  '!../src/**/__story__/**',
+  '!../src/**/__docs__/**',
+  '!../src/**/story.ts',
+  '!../src/**/story.tsx'
+];
+
+gulp.task('build-ts', () => {
+    return gulp.src([
+      '../src/**/*.ts',
+      ...ignore
+    ]).pipe(ts({
+      ...tsConfig.compilerOptions,
+      target: 'es5',
+      module: 'commonjs'
+    })).pipe(gulp.dest('../lib'));
+});
+
+gulp.task('build-modules', () => {
+  return gulp.src([
+    '../src/**/*.ts',
+    ...ignore
+  ]).pipe(ts({
+    ...tsConfig.compilerOptions,
+    target: 'ESNext',
+    module: 'ESNext'
+  })).pipe(gulp.dest('../modules'));
+});
+
+gulp.task('build', () => {
+  gulp.start('build-ts');
+  gulp.start('build-modules');
+});
diff --git a/docs/en/Modal.md b/docs/en/Modal.md
new file mode 100644
index 00000000..ee74b782
--- /dev/null
+++ b/docs/en/Modal.md
@@ -0,0 +1,57 @@
+# `<Modal>`
+
+Creates a modal overlay. This component is similar to [`<Overlay>`](./Overlay.md) but provides the following extras:
+
+- traps tabbing focus inside the overlay.
+- makes all other root level elements inert to user input.
+- sets aria title and description ids.
+
+### Usage
+
+Basic example.
+
+```jsx
+import {Modal} from 'libreact/lib/Modal';
+
+<Modal>
+  This is modal.
+</Modal>
+```
+
+Set aria title, description, and close button.
+
+```jsx
+<Modal>{({idTitle, idDescription, close}) =>
+  <div>
+    <h1 id={idTitle}>My title</h1>
+    <p id={idDescription}>This is description.</p>
+
+    <button onClick={close}>Cancel</button>
+  </div>
+}</Modal>
+```
+
+Track when user intends to close the the modal.
+
+```jsx
+<Modal onClick={} onEsc={}>
+  This is modal.
+</Modal>
+```
+
+
+## Props
+
+Accepts all [`<Overlay>`](./Overlay.md) props in addition to:
+
+- `onEsc` &mdash; optional, callback, called when user presses `Esc` button.
+- `onClose` &mdash; optional, callback, called when `close()` is executed.
+
+
+## State
+
+`<Modal>` is a render prop that injects its state into the render function. State has the following keys.
+
+- `close()` &mdash; method to calle `onClose` event.
+- `idTitle` &mdash; id to set for aria title element.
+- `idDescription` &mdash; id to set for aria description element.
diff --git a/docs/en/Overlay.md b/docs/en/Overlay.md
index 8c118456..d7cc36a5 100644
--- a/docs/en/Overlay.md
+++ b/docs/en/Overlay.md
@@ -18,3 +18,5 @@ import {Overlay} from 'libreact/lib/Overlay';
 
 - `color` &mdash; optional, string, overlay color, defaults to `rgba(0, 0, 0, 0.5)`.
 - `time` &mdash; optional, number, entrance opacity animation length in milliseconds, defaults to `300`.
+- `onElement` &mdash; optional, callback that receives the DOM element overlay created.
+- `onClick` &mdash; optional, callback, which is called when user click on overlay but not on its children.
diff --git a/docs/en/README.md b/docs/en/README.md
index a724e95f..5c692676 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -43,7 +43,7 @@
      - [`<Router>`](./routing.md#router), [`<Route>`](./routing.md#route), [`withRoute()`](./routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)
   - [UI](./UI.md)
-     - [`<Portal>`](./Portal.md) and [`<Overlay>`](./Overlay.md)
+     - [`<Portal>`](./Portal.md), [`<Overlay>`](./Overlay.md), and [`<Modal>`](./Modal.md)
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
      - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md
index 77c2f11c..24cfa36c 100644
--- a/docs/en/SUMMARY.md
+++ b/docs/en/SUMMARY.md
@@ -52,6 +52,7 @@
 * [UI](UI.md)
   * [Portal](Portal.md)
   * [Overlay](Overlay.md)
+  * [Modal](Modal.md)
   * [FullScreen](FullScreen.md)
   * [Slider](Slider.md)
   * [Audio](Audio.md)
diff --git a/docs/en/cssvars.md b/docs/en/cssvars.md
index a7b64b1a..82424c9a 100644
--- a/docs/en/cssvars.md
+++ b/docs/en/cssvars.md
@@ -2,7 +2,7 @@
 
 Use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (aka CSS variables) theming with automatic fallback
 to [regular theming](./theme.md). Below components allow you to safely use CSS variables. You simply use `<CssVarsProvider>` similar
-to how you use [`<Theme>`](./theme.md#theme), but if CSS variables are supported by user's browser, *all values will be replaces instead
+to how you use [`<Theme>`](./theme.md#theme), but if CSS variables are supported by user's browser, *all values will be replaced
 by CSS variables* and on subsequent re-renders it will try to *just modify the CSS variables without re-rendering* the children.
 
 > If CSS Custom Properties are not supported, CssVars works like a typical theme provider.
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index cb18fbd2..00000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const gulp = require('gulp');
-const ts = require('gulp-typescript');
-const tsConfig = require('./tsconfig');
-
-gulp.task('build-ts', () => {
-    return gulp.src([
-      'src/**/*.ts',
-      '!src/**/__tests__/**',
-      '!src/**/__story__/**',
-      '!src/**/__docs__/**',
-      '!src/**/story.ts',
-      '!src/**/story.tsx'
-    ]).pipe(ts({
-      ...tsConfig.compilerOptions,
-      target: 'es5',
-      module: 'commonjs'
-    })).pipe(gulp.dest('lib'));
-});
-
-gulp.task('build-modules', () => {
-  return gulp.src([
-    'src/**/*.ts',
-    '!src/**/__tests__/**',
-    '!src/**/__story__/**',
-    '!src/**/__docs__/**',
-    '!src/**/story.ts',
-    '!src/**/story.tsx'
-  ]).pipe(ts({
-    ...tsConfig.compilerOptions,
-    target: 'ESNext',
-    module: 'ESNext'
-  })).pipe(gulp.dest('modules'));
-});
diff --git a/package.json b/package.json
index 7903e985..ee91ca3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "description": "React standard library",
   "main": "lib/index.js",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "npm run test:story",
-    "build": "npm run clean && gulp build-ts && gulp build-modules",
+    "build": "npm run clean && gulp --gulpfile build/gulpfile.js build",
     "clean": "rimraf lib modules && npm run test:story:clean && npm run docs:clean",
     "test": "npm run test:server && npm run test:client",
     "test:server": "mocha -r ts-node/register src/**/*.test-server.ts*",
@@ -28,11 +28,13 @@
   },
   "dependencies": {
     "throttle-debounce": "^1.0.1",
-    "freestyler-context": "^1.3.3",
-    "freestyler-renderer": "^1.3.2",
+    "freestyler": "1.10.0",
     "screenfull": "^3.3.2",
     "fast-extend": "1.0.2",
-    "fast-shallow-equal": "0.1.1"
+    "fast-shallow-equal": "0.1.1",
+    "tslib": "^1.9.0",
+    "react-universal-interface": "^0.3.1",
+    "react-focus-lock": "1.6.5"
   },
   "peerDependencies": {
     "react": "*",
@@ -165,6 +167,9 @@
     "link",
     "fullscreen",
     "css",
-    "reset"
+    "reset",
+    "portal",
+    "overlay",
+    "modal"
   ]
 }
diff --git a/src/Modal/__story__/story.tsx b/src/Modal/__story__/story.tsx
new file mode 100644
index 00000000..a8a26031
--- /dev/null
+++ b/src/Modal/__story__/story.tsx
@@ -0,0 +1,54 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Modal} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('UI/Modal', module)
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Modal.md')}))
+  .add('Basic example', () =>
+    <div>
+      <Modal>
+        foobar
+      </Modal>
+    </div>
+  )
+  .add('Button underneath', () =>
+    <div>
+      <button onClick={() => alert('CLICKED')}>Click me!</button>
+      <Modal>
+        foobar
+      </Modal>
+    </div>
+  )
+  .add('With inputs', () =>
+    <div>
+      <button onClick={() => alert('CLICKED')}>Click me!</button>
+      <Modal>
+        <div style={{background: 'white'}}>
+          This is modal...
+          <button>OK</button>
+          <button>Cancel</button>
+        </div>
+      </Modal>
+    </div>
+  )
+  .add('Modal UI', () =>
+    <div>
+      <Modal color='tomato' onClick={action('onClick')} onEsc={action('onEsc')}>
+        <div
+          style={{
+            width: 300,
+            height: 200,
+            background: '#fff',
+            borderRadius: 4,
+            boxShadow: '0 2px 4px rgba(0,0,0,.3)',
+            padding: 30,
+          }}
+        >
+          foobar
+        </div>
+      </Modal>
+    </div>
+  )
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
new file mode 100644
index 00000000..c9c55322
--- /dev/null
+++ b/src/Modal/index.ts
@@ -0,0 +1,127 @@
+import {Component} from 'react';
+import {render} from 'react-universal-interface';
+import FocusLock from 'react-focus-lock';
+import {h, isClient, on, off, noop} from '../util';
+import {Overlay, IOverlayProps} from '../Overlay';
+
+let id = 0;
+
+const ESC = 27;
+
+export interface IModalProps extends IOverlayProps {
+  onEsc?: (event: KeyboardEvent) => void;
+  onClose?: () => void;
+}
+
+export interface IModalState {
+  close: () => void;
+  idTitle: string;
+  idDescription: string;
+}
+
+export class Modal extends Component<IModalProps, IModalState> {
+  id: number;
+  el: HTMLElement = null;
+  activeEl: Element; // Previous active element;
+
+  constructor (props, context) {
+    super(props, context);
+
+    this.id = id++;
+
+    this.state = {
+      close: () => (this.props.onClose || noop)(),
+      idTitle: 'dialog-title-' + this.id,
+      idDescription: 'dialog-descr-' + this.id
+    };
+
+    this.activeEl = isClient ? document.activeElement : null;
+  }
+
+  componentDidMount () {
+    on(document, 'keydown', this.onKey);
+  }
+
+  componentWillUnmount () {
+    off(document, 'keydown', this.onKey);
+
+    const siblings = Array.from(document.body.children);
+
+    for (let i = 0; i < siblings.length; i++) {
+      const sibling = siblings[i] as HTMLElement;
+
+      if (sibling === this.el) {
+        continue;
+      }
+
+      if ((sibling as any).__modal_lock !== this) {
+        continue;
+      }
+
+      delete (sibling as any).__modal_lock;
+      (sibling as any).inert = false;
+      sibling.style.removeProperty('pointer-events');
+      sibling.style.removeProperty('user-select');
+      sibling.removeAttribute('aria-hidden');
+    }
+
+    // Focus previously active element.
+    if (this.activeEl && (this.activeEl as any).focus) {
+      (this.activeEl as any).focus();
+    }
+  }
+
+  onElement = (el) => {
+    this.el = el;
+
+    el.setAttribute('role', 'dialog');
+    el.classList.add('dialog');
+
+    el.setAttribute('aria-modal', 'true');
+    el.setAttribute('aria-labelledby', 'dialog-title-' + this.id);
+    el.setAttribute('aria-describedby', 'dialog-descr-' + this.id);
+
+    const siblings = Array.from(document.body.children);
+
+    for (let i = 0; i < siblings.length; i++) {
+      const sibling = siblings[i] as HTMLElement;
+
+      if (sibling === el) {
+        continue;
+      }
+
+      if ((sibling as any).__modal_lock) {
+        continue;
+      }
+
+      (sibling as any).__modal_lock = this;
+      (sibling as any).inert = true;
+      sibling.style.setProperty('pointer-events', 'none');
+      sibling.style.setProperty('user-select', 'none');
+      sibling.setAttribute('aria-hidden', 'true');
+    }
+
+    (this.props.onElement || noop)(el);
+  };
+
+  onKey = (event) => {
+    if (event.keyCode === ESC) {
+      (this.props.onEsc || noop)(event);
+    }
+  };
+
+  render () {
+    const {color, time, onClick} = this.props;
+
+    return h(Overlay, {
+      color,
+      time,
+      onClick,
+      onElement: this.onElement,
+    },
+      h(FocusLock, null,
+        render(this.props, this.state)
+      )
+    );
+  }
+}
diff --git a/src/Overlay/__story__/story.tsx b/src/Overlay/__story__/story.tsx
index 7b3d8b89..21c30392 100644
--- a/src/Overlay/__story__/story.tsx
+++ b/src/Overlay/__story__/story.tsx
@@ -16,7 +16,7 @@ storiesOf('UI/Overlay', module)
   )
   .add('Sample modal', () =>
     <div>
-      <Overlay color='tomato'>
+      <Overlay color='tomato' onClick={action('onClick')}>
         <div
           style={{
             width: 300,
@@ -71,3 +71,23 @@ storiesOf('UI/Overlay', module)
       </Overlay>
     </div>
   )
+  .add('Button underneath', () =>
+    <div>
+      <button onClick={() => alert('CLICKED')}>Click me!</button>
+      <Overlay>
+        foobar
+      </Overlay>
+    </div>
+  )
+  .add('With inputs', () =>
+    <div>
+      <button onClick={() => alert('CLICKED')}>Click me!</button>
+      <Overlay>
+        <div style={{background: 'white'}}>
+          This is modal...
+          <button>OK</button>
+          <button>Cancel</button>
+        </div>
+      </Overlay>
+    </div>
+  )
diff --git a/src/Overlay/index.ts b/src/Overlay/index.ts
index 033ffd01..050f21c1 100644
--- a/src/Overlay/index.ts
+++ b/src/Overlay/index.ts
@@ -1,24 +1,34 @@
 import {Component} from 'react';
 import {Portal} from '../Portal';
-import {h} from '../util';
+import {h, noop, on, off} from '../util';
 
 export interface IOverlayProps {
   color?: string;
   time?: number;
+  onClick?: (event: MouseEvent) => void;
+  onElement?: (div: HTMLElement) => void;
 }
 
 export interface IOverlayState {
 }
 
 export class Overlay extends Component<IOverlayProps, IOverlayState> {
+  el: HTMLElement = null;
+
   static defaultProps = {
     color: 'rgba(0,0,0,0.5)',
     time: 300,
   };
 
+  componentWillUnmount () {
+    off(this.el, 'click', this.onClick);
+  }
+
   onElement = (el) => {
     const {style} = el;
 
+    this.el = el;
+
     style.zIndex = 2147483647; // Max z-index.
     style.position = 'fixed';
     style.width = '100%';
@@ -39,6 +49,16 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
     setTimeout(() => {
       style.opacity = 1;
     }, 35);
+
+    on(el, 'click', this.onClick);
+
+    (this.props.onElement || noop)(el);
+  };
+
+  onClick = (event) => {
+    if (event.target === this.el) {
+      (this.props.onClick || noop)(event);
+    }
   };
 
   render () {
diff --git a/src/Portal/index.ts b/src/Portal/index.ts
index 6d576727..e8e976bd 100644
--- a/src/Portal/index.ts
+++ b/src/Portal/index.ts
@@ -1,10 +1,11 @@
 import {Component} from 'react';
 import {createPortal} from 'react-dom';
-import {isClient} from '../util';
+import {isClient, noop} from '../util';
 
 export interface IPortalProps {
   children?: any;
   el?: HTMLElement;
+  onElement?: (el: HTMLElement) => void;
 }
 
 export interface IPortalState {
@@ -18,6 +19,7 @@ export class Portal extends Component<IPortalProps, IPortalState> {
 
     if (isClient && !props.el) {
       this.createEl();
+      (props.onElement || noop)(this.el);
     }
   }
 
diff --git a/src/ShouldUpdate/__story__/story.tsx b/src/ShouldUpdate/__story__/story.tsx
index 0ef8f813..98321a78 100644
--- a/src/ShouldUpdate/__story__/story.tsx
+++ b/src/ShouldUpdate/__story__/story.tsx
@@ -10,7 +10,7 @@ import {Example3} from './Example3';
 import {Example4} from './Example4';
 
 storiesOf('Inversion/ShouldUpdate', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ShouldUpdate.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ShouldUpdate.md')}))
   .add('Renders children', () =>
     h(ShouldUpdate, {when: () => false, props: {}},
       h('div', {}, 'Hello foobar!')
diff --git a/src/State/index.ts b/src/State/index.ts
index e1e15ab8..02e964a8 100644
--- a/src/State/index.ts
+++ b/src/State/index.ts
@@ -12,7 +12,6 @@ export interface IStateProps {
 }
 
 export interface IStateState {
-
 }
 
 export class State extends Component<IStateProps, IStateState> {
diff --git a/src/css/index.ts b/src/css/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/cssvars/__story__/story.tsx b/src/cssvars/__story__/story.tsx
index e395ddf0..9318e23f 100644
--- a/src/cssvars/__story__/story.tsx
+++ b/src/cssvars/__story__/story.tsx
@@ -25,7 +25,7 @@ class Decorator1 extends Component<any, any> {
 }
 
 storiesOf('Context/CSS Variables', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/FocusSensor.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/cssvars.md')}))
   .add('Basic example', () => <Example1 />)
   .add('Inline style', () =>
     <CssVarsProvider vars={{
diff --git a/src/index.ts b/src/index.ts
index ad749b9f..971512b6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,5 +30,11 @@ export * from './theme';
 export * from './route';
 export * from './cssvars';
 
+// UI
+export * from './Portal';
+export * from './Overlay';
+export * from './Modal';
+export * from './FullScreen';
+
 // Other
 export * from './Resolve';
diff --git a/src/reset/createCssResetComponent.ts b/src/reset/createCssResetComponent.ts
index bc333066..6c1686bd 100644
--- a/src/reset/createCssResetComponent.ts
+++ b/src/reset/createCssResetComponent.ts
@@ -1,6 +1,6 @@
 import {h} from '../util';
-import toStylesheet from 'freestyler-renderer/lib/ast/toStylesheet';
-import toCss from 'freestyler-renderer/lib/ast/toCss';
+import toStylesheet from 'freestyler/lib/ast/toStylesheet';
+import toCss from 'freestyler/lib/ast/toCss';
 
 const createCssResetComponent = (cssTemplate) => {
   const rawCss = toCss(toStylesheet(cssTemplate));
diff --git a/src/route/__tests__/index.test-server.tsx b/src/route/__tests__/index.test-server.tsx
index 3f0f5957..530e2f39 100644
--- a/src/route/__tests__/index.test-server.tsx
+++ b/src/route/__tests__/index.test-server.tsx
@@ -34,7 +34,7 @@ describe('route SSR', () => {
       </Router>
     );
 
-    expect(html).to.equal('<div><span>1</span><span>3</span><span>4</span></div>');
+    expect(html).to.equal('<span>1</span><span>3</span><span>4</span>');
   });
 
   it('matches partial step', () => {
diff --git a/typing.d.ts b/src/typing.d.ts
similarity index 100%
rename from typing.d.ts
rename to src/typing.d.ts
diff --git a/src/util/faccToHoc.ts b/src/util/faccToHoc.ts
index 5a3ee359..c30311a1 100644
--- a/src/util/faccToHoc.ts
+++ b/src/util/faccToHoc.ts
@@ -1,29 +1,7 @@
-import {h} from '../util';
-import addClassDecoratorSupport from './addClassDecoratorSupport';
+import createEnhancer, {divWrapper} from 'react-universal-interface/lib/createEnhancer';
 
-const noWrap = (Comp, propName, props, state) => h(Comp, propName ?
-  {[propName]: state, ...props} :
-  {...state, ...props}
-);
+export {
+  divWrapper
+};
 
-export const divWrapper = (Comp, propName, props, state) =>
-  h('div', null, noWrap(Comp, propName, props, state)) as any;
-
-const faccToHoc = (Facc, prop?: string, wrapper = noWrap) => {
-  const hoc = (Comp, propName: any = prop, faccProps: object = null) => {
-    const isClassDecoratorMethodCall = typeof Comp === 'string';
-
-    if (isClassDecoratorMethodCall) {
-      return (Klass) => hoc(Klass, Comp as any, propName as any);
-    }
-
-    const Enhanced = (props) =>
-      h(Facc, faccProps, (state) => wrapper(Comp, propName, props, state));
-
-    return isClassDecoratorMethodCall ? addClassDecoratorSupport(Enhanced) : Enhanced;
-  };
-
-  return hoc;
-}
-
-export default faccToHoc;
+export default createEnhancer;
diff --git a/src/util/renderProp.ts b/src/util/renderProp.ts
index df6cb8c7..210a4aa6 100644
--- a/src/util/renderProp.ts
+++ b/src/util/renderProp.ts
@@ -1,33 +1,3 @@
-import {h, isFn} from '../util';
+import {render} from 'react-universal-interface';
 
-const renderProp = (props, ...args) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof props !== 'object') {
-      throw new TypeError('renderProp(props, data) first argument must be a prop object.');
-    }
-
-    const {children, render} = props;
-
-    if (isFn(children) && isFn(render)) {
-      console.warn(
-        'Both "render" and "children" are specified for a render-prop component. ' +
-        'Children will be used.'
-      );
-      console.trace();
-    }
-  }
-
-  const {render, children = render, component, comp = component} = props;
-
-  return isFn(children) ?
-    children(...args) :
-    comp ?
-      h(comp, args[0]) :
-      children && (typeof children !== 'object') ?
-        h('div', null, children) :
-        children instanceof Array ?
-          h('div', null, ...children) :
-          (children || null);
-};
-
-export default renderProp;
+export default render;
diff --git a/tsconfig.json b/tsconfig.json
index 0088bce0..d4985567 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,7 @@
     ]
   },
   "include": [
-    "typing.d.ts",
+    "src/typing.d.ts",
     "src"
   ],
   "exclude": [