diff --git a/doczrc.js b/doczrc.js
deleted file mode 100644
index ebda1ba8..00000000
--- a/doczrc.js
+++ /dev/null
@@ -1,40 +0,0 @@
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-
-export default {
-  modifyBundlerConfig: config => {
-    /*
-     * use tsconfig paths, e.g.: `import Button from components/Button`
-     */
-    config.resolve.plugins = [
-      new TsconfigPathsPlugin({
-        configFile: "./tsconfig.json"
-      })
-    ];
-
-    /*
-     * allow proptype generation with tsconfig.
-     * https://github.com/pedronauck/docz/issues/240#issuecomment-415689181
-     */
-    const jsxPluginIndex = config.plugins.findIndex(
-      plugin => plugin.config.id === "jsx"
-    );
-    const { loaders } = config.plugins[jsxPluginIndex].config;
-    const docGenLoaderIndex = loaders.findIndex(loader =>
-      /react-docgen-typescript-loader/.test(loader.loader)
-    );
-    const docGenLoader = loaders[docGenLoaderIndex];
-    docGenLoader.options = { tsconfigPath: "./tsconfig.json" };
-
-    /*
-     * allow sass parsing
-     */
-    config.module.rules.push({
-      test: /\.s[ca]ss$/,
-      loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
-    });
-
-    return config;
-  },
-  title: "React Bulma Components",
-  typescript: true
-};
diff --git a/jest.config.js b/jest.config.js
index ba19904e..e9928bca 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -28,7 +28,7 @@ module.exports = {
   },
   moduleNameMapper: {
     "\\.(css|less|s(c|a)ss)$": "<rootDir>/../__mocks__/style.ts",
-    "services(.*)$": "<rootDir>/services$1"
+    "@/(.*)": "<rootDir>/$1"
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"]
 };
diff --git a/src/components/box/box.mdx b/src/components/box/box.mdx
deleted file mode 100644
index 070032c5..00000000
--- a/src/components/box/box.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-name: Box
-menu: Elements
----
-
-import { Playground, PropsTable } from "docz";
-
-import { Box } from ".";
-import { Content } from "components/content";
-import { Image } from "components/image";
-import { Media } from "components/media";
-
-# Box
-
-## Basic usage
-
-<Playground>
-  <Box
-    paddingless={false}
-    responsive={{
-      desktop: {
-        display: "inline-flex",
-        only: true
-      },
-      mobile: {
-        display: "block"
-      },
-      tablet: {
-        display: "flex"
-      },
-      widescreen: {
-        display: "inline-block"
-      }
-    }}
-    hide={{
-      tablet: {
-        hide: true,
-        only: true
-      },
-      widescreen: {
-        hide: true
-      }
-    }}
-  >
-    <Media>
-      <Media.Item renderAs="figure" position="left">
-        <Image
-          size={64}
-          alt="64x64"
-          src="http://bulma.io/images/placeholders/128x128.png"
-        />
-      </Media.Item>
-      <Media.Item>
-        <Content>
-          <p>
-            <strong>John Smith</strong> <small>@johnsmith</small>{" "}
-            <small>31m</small>
-            <br />
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-            ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas
-            non massa sem. Etiam finibus odio quis feugiat facilisis.
-          </p>
-        </Content>
-      </Media.Item>
-    </Media>
-  </Box>
-</Playground>
-
-## Properties
-
-<PropsTable of={Box} />
diff --git a/src/components/box/box.story.tsx b/src/components/box/box.story.tsx
index 53ba30a5..5fa86413 100644
--- a/src/components/box/box.story.tsx
+++ b/src/components/box/box.story.tsx
@@ -2,10 +2,10 @@ import { boolean } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Box } from "components/box";
-import { Content } from "components/content";
-import { Image } from "components/image";
-import { Media } from "components/media";
+import { Box } from "@/components/box";
+import { Content } from "@/components/content";
+import { Image } from "@/components/image";
+import { Media } from "@/components/media";
 
 storiesOf("Box", module).add("Default", () => (
   <Box
diff --git a/src/components/box/box.tsx b/src/components/box/box.tsx
index 1296648c..622a5e24 100644
--- a/src/components/box/box.tsx
+++ b/src/components/box/box.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import * as React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type BoxModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/breadcrumb/breadcrumb.mdx b/src/components/breadcrumb/breadcrumb.mdx
deleted file mode 100644
index 23dc67bd..00000000
--- a/src/components/breadcrumb/breadcrumb.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-name: Breadcrumb
-menu: Components
----
-
-import { Playground, PropsTable } from "docz";
-
-import { Box } from "components/box";
-import { Breadcrumb } from "components/breadcrumb";
-import { Content } from "components/content";
-import { Image } from "components/image";
-import { Media } from "components/media";
-
-# Breadcrumb
-
-## Basic usage
-
-export const meta = {
-  items: [
-    {
-      name: "Storybook",
-      url: "#1"
-    },
-    {
-      name: "Breadcrumb",
-      url: "#2"
-    },
-    {
-      active: true,
-      name: "Breadcrumb Types",
-      url: "#3"
-    }
-  ]
-};
-
-<Playground>
-  <Box>
-    <Breadcrumb separator="arrow" items={
-      [
-        {
-          name: "Storybook",
-          url: "#1"
-        },
-        {
-          name: "Breadcrumb",
-          url: "#2"
-        },
-        {
-          active: true,
-          name: "Breadcrumb Types",
-          url: "#3"
-        }
-      ]
-    } />
-
-  </Box>
-</Playground>
-
-## Properties
-
-<PropsTable of={Box} />
diff --git a/src/components/breadcrumb/breadcrumb.story.tsx b/src/components/breadcrumb/breadcrumb.story.tsx
index 06028d67..bc9de21f 100644
--- a/src/components/breadcrumb/breadcrumb.story.tsx
+++ b/src/components/breadcrumb/breadcrumb.story.tsx
@@ -2,9 +2,9 @@ import { select } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Box } from "components/box";
-import { Breadcrumb } from "components/breadcrumb";
-import { BreadcrumbProps } from "components/breadcrumb/breadcrumb";
+import { Box } from "@/components/box";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { BreadcrumbProps } from "@/components/breadcrumb/breadcrumb";
 
 const makeSeparator = () =>
   select(
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index 4a1bc5df..0db91d1d 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import * as React from "react";
 
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { classNames, clean, ModifierProps } from "modifiers";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type BreadcrumbModifierProps = Partial<{
   separator: "arrow" | "bullet" | "dot" | "succeeds";
diff --git a/src/components/button/button-group.tsx b/src/components/button/button-group.tsx
index e7bf1ff4..69aa20f3 100644
--- a/src/components/button/button-group.tsx
+++ b/src/components/button/button-group.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ButtonGroupModifierProps = Partial<{
   hasAddons: boolean;
diff --git a/src/components/button/button.story.tsx b/src/components/button/button.story.tsx
index df342792..871ff639 100644
--- a/src/components/button/button.story.tsx
+++ b/src/components/button/button.story.tsx
@@ -3,9 +3,9 @@ import { boolean, select } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Box } from "components/box";
-import { Button } from "components/button";
-import { Section } from "components/section";
+import { Box } from "@/components/box";
+import { Button } from "@/components/button";
+import { Section } from "@/components/section";
 
 const makeColorSelect = () =>
   select(
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7b67008b..3887cd3f 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { classNames, clean, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { classNames, clean, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 import { ButtonGroup } from "./button-group";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/src/components/card/card-content.tsx b/src/components/card/card-content.tsx
index 9d3a1b1d..1a25ca25 100644
--- a/src/components/card/card-content.tsx
+++ b/src/components/card/card-content.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type CardContentProps = ModifierProps;
 
diff --git a/src/components/card/card-footer-item.tsx b/src/components/card/card-footer-item.tsx
index ce47c44a..179d8d5b 100644
--- a/src/components/card/card-footer-item.tsx
+++ b/src/components/card/card-footer-item.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type CardFooterItemProps = ModifierProps;
 
diff --git a/src/components/card/card-footer.tsx b/src/components/card/card-footer.tsx
index 2448eeb9..3455a582 100644
--- a/src/components/card/card-footer.tsx
+++ b/src/components/card/card-footer.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { CardFooterItem } from "./card-footer-item";
 
 export type CardFooterProps = ModifierProps;
diff --git a/src/components/card/card-header-icon.tsx b/src/components/card/card-header-icon.tsx
index b1924f30..68140f02 100644
--- a/src/components/card/card-header-icon.tsx
+++ b/src/components/card/card-header-icon.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type CardHeaderIconProps = ModifierProps;
 
diff --git a/src/components/card/card-header-title.tsx b/src/components/card/card-header-title.tsx
index 99597d83..cd8ddfdc 100644
--- a/src/components/card/card-header-title.tsx
+++ b/src/components/card/card-header-title.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type CardHeaderTitleProps = ModifierProps;
 
diff --git a/src/components/card/card-header.tsx b/src/components/card/card-header.tsx
index 5f1f26c9..fc7e3896 100644
--- a/src/components/card/card-header.tsx
+++ b/src/components/card/card-header.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { CardHeaderIcon } from "./card-header-icon";
 import { CardHeaderTitle } from "./card-header-title";
 
diff --git a/src/components/card/card-image.tsx b/src/components/card/card-image.tsx
index 7df8b492..eca06ab5 100644
--- a/src/components/card/card-image.tsx
+++ b/src/components/card/card-image.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { Image } from "components/image";
-import { ImageProps } from "components/image/image";
+import { Element } from "@/components/element";
+import { Image } from "@/components/image";
+import { ImageProps } from "@/components/image/image";
 
 export type CardImageProps = ImageProps & { className?: string };
 
diff --git a/src/components/card/card.story.tsx b/src/components/card/card.story.tsx
index e21cb348..7f856be3 100644
--- a/src/components/card/card.story.tsx
+++ b/src/components/card/card.story.tsx
@@ -2,11 +2,11 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Card } from "components/card";
-import { Content } from "components/content";
-import { Heading } from "components/heading";
-import { Image } from "components/image";
-import { Media } from "components/media";
+import { Card } from "@/components/card";
+import { Content } from "@/components/content";
+import { Heading } from "@/components/heading";
+import { Image } from "@/components/image";
+import { Media } from "@/components/media";
 
 storiesOf("Card", module)
   .addDecorator(story => (
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 8d34536f..885e99f2 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { CardContent } from "./card-content";
 import { CardFooter } from "./card-footer";
 import { CardHeader } from "./card-header";
diff --git a/src/components/columns/column.tsx b/src/components/columns/column.tsx
index 2ea77dc1..237e74a8 100644
--- a/src/components/columns/column.tsx
+++ b/src/components/columns/column.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { ColumnSizes } from "./constants";
 
 export type ColumnSizeModifierProps = Partial<{
diff --git a/src/components/columns/columns.story.tsx b/src/components/columns/columns.story.tsx
index 65af77f0..67b1058a 100644
--- a/src/components/columns/columns.story.tsx
+++ b/src/components/columns/columns.story.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Box } from "components/box";
-import { Columns } from "components/columns";
-import { Heading } from "components/heading";
+import { Box } from "@/components/box";
+import { Columns } from "@/components/columns";
+import { Heading } from "@/components/heading";
 import { ColumnSizeModifierProps } from "./column";
 import { COLUMN_SIZES } from "./constants";
 
diff --git a/src/components/columns/columns.tsx b/src/components/columns/columns.tsx
index 7ea47778..922fbab8 100644
--- a/src/components/columns/columns.tsx
+++ b/src/components/columns/columns.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Breakpoints } from "modifiers/responsives";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Breakpoints } from "@/modifiers/responsives";
 import { Column } from "./column";
 
 type ColumnsModifierProps = Partial<{
diff --git a/src/components/columns/constants.ts b/src/components/columns/constants.ts
index d4711aaf..ce8b034c 100644
--- a/src/components/columns/constants.ts
+++ b/src/components/columns/constants.ts
@@ -1,4 +1,4 @@
-import { tuple } from "utils";
+import { tuple } from "@/utils";
 
 export const COLUMN_SIZES = tuple(
   1,
diff --git a/src/components/container/__tests__/container.test.tsx b/src/components/container/__tests__/container.test.tsx
index d17a711c..d97e36d5 100644
--- a/src/components/container/__tests__/container.test.tsx
+++ b/src/components/container/__tests__/container.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { ResponsiveSizeProps } from "modifiers/responsives";
+import { ResponsiveSizeProps } from "@/modifiers/responsives";
 import { Container } from "../Container";
 
 describe("Container component", () => {
diff --git a/src/components/container/container.story.tsx b/src/components/container/container.story.tsx
index 267e8b71..41b251be 100644
--- a/src/components/container/container.story.tsx
+++ b/src/components/container/container.story.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Container } from "components/container";
-import { Heading } from "components/heading";
-import { Section } from "components/section";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Section } from "@/components/section";
 
 storiesOf("Container", module).add("Default", () => (
   <div>
diff --git a/src/components/container/container.tsx b/src/components/container/container.tsx
index 106b3f4c..f5a4046a 100644
--- a/src/components/container/container.tsx
+++ b/src/components/container/container.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Breakpoints } from "modifiers/responsives";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Breakpoints } from "@/modifiers/responsives";
 
 export type ContainerModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/content/content.story.tsx b/src/components/content/content.story.tsx
index c2b76e41..b0bd0637 100644
--- a/src/components/content/content.story.tsx
+++ b/src/components/content/content.story.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Content } from "components/content";
+import { Content } from "@/components/content";
 
 storiesOf("Content", module)
   .add("Default", () => (
diff --git a/src/components/content/content.tsx b/src/components/content/content.tsx
index ca7b4c11..e6d19fc7 100644
--- a/src/components/content/content.tsx
+++ b/src/components/content/content.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ContentModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/dropdown/__tests__/dropdown.test.tsx b/src/components/dropdown/__tests__/dropdown.test.tsx
index 9712c90b..b079b1de 100644
--- a/src/components/dropdown/__tests__/dropdown.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown.test.tsx
@@ -3,7 +3,7 @@ import { JSDOM } from "jsdom";
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { noop } from "utils";
+import { noop } from "@/utils";
 import { Dropdown } from "../dropdown";
 
 interface GlobalWithWindow extends NodeJS.Global {
diff --git a/src/components/dropdown/dropdown-divider.tsx b/src/components/dropdown/dropdown-divider.tsx
index dca555dc..a0364959 100644
--- a/src/components/dropdown/dropdown-divider.tsx
+++ b/src/components/dropdown/dropdown-divider.tsx
@@ -1,7 +1,7 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type DropdownDividerModifierProps = Partial<{
   className: string;
diff --git a/src/components/dropdown/dropdown-item.tsx b/src/components/dropdown/dropdown-item.tsx
index e309a347..4b456284 100644
--- a/src/components/dropdown/dropdown-item.tsx
+++ b/src/components/dropdown/dropdown-item.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 
 export interface DropdownItemModifierProps {
   active?: boolean;
diff --git a/src/components/dropdown/dropdown.story.tsx b/src/components/dropdown/dropdown.story.tsx
index 07a6fb5f..bf5019e0 100644
--- a/src/components/dropdown/dropdown.story.tsx
+++ b/src/components/dropdown/dropdown.story.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Colors } from "modifiers/colors";
+import { Colors } from "@/modifiers/colors";
 import { Dropdown } from ".";
 
 interface DropdownControllerProps {
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 345417fe..f2f02b10 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React, { PureComponent } from "react";
 
-import { Button } from "components/button";
-import { Icon } from "components/icon";
-import { classNames, clean, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Button } from "@/components/button";
+import { Icon } from "@/components/icon";
+import { classNames, clean, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 import { DropdownDivider } from "./dropdown-divider";
 import { DropdownItem } from "./dropdown-item";
 
diff --git a/src/components/element/element.tsx b/src/components/element/element.tsx
index f50b00fd..c98d9e48 100644
--- a/src/components/element/element.tsx
+++ b/src/components/element/element.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import * as React from "react";
 
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { classNames, clean, ModifierProps } from "modifiers";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type ElementProps = ModifierProps;
 
diff --git a/src/components/footer/footer.story.tsx b/src/components/footer/footer.story.tsx
index 8fcea253..cf5b96c0 100644
--- a/src/components/footer/footer.story.tsx
+++ b/src/components/footer/footer.story.tsx
@@ -1,10 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Container } from "components/container";
-import { Content } from "components/content";
-import { Footer } from "components/footer";
-import { Hero } from "components/hero";
+import { Container } from "@/components/container";
+import { Content } from "@/components/content";
+import { Footer } from "@/components/footer";
+import { Hero } from "@/components/hero";
 
 storiesOf("Footer", module).add("Default", () => (
   <Hero size={"fullheight" as "fullheignt"}>
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 5b385e49..c065649d 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type FooterModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx
index decfe62d..8999302b 100644
--- a/src/components/form/Checkbox.tsx
+++ b/src/components/form/Checkbox.tsx
@@ -1,7 +1,7 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type CheckboxModifierProps = Partial<{
   checked: boolean;
diff --git a/src/components/form/Control.tsx b/src/components/form/Control.tsx
index 8512caf3..4dffaf8a 100644
--- a/src/components/form/Control.tsx
+++ b/src/components/form/Control.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ControlModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/Field.tsx b/src/components/form/Field.tsx
index 668bdfb6..684ddf51 100644
--- a/src/components/form/Field.tsx
+++ b/src/components/form/Field.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { FieldBody } from "./field-body";
 import { FieldLabel } from "./field-label";
 
diff --git a/src/components/form/Help.tsx b/src/components/form/Help.tsx
index 9244a006..04d68836 100644
--- a/src/components/form/Help.tsx
+++ b/src/components/form/Help.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type HelpModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index f053dd6f..337e1e34 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type InputModifierProps = Partial<{
   className: string;
diff --git a/src/components/form/Label.tsx b/src/components/form/Label.tsx
index 67cd13d1..942fe0f0 100644
--- a/src/components/form/Label.tsx
+++ b/src/components/form/Label.tsx
@@ -1,7 +1,7 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type LabelModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/Radio.tsx b/src/components/form/Radio.tsx
index c29ee546..5bec2e4b 100644
--- a/src/components/form/Radio.tsx
+++ b/src/components/form/Radio.tsx
@@ -1,7 +1,7 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type RadioModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index 65247eb7..7ba7513f 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { classNames, clean, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type SelectModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/TextArea.tsx b/src/components/form/TextArea.tsx
index 22edee3a..0d9baf0d 100644
--- a/src/components/form/TextArea.tsx
+++ b/src/components/form/TextArea.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { classNames, clean, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type TextareaModifierProps = Partial<{
   className: string;
diff --git a/src/components/form/__tests__/input-file.test.tsx b/src/components/form/__tests__/input-file.test.tsx
index 288e42d6..ea3e5bfe 100644
--- a/src/components/form/__tests__/input-file.test.tsx
+++ b/src/components/form/__tests__/input-file.test.tsx
@@ -3,7 +3,7 @@ import { JSDOM } from "jsdom";
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { noop } from "utils";
+import { noop } from "@/utils";
 import { InputFile } from "../input-file";
 
 interface GlobalWithWindow extends NodeJS.Global {
diff --git a/src/components/form/field-body.tsx b/src/components/form/field-body.tsx
index d4c46475..cf58cc29 100644
--- a/src/components/form/field-body.tsx
+++ b/src/components/form/field-body.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type FieldBodyModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/field-label.tsx b/src/components/form/field-label.tsx
index 8f204611..c7f97d02 100644
--- a/src/components/form/field-label.tsx
+++ b/src/components/form/field-label.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type FieldLabelModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/form/form.story.tsx b/src/components/form/form.story.tsx
index 130169b3..52a04075 100644
--- a/src/components/form/form.story.tsx
+++ b/src/components/form/form.story.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Button } from "components/button";
+import { Button } from "@/components/button";
 import {
   Checkbox,
   Control,
@@ -13,8 +13,8 @@ import {
   Radio,
   Select,
   Textarea,
-} from "components/form";
-import { Icon } from "components/icon";
+} from "@/components/form";
+import { Icon } from "@/components/icon";
 
 // tslint:disable:max-classes-per-file
 
diff --git a/src/components/form/input-file.tsx b/src/components/form/input-file.tsx
index ec347254..b908b540 100644
--- a/src/components/form/input-file.tsx
+++ b/src/components/form/input-file.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
-import { noop } from "utils";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
+import { noop } from "@/utils";
 
 export type InputFileModifierProps = Partial<{
   boxed: boolean;
diff --git a/src/components/heading/heading.story.tsx b/src/components/heading/heading.story.tsx
index b19100fc..7bbbc02a 100644
--- a/src/components/heading/heading.story.tsx
+++ b/src/components/heading/heading.story.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Box } from "components/box";
-import { Heading } from "components/heading";
+import { Box } from "@/components/box";
+import { Heading } from "@/components/heading";
 
 storiesOf("Heading", module).add("Default", () => (
   <div>
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index 25acf867..be559748 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type HeadingModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/hero/__tests__/hero.test.tsx b/src/components/hero/__tests__/hero.test.tsx
index 4e6d9623..b538e7ce 100644
--- a/src/components/hero/__tests__/hero.test.tsx
+++ b/src/components/hero/__tests__/hero.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { COLORS } from "modifiers/colors";
+import { COLORS } from "@/modifiers/colors";
 import { Hero } from "../Hero";
 
 describe("Hero component", () => {
diff --git a/src/components/hero/hero-body.tsx b/src/components/hero/hero-body.tsx
index c6abdfab..7d1cf8a6 100644
--- a/src/components/hero/hero-body.tsx
+++ b/src/components/hero/hero-body.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type HeroBodyModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/hero/hero-footer.tsx b/src/components/hero/hero-footer.tsx
index 16d574cf..5a26b64a 100644
--- a/src/components/hero/hero-footer.tsx
+++ b/src/components/hero/hero-footer.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type HeroFooterModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/hero/hero-head.tsx b/src/components/hero/hero-head.tsx
index cd5285e7..c43b341c 100644
--- a/src/components/hero/hero-head.tsx
+++ b/src/components/hero/hero-head.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type HeroHeadModifierProps = Partial<{
   children?: React.ReactNode;
diff --git a/src/components/hero/hero.story.tsx b/src/components/hero/hero.story.tsx
index 7f8e98a4..e8228cd0 100644
--- a/src/components/hero/hero.story.tsx
+++ b/src/components/hero/hero.story.tsx
@@ -2,10 +2,10 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Container } from "components/container";
-import { Heading } from "components/heading";
-import { Hero } from "components/hero";
-import { Section } from "components/section";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Hero } from "@/components/hero";
+import { Section } from "@/components/section";
 
 storiesOf("Hero", module)
   .add("Default with color", () => (
diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
index 01c7cc54..f4bc03c2 100644
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 import { HeroBody } from "./hero-body";
 import { HeroFooter } from "./hero-footer";
 import { HeroHead } from "./hero-head";
diff --git a/src/components/icon/icon.story.tsx b/src/components/icon/icon.story.tsx
index 772eec02..a3513f02 100644
--- a/src/components/icon/icon.story.tsx
+++ b/src/components/icon/icon.story.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Icon } from "components/icon";
+import { Icon } from "@/components/icon";
 
 storiesOf("Icon", module)
   .add("Default", () => (
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index dfac3e53..14ba694c 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { classNames, clean, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type IconModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/image/constants.ts b/src/components/image/constants.ts
index c7b24f77..ee4179f0 100644
--- a/src/components/image/constants.ts
+++ b/src/components/image/constants.ts
@@ -1,4 +1,4 @@
-import { tuple } from "utils";
+import { tuple } from "@/utils";
 
 export const IMAGE_SIZES = tuple(
   16,
diff --git a/src/components/image/image.story.tsx b/src/components/image/image.story.tsx
index bf6c6f73..6c995d2e 100644
--- a/src/components/image/image.story.tsx
+++ b/src/components/image/image.story.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Image } from "components/image";
-import { Table } from "components/table";
+import { Image } from "@/components/image";
+import { Table } from "@/components/table";
 import { IMAGE_SIZES } from "./constants";
 
 storiesOf("Image", module)
diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index 7057133f..e2086f3f 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { ImageSizes } from "./constants";
 
 export type ImageModifierProps = Partial<{
diff --git a/src/components/level/level-item.tsx b/src/components/level/level-item.tsx
index 1a0cc627..b518ba43 100644
--- a/src/components/level/level-item.tsx
+++ b/src/components/level/level-item.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type LevelItemModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/level/level-side.tsx b/src/components/level/level-side.tsx
index 706e0cf2..0486eb3e 100644
--- a/src/components/level/level-side.tsx
+++ b/src/components/level/level-side.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type LevelSideModifierProps = Partial<{
   align: string;
diff --git a/src/components/level/level.story.tsx b/src/components/level/level.story.tsx
index f31db362..4a32dc8f 100644
--- a/src/components/level/level.story.tsx
+++ b/src/components/level/level.story.tsx
@@ -2,14 +2,14 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Box } from "components/box";
-import { Button } from "components/button";
-import { Container } from "components/container";
-import { Control, Field, Input } from "components/form";
-import { Heading } from "components/heading";
-import { Hero } from "components/hero";
-import { Level } from "components/level";
-import { Section } from "components/section";
+import { Box } from "@/components/box";
+import { Button } from "@/components/button";
+import { Container } from "@/components/container";
+import { Control, Field, Input } from "@/components/form";
+import { Heading } from "@/components/heading";
+import { Hero } from "@/components/hero";
+import { Level } from "@/components/level";
+import { Section } from "@/components/section";
 
 const style = { textAlign: "center" };
 
diff --git a/src/components/level/level.tsx b/src/components/level/level.tsx
index 8010fb8b..1f1bf2ac 100644
--- a/src/components/level/level.tsx
+++ b/src/components/level/level.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Breakpoints } from "modifiers/responsives";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Breakpoints } from "@/modifiers/responsives";
 import { LevelItem } from "./level-item";
 import { LevelSide } from "./level-side";
 
diff --git a/src/components/loader/loader.story.tsx b/src/components/loader/loader.story.tsx
index d3692b18..b20e5b25 100644
--- a/src/components/loader/loader.story.tsx
+++ b/src/components/loader/loader.story.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Loader } from "components/loader";
+import { Loader } from "@/components/loader";
 import "./loader.story.sass";
 
 storiesOf("Loader", module)
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index a2479dfe..4e4279e4 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type LoaderModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/media/media-content.tsx b/src/components/media/media-content.tsx
index 05926566..00eaf39b 100644
--- a/src/components/media/media-content.tsx
+++ b/src/components/media/media-content.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type MediaContentModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/media/media-item.tsx b/src/components/media/media-item.tsx
index d791404e..e85f4832 100644
--- a/src/components/media/media-item.tsx
+++ b/src/components/media/media-item.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type MediaItemModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/media/media.story.tsx b/src/components/media/media.story.tsx
index f964ad92..418bfdd9 100644
--- a/src/components/media/media.story.tsx
+++ b/src/components/media/media.story.tsx
@@ -2,14 +2,14 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { Box } from "components/box";
-import { Button } from "components/button";
-import { Content } from "components/content";
-import { Control, Field, Textarea } from "components/form";
-import { Image } from "components/image";
-import { Level } from "components/level";
-import { Media } from "components/media";
-import { Section } from "components/section";
+import { Box } from "@/components/box";
+import { Button } from "@/components/button";
+import { Content } from "@/components/content";
+import { Control, Field, Textarea } from "@/components/form";
+import { Image } from "@/components/image";
+import { Level } from "@/components/level";
+import { Media } from "@/components/media";
+import { Section } from "@/components/section";
 
 const style = { background: "#e6e6e6", width: 64, height: 64 };
 
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index 52921735..d43796a3 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { MediaContent } from "./media-content";
 import { MediaItem } from "./media-item";
 
diff --git a/src/components/menu/menu-list-item.tsx b/src/components/menu/menu-list-item.tsx
index ad50c73c..3e73a492 100644
--- a/src/components/menu/menu-list-item.tsx
+++ b/src/components/menu/menu-list-item.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { MenuList } from "./menu-list";
 
 export type MenuListItemModifierProps = Partial<{
diff --git a/src/components/menu/menu-list.tsx b/src/components/menu/menu-list.tsx
index b1536e5b..fa889130 100644
--- a/src/components/menu/menu-list.tsx
+++ b/src/components/menu/menu-list.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 import { MenuListItem } from "./menu-list-item";
 
 export type MenuListModifierProps = Partial<{
diff --git a/src/components/menu/menu.story.tsx b/src/components/menu/menu.story.tsx
index bb711e2c..7b32f0c1 100644
--- a/src/components/menu/menu.story.tsx
+++ b/src/components/menu/menu.story.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Menu } from "components/menu";
+import { Menu } from "@/components/menu";
 
 storiesOf("Menu", module).add("Default", () => (
   <Menu>
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 1c066c8a..ff0a7341 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { MenuList } from "./menu-list";
 
 export type MenuProps = ModifierProps;
diff --git a/src/components/message/message-body.tsx b/src/components/message/message-body.tsx
index 000c419c..bf046bf4 100644
--- a/src/components/message/message-body.tsx
+++ b/src/components/message/message-body.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type MessageBoodyModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/message/message-header.tsx b/src/components/message/message-header.tsx
index 5e02c231..993bfb35 100644
--- a/src/components/message/message-header.tsx
+++ b/src/components/message/message-header.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type MessageHeaderModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/message/message.story.tsx b/src/components/message/message.story.tsx
index 5d70061f..0672a82b 100644
--- a/src/components/message/message.story.tsx
+++ b/src/components/message/message.story.tsx
@@ -1,8 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Button } from "components/button";
-import { Message } from "components/message";
+import { Button } from "@/components/button";
+import { Message } from "@/components/message";
 
 storiesOf("Message", module)
   .add("Default", () => (
diff --git a/src/components/message/message.tsx b/src/components/message/message.tsx
index cf788165..02c5aaa5 100644
--- a/src/components/message/message.tsx
+++ b/src/components/message/message.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 import { MessageBody } from "./message-body";
 import { MessageHeader } from "./message-header";
 
diff --git a/src/components/modal/__tests__/modal.test.tsx b/src/components/modal/__tests__/modal.test.tsx
index 4cce3e67..9c6acf52 100644
--- a/src/components/modal/__tests__/modal.test.tsx
+++ b/src/components/modal/__tests__/modal.test.tsx
@@ -3,7 +3,7 @@ import { JSDOM } from "jsdom";
 import React from "react";
 import { renderToString } from "react-dom/server";
 
-import { noop } from "utils";
+import { noop } from "@/utils";
 import { Modal, ModalProps } from "../modal";
 
 type GlobalWithWindow = NodeJS.Global & { window?: JSDOM["window"] };
diff --git a/src/components/modal/modal-card-body.tsx b/src/components/modal/modal-card-body.tsx
index 0cdc038e..5cab3fcc 100644
--- a/src/components/modal/modal-card-body.tsx
+++ b/src/components/modal/modal-card-body.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ModalCardBodyModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/modal/modal-card-foot.tsx b/src/components/modal/modal-card-foot.tsx
index b70b9906..8eda0022 100644
--- a/src/components/modal/modal-card-foot.tsx
+++ b/src/components/modal/modal-card-foot.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ModalCardFootModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/modal/modal-card-head.tsx b/src/components/modal/modal-card-head.tsx
index 37500984..bceaa59a 100644
--- a/src/components/modal/modal-card-head.tsx
+++ b/src/components/modal/modal-card-head.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Button } from "components/button";
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Button } from "@/components/button";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ModalCardHeadModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/modal/modal-card-title.tsx b/src/components/modal/modal-card-title.tsx
index c452eddb..2f42bc9f 100644
--- a/src/components/modal/modal-card-title.tsx
+++ b/src/components/modal/modal-card-title.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ModalCardTitleModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/modal/modal-card.tsx b/src/components/modal/modal-card.tsx
index 52ae03e8..3c106676 100644
--- a/src/components/modal/modal-card.tsx
+++ b/src/components/modal/modal-card.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 import { ModalCardBody } from "./modal-card-body";
 import { ModalCardFoot } from "./modal-card-foot";
 import { ModalCardHead } from "./modal-card-head";
diff --git a/src/components/modal/modal-content.tsx b/src/components/modal/modal-content.tsx
index d2eea59e..d868e67e 100644
--- a/src/components/modal/modal-content.tsx
+++ b/src/components/modal/modal-content.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type ModalContentModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/modal/modal.story.tsx b/src/components/modal/modal.story.tsx
index 73750cec..687a5b0d 100644
--- a/src/components/modal/modal.story.tsx
+++ b/src/components/modal/modal.story.tsx
@@ -1,13 +1,13 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Button } from "components/button";
-import { Content } from "components/content";
-import { Image } from "components/image";
-import { Level } from "components/level";
-import { Media } from "components/media";
-import { Modal } from "components/modal";
-import { Section } from "components/section";
+import { Button } from "@/components/button";
+import { Content } from "@/components/content";
+import { Image } from "@/components/image";
+import { Level } from "@/components/level";
+import { Media } from "@/components/media";
+import { Modal } from "@/components/modal";
+import { Section } from "@/components/section";
 
 interface OpenModalProps {
   modal?: {};
diff --git a/src/components/navbar/navbar-brand.tsx b/src/components/navbar/navbar-brand.tsx
index 23d5ba8d..7bceecc9 100644
--- a/src/components/navbar/navbar-brand.tsx
+++ b/src/components/navbar/navbar-brand.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarBrandModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/navbar/navbar-burger.tsx b/src/components/navbar/navbar-burger.tsx
index f36ec1d5..f8221752 100644
--- a/src/components/navbar/navbar-burger.tsx
+++ b/src/components/navbar/navbar-burger.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { classNames, clean, ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 import { NavbarContext } from "./navbar-context";
 
 export type NavbarBurgerModifierProps = Partial<{
diff --git a/src/components/navbar/navbar-container.tsx b/src/components/navbar/navbar-container.tsx
index 63055289..9021fc02 100644
--- a/src/components/navbar/navbar-container.tsx
+++ b/src/components/navbar/navbar-container.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarContainerModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/navbar/navbar-context.tsx b/src/components/navbar/navbar-context.tsx
index d203c742..7ab43b07 100644
--- a/src/components/navbar/navbar-context.tsx
+++ b/src/components/navbar/navbar-context.tsx
@@ -1,5 +1,5 @@
+import { noop } from "@/utils";
 import React from "react";
-import { noop } from "utils";
 
 export interface NavbarContextState {
   active: boolean;
diff --git a/src/components/navbar/navbar-divider.tsx b/src/components/navbar/navbar-divider.tsx
index 987fcb2b..78182266 100644
--- a/src/components/navbar/navbar-divider.tsx
+++ b/src/components/navbar/navbar-divider.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarDividerModifierProps = Partial<{
   className: string;
diff --git a/src/components/navbar/navbar-dropdown.tsx b/src/components/navbar/navbar-dropdown.tsx
index cd19921a..b806ab32 100644
--- a/src/components/navbar/navbar-dropdown.tsx
+++ b/src/components/navbar/navbar-dropdown.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarDropdownModifierProps = Partial<{
   boxed: boolean;
diff --git a/src/components/navbar/navbar-item.tsx b/src/components/navbar/navbar-item.tsx
index b834d80b..65579624 100644
--- a/src/components/navbar/navbar-item.tsx
+++ b/src/components/navbar/navbar-item.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarItemModifierProps = Partial<{
   active: boolean;
diff --git a/src/components/navbar/navbar-link.tsx b/src/components/navbar/navbar-link.tsx
index 446a8ac0..6ea3403f 100644
--- a/src/components/navbar/navbar-link.tsx
+++ b/src/components/navbar/navbar-link.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type NavbarLinkModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/navbar/navbar-menu.tsx b/src/components/navbar/navbar-menu.tsx
index bd027512..06c4c18a 100644
--- a/src/components/navbar/navbar-menu.tsx
+++ b/src/components/navbar/navbar-menu.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 import { NavbarContext } from "./navbar-context";
 
 export type NavbarMenuModifierProps = Partial<{
diff --git a/src/components/navbar/navbar.story.tsx b/src/components/navbar/navbar.story.tsx
index 2d179bda..6d0d2ddd 100644
--- a/src/components/navbar/navbar.story.tsx
+++ b/src/components/navbar/navbar.story.tsx
@@ -2,8 +2,8 @@ import { boolean, select } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Navbar } from "components/navbar";
-import { COLORS } from "modifiers/colors";
+import { Navbar } from "@/components/navbar";
+import { COLORS } from "@/modifiers/colors";
 
 const makeColorSelect = () =>
   select(
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 492b7e85..3aa51fb7 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,11 +1,11 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { classNames, ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
-import { canUseDOM } from "utils";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { classNames, ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
+import { canUseDOM } from "@/utils";
 import { NavbarBrand } from "./navbar-brand";
 import { NavbarBurger } from "./navbar-burger";
 import { NavbarContainer } from "./navbar-container";
diff --git a/src/components/notification/__tests__/notification.test.tsx b/src/components/notification/__tests__/notification.test.tsx
index 45824477..39531d6f 100644
--- a/src/components/notification/__tests__/notification.test.tsx
+++ b/src/components/notification/__tests__/notification.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { COLORS } from "modifiers/colors";
+import { COLORS } from "@/modifiers/colors";
 import { Notification } from "../notification";
 
 describe("Notification component", () => {
diff --git a/src/components/notification/notification.story.tsx b/src/components/notification/notification.story.tsx
index 638a5c1c..ce0c13f0 100644
--- a/src/components/notification/notification.story.tsx
+++ b/src/components/notification/notification.story.tsx
@@ -1,9 +1,9 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Button } from "components/button";
-import { Notification } from "components/notification";
-import { Section } from "components/section";
+import { Button } from "@/components/button";
+import { Notification } from "@/components/notification";
+import { Section } from "@/components/section";
 
 storiesOf("Notification", module).add("Default", () => (
   <Section>
diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx
index 2b905cd0..6bb5860e 100644
--- a/src/components/notification/notification.tsx
+++ b/src/components/notification/notification.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type NotificationModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index e67a5a58..a949409d 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
-import { noop } from "utils";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
+import { noop } from "@/utils";
 
 export type PaginationModifierProps = Partial<{
   autoHide: boolean;
diff --git a/src/components/panel/panel-block.tsx b/src/components/panel/panel-block.tsx
index ac14dc23..4ecb1437 100644
--- a/src/components/panel/panel-block.tsx
+++ b/src/components/panel/panel-block.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type PanelBlockModifierProps = Partial<{
   active: boolean;
diff --git a/src/components/panel/panel-header.tsx b/src/components/panel/panel-header.tsx
index ab34c42e..9c4c279d 100644
--- a/src/components/panel/panel-header.tsx
+++ b/src/components/panel/panel-header.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type PanelHeaderProps = ModifierProps;
 
diff --git a/src/components/panel/panel-icon.tsx b/src/components/panel/panel-icon.tsx
index c919f624..97c7c3eb 100644
--- a/src/components/panel/panel-icon.tsx
+++ b/src/components/panel/panel-icon.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type PanelIconProps = ModifierProps;
 
diff --git a/src/components/panel/panel-tabs-tab.tsx b/src/components/panel/panel-tabs-tab.tsx
index 848807a2..a7666e68 100644
--- a/src/components/panel/panel-tabs-tab.tsx
+++ b/src/components/panel/panel-tabs-tab.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type PanelTabsTabModifierProps = Partial<{
   active: boolean;
diff --git a/src/components/panel/panel-tabs.tsx b/src/components/panel/panel-tabs.tsx
index f35047c2..b79dace2 100644
--- a/src/components/panel/panel-tabs.tsx
+++ b/src/components/panel/panel-tabs.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { PanelTabsTab } from "./panel-tabs-tab";
 
 export type PanelTabsProps = ModifierProps;
diff --git a/src/components/panel/panel.story.tsx b/src/components/panel/panel.story.tsx
index db9b44b5..65007ce3 100644
--- a/src/components/panel/panel.story.tsx
+++ b/src/components/panel/panel.story.tsx
@@ -1,10 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Button } from "components/button";
-import { Checkbox, Control, Input } from "components/form";
-import { Icon } from "components/icon";
-import { Panel } from "components/panel";
+import { Button } from "@/components/button";
+import { Checkbox, Control, Input } from "@/components/form";
+import { Icon } from "@/components/icon";
+import { Panel } from "@/components/panel";
 
 storiesOf("Panel", module)
   .addDecorator(story => <div style={{ margin: 10 }}>{story()}</div>)
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index a6085e71..cba884de 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { PanelBlock } from "./panel-block";
 import { PanelHeader } from "./panel-header";
 import { PanelIcon } from "./panel-icon";
diff --git a/src/components/progress/__tests__/progress.test.tsx b/src/components/progress/__tests__/progress.test.tsx
index 5b6dad0a..dcec2802 100644
--- a/src/components/progress/__tests__/progress.test.tsx
+++ b/src/components/progress/__tests__/progress.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { COLORS } from "modifiers/colors";
+import { COLORS } from "@/modifiers/colors";
 import { Progress } from "../progress";
 
 describe("Progress component", () => {
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index e8b1673c..be0f4853 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type ProgressModifierProps = Partial<{
   className: string;
diff --git a/src/components/section/section.story.tsx b/src/components/section/section.story.tsx
index 15176c1e..f602d7ab 100644
--- a/src/components/section/section.story.tsx
+++ b/src/components/section/section.story.tsx
@@ -1,8 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Container } from "components/container";
-import { Heading } from "components/heading";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
 import { Section } from "../section";
 
 storiesOf("Section", module)
diff --git a/src/components/section/section.tsx b/src/components/section/section.tsx
index ba319a5c..22350256 100644
--- a/src/components/section/section.tsx
+++ b/src/components/section/section.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type SectionModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/components/table/table.story.tsx b/src/components/table/table.story.tsx
index efe23352..4b20a298 100644
--- a/src/components/table/table.story.tsx
+++ b/src/components/table/table.story.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Table } from "components/table";
+import { Table } from "@/components/table";
 
 storiesOf("Table", module).add("Default", () => (
   <Table>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 7f242d85..8cb83a20 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,8 +1,8 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { ModifierProps } from "@/modifiers";
 
 export type TableModifierProps = Partial<{
   bordered: boolean;
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index e32dd528..efbd14ad 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 
 export type TabsTabModifierProps = Partial<{
   active: boolean;
diff --git a/src/components/tabs/tabs.story.tsx b/src/components/tabs/tabs.story.tsx
index 69a72ac2..e7195420 100644
--- a/src/components/tabs/tabs.story.tsx
+++ b/src/components/tabs/tabs.story.tsx
@@ -2,7 +2,7 @@ import { boolean, select } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Tabs } from "components/tabs";
+import { Tabs } from "@/components/tabs";
 
 // https://github.com/storybooks/storybook/issues/4865
 const alignSelectOptions = ({
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index e49bf4c9..c35273ae 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -1,9 +1,9 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
 import { Tab } from "./tab";
 
 export type TabsModifierProps = Partial<{
diff --git a/src/components/tag/__tests__/tag.test.tsx b/src/components/tag/__tests__/tag.test.tsx
index 6e805d34..b4a1d440 100644
--- a/src/components/tag/__tests__/tag.test.tsx
+++ b/src/components/tag/__tests__/tag.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { COLORS } from "modifiers/colors";
+import { COLORS } from "@/modifiers/colors";
 import { Tag } from "../tag";
 
 describe("Tag component", () => {
diff --git a/src/components/tag/tag-group.tsx b/src/components/tag/tag-group.tsx
index dcb3eb82..d9d265af 100644
--- a/src/components/tag/tag-group.tsx
+++ b/src/components/tag/tag-group.tsx
@@ -1,7 +1,7 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { classNames, clean, ModifierProps } from "modifiers";
+import { classNames, clean, ModifierProps } from "@/modifiers";
 
 export type TagGroupModifierProps = Partial<{
   gapless: boolean;
diff --git a/src/components/tag/tag.story.tsx b/src/components/tag/tag.story.tsx
index efd3ba83..6f7cd9b2 100644
--- a/src/components/tag/tag.story.tsx
+++ b/src/components/tag/tag.story.tsx
@@ -1,8 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Control, Field } from "components/form";
-import { Tag } from "components/tag";
+import { Control, Field } from "@/components/form";
+import { Tag } from "@/components/tag";
 
 storiesOf("Tag", module)
   .addDecorator(story => <div style={{ margin: 10 }}>{story()}</div>)
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
index 11e1f39c..a516f3b3 100644
--- a/src/components/tag/tag.tsx
+++ b/src/components/tag/tag.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 import { TagGroup } from "./tag-group";
 
 export type TagModifierProps = Partial<{
diff --git a/src/components/tile/__tests__/tile.test.tsx b/src/components/tile/__tests__/tile.test.tsx
index 261853ae..910c794a 100644
--- a/src/components/tile/__tests__/tile.test.tsx
+++ b/src/components/tile/__tests__/tile.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { COLORS } from "modifiers/colors";
+import { COLORS } from "@/modifiers/colors";
 import { Tile } from "../tile";
 
 describe("Tile component", () => {
diff --git a/src/components/tile/tile.story.tsx b/src/components/tile/tile.story.tsx
index c7b3d155..3ab40733 100644
--- a/src/components/tile/tile.story.tsx
+++ b/src/components/tile/tile.story.tsx
@@ -1,11 +1,11 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Box } from "components/box";
-import { Heading } from "components/heading";
-import { Image } from "components/image";
-import { Section } from "components/section";
-import { Tile } from "components/tile";
+import { Box } from "@/components/box";
+import { Heading } from "@/components/heading";
+import { Image } from "@/components/image";
+import { Section } from "@/components/section";
+import { Tile } from "@/components/tile";
 
 storiesOf("Tile", module).add("Default", () => (
   <Section>
diff --git a/src/components/tile/tile.tsx b/src/components/tile/tile.tsx
index 84d144d6..51ed3bb1 100644
--- a/src/components/tile/tile.tsx
+++ b/src/components/tile/tile.tsx
@@ -1,10 +1,10 @@
 import { cx } from "emotion";
 import React from "react";
 
-import { Element } from "components/element";
-import { renderAsExoticComponent } from "components/render-as-exotic-component";
-import { ModifierProps } from "modifiers";
-import { Colors } from "modifiers/colors";
+import { Element } from "@/components/element";
+import { renderAsExoticComponent } from "@/components/render-as-exotic-component";
+import { ModifierProps } from "@/modifiers";
+import { Colors } from "@/modifiers/colors";
 
 export type TileModifierProps = Partial<{
   children: React.ReactNode;
diff --git a/src/index.mdx b/src/index.mdx
deleted file mode 100644
index c9d11fc2..00000000
--- a/src/index.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Getting Started
-route: /
----
-
-# Getting Started
-
-Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
-
-Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
-
-- **It’s consistent**. The way components are built and managed follows a predictable pattern.
-- **It’s self-contained**. Your design system is treated as a standalone dependency.
-- **It’s reusable**. You’ve built components so they can be reused in many contexts.
-- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
-- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
-
-## Consistency
-
-Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
\ No newline at end of file
diff --git a/src/modifiers/colors.ts b/src/modifiers/colors.ts
index eae1d7f4..61f0b6bf 100644
--- a/src/modifiers/colors.ts
+++ b/src/modifiers/colors.ts
@@ -1,6 +1,6 @@
+import { tuple } from "@/utils";
 import { cx } from "emotion";
 import { ComponentProps } from "react";
-import { tuple } from "utils";
 
 export const COLORS = tuple(
   "primary",
diff --git a/src/modifiers/responsives.ts b/src/modifiers/responsives.ts
index d2aa2a15..2fb4f5ce 100644
--- a/src/modifiers/responsives.ts
+++ b/src/modifiers/responsives.ts
@@ -1,6 +1,6 @@
+import { tuple } from "@/utils";
 import { cx } from "emotion";
 import { ComponentProps } from "react";
-import { tuple } from "utils";
 
 export const BREAKPOINTS = tuple(
   "mobile",
diff --git a/tsconfig.json b/tsconfig.json
index eb8bdaa0..249e7a4a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "src",
+    "baseUrl": ".",
     "declaration": true,
     "emitDecoratorMetadata": true,
     "esModuleInterop": true,
@@ -17,6 +17,9 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "outDir": "build/lib",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "rootDirs": ["src"],
     "sourceMap": true,
     "strictNullChecks": true,