From 2e8719ae4119d44d232a0bcdd365810fbc98cf9a Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Wed, 30 Jun 2021 11:59:33 +0300
Subject: [PATCH 1/5] pass icon path, install other plugins inside index (#240)

* pass icon path, install other plugins inside index

* up version to 0.9.12

* update Readme

* refactoring

* update Readme

* move vue-i18n to dependencies

* remove i style

* refactoring

* prepare for test build

* update readme

* uncomment json-input
---
 README.md                           |  24 ++++++
 package.json                        |   4 +-
 src/components/Input/SJsonInput.vue |   7 +-
 src/components/index.ts             |   8 +-
 src/index.ts                        | 117 +++++++++++++++-------------
 src/plugins/elementUI.ts            |  24 +++---
 src/plugins/index.ts                |   3 +-
 src/plugins/jsonUI.ts               |   4 -
 src/styles/collapse.scss            |   2 +-
 src/styles/common.scss              |   4 +-
 src/styles/datepicker.scss          |   2 +-
 src/styles/fonts.scss               |   6 +-
 src/styles/icons.scss               |   3 +-
 src/styles/index.scss               |   1 +
 src/styles/index.ts                 |   1 -
 src/styles/input.scss               |   2 +-
 src/styles/json-input.scss          |   8 +-
 src/styles/root.scss                |  20 +++--
 src/styles/scroll-sections.scss     |   2 +-
 src/styles/select.scss              |   4 +-
 src/styles/table.scss               |   2 +-
 src/styles/variables.scss           |  19 +++--
 tsconfig.json                       |   1 +
 23 files changed, 157 insertions(+), 111 deletions(-)
 delete mode 100644 src/plugins/jsonUI.ts
 delete mode 100644 src/styles/index.ts

diff --git a/README.md b/README.md
index 3cf61576..003b27c4 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,30 @@
 yarn install
 ```
 
+## Font variables setup
+Required!: Add scss font variables to your project
+
+```
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
+```
+
+## Custom components, directives setup
+Import "Components" enum from library, and pass the list of needed components to SoramitsuElements options
+
+Note: Without customization all library components and directives are registering global
+
+```
+import Vue from 'vue'
+import SoramitsuElements, { Components, Directives } from '@soramitsu/soramitsu-js-ui'
+
+Vue.use(SoramitsuElements, {
+  components: [Components.Button, Components.Input],
+  directives: [Directives.Float]
+})
+```
+
 ### Compiles and hot-reloads storybook with components for development
 ```
 yarn storybook:serve
diff --git a/package.json b/package.json
index 6ea348a8..166b8858 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -32,6 +32,7 @@
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^9.1.2",
     "vuex": "^3.1.3",
     "vuex-class": "^0.3.2"
@@ -83,7 +84,6 @@
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
-    "vue-i18n": "^8.11.2",
     "vue-router": "^3.3.4",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
index 41259f0b..5af0417f 100644
--- a/src/components/Input/SJsonInput.vue
+++ b/src/components/Input/SJsonInput.vue
@@ -30,8 +30,13 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 import isEmpty from 'lodash/fp/isEmpty'
+import VJsoneditor from 'v-jsoneditor'
 
-@Component
+@Component({
+  components: {
+    VJsoneditor
+  }
+})
 export default class SJsonInput extends Vue {
   /**
    * Value of JSON input. Could be used with `v-model`
diff --git a/src/components/index.ts b/src/components/index.ts
index b2f4448c..7663ae69 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,9 @@
-import '../plugins'
-import '../styles'
+import Vue from 'vue'
+
 import '../styles/index.scss'
 
+import { ElementUIPlugin } from '../plugins'
+
 import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
 import { SBreadcrumb, SBreadcrumbItem } from './Breadcrumb'
@@ -34,6 +36,8 @@ import { STab, STabs } from './Tab'
 import { STable, SHierarchicalTable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
+Vue.use(ElementUIPlugin)
+
 export {
   SApp,
   SAside,
diff --git a/src/index.ts b/src/index.ts
index 9f43d725..ee8dead2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -50,6 +50,7 @@ import {
   STableColumn,
   STooltip
 } from './components'
+
 import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
@@ -60,61 +61,59 @@ import { Themes } from './utils/Theme'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 import { SDialogMixin } from './mixins'
 
-const components = [
-  { component: SApp, name: Components.SApp },
-  { component: SAside, name: Components.SAside },
-  { component: SBreadcrumb, name: Components.SBreadcrumb },
-  { component: SBreadcrumbItem, name: Components.SBreadcrumbItem },
-  { component: SButton, name: Components.SButton },
-  { component: SButtonGroup, name: Components.SButtonGroup },
-  { component: SCard, name: Components.SCard },
-  { component: SCheckbox, name: Components.SCheckbox },
-  { component: SCol, name: Components.SCol },
-  { component: SCollapse, name: Components.SCollapse },
-  { component: SCollapseItem, name: Components.SCollapseItem },
-  { component: SContainer, name: Components.SContainer },
-  { component: SDatePicker, name: Components.SDatePicker },
-  { component: SDesignSystemProvider, name: Components.SDesignSystemProvider },
-  { component: SDialog, name: Components.SDialog },
-  { component: SDivider, name: Components.SDivider },
-  { component: SDropdown, name: Components.SDropdown },
-  { component: SDropdownItem, name: Components.SDropdownItem },
-  { component: SFooter, name: Components.SFooter },
-  { component: SForm, name: Components.SForm },
-  { component: SFormItem, name: Components.SFormItem },
-  { component: SHeader, name: Components.SHeader },
-  { component: SIcon, name: Components.SIcon },
-  { component: SInput, name: Components.SInput },
-  { component: SFloatInput, name: Components.SFloatInput },
-  { component: SJsonInput, name: Components.SJsonInput },
-  { component: SMain, name: Components.SMain },
-  { component: SMenu, name: Components.SMenu },
-  { component: SMenuItem, name: Components.SMenuItem },
-  { component: SMenuItemGroup, name: Components.SMenuItemGroup },
-  { component: SOption, name: Components.SOption },
-  { component: SOptionGroup, name: Components.SOptionGroup },
-  { component: SPagination, name: Components.SPagination },
-  { component: SRadio, name: Components.SRadio },
-  { component: SRadioGroup, name: Components.SRadioGroup },
-  { component: SRow, name: Components.SRow },
-  { component: SScrollSectionItem, name: Components.SScrollSectionItem },
-  { component: SScrollSections, name: Components.SScrollSections },
-  { component: SSelect, name: Components.SSelect },
-  { component: SSlider, name: Components.SSlider },
-  { component: SSubmenu, name: Components.SSubmenu },
-  { component: SSwitch, name: Components.SSwitch },
-  { component: STab, name: Components.STab },
-  { component: STabs, name: Components.STabs },
-  { component: STable, name: Components.STable },
-  { component: SHierarchicalTable, name: Components.SHierarchicalTable },
-  { component: STableColumn, name: Components.STableColumn },
-  { component: STooltip, name: Components.STooltip }
-]
+const libraryComponentsMap = {
+  [Components.SApp]: SApp,
+  [Components.SAside]: SAside,
+  [Components.SBreadcrumb]: SBreadcrumb,
+  [Components.SBreadcrumbItem]: SBreadcrumbItem,
+  [Components.SButton]: SButton,
+  [Components.SButtonGroup]: SButtonGroup,
+  [Components.SCard]: SCard,
+  [Components.SCheckbox]: SCheckbox,
+  [Components.SCol]: SCol,
+  [Components.SCollapse]: SCollapse,
+  [Components.SCollapseItem]: SCollapseItem,
+  [Components.SContainer]: SContainer,
+  [Components.SDatePicker]: SDatePicker,
+  [Components.SDesignSystemProvider]: SDesignSystemProvider,
+  [Components.SDialog]: SDialog,
+  [Components.SDivider]: SDivider,
+  [Components.SDropdown]: SDropdown,
+  [Components.SDropdownItem]: SDropdownItem,
+  [Components.SFooter]: SFooter,
+  [Components.SForm]: SForm,
+  [Components.SFormItem]: SFormItem,
+  [Components.SHeader]: SHeader,
+  [Components.SIcon]: SIcon,
+  [Components.SFloatInput]: SFloatInput,
+  [Components.SJsonInput]: SJsonInput,
+  [Components.SMain]: SMain,
+  [Components.SMenu]: SMenu,
+  [Components.SMenuItem]: SMenuItem,
+  [Components.SMenuItemGroup]: SMenuItemGroup,
+  [Components.SOption]: SOption,
+  [Components.SOptionGroup]: SOptionGroup,
+  [Components.SPagination]: SPagination,
+  [Components.SRadio]: SRadio,
+  [Components.SRadioGroup]: SRadioGroup,
+  [Components.SRow]: SRow,
+  [Components.SScrollSectionItem]: SScrollSectionItem,
+  [Components.SScrollSections]: SScrollSections,
+  [Components.SSlider]: SSlider,
+  [Components.SSubmenu]: SSubmenu,
+  [Components.SSwitch]: SSwitch,
+  [Components.STab]: STab,
+  [Components.STabs]: STabs,
+  [Components.STable]: STable,
+  [Components.SHierarchicalTable]: SHierarchicalTable,
+  [Components.STableColumn]: STableColumn,
+  [Components.STooltip]: STooltip
+}
 
-const directives = [
-  { directive: Float, name: Directives.Float },
-  { directive: Integer, name: Directives.Integer }
-]
+const libraryDirectivesMap = {
+  [Directives.Float]: Float,
+  [Directives.Integer]: Integer
+}
 
 const SoramitsuElements = {
   install (vue: typeof Vue, options?: any): void {
@@ -124,8 +123,12 @@ const SoramitsuElements = {
         options.store.registerModule(molude, modules[molude])
       })
     }
-    components.forEach(el => vue.component(el.name, el.component))
-    directives.forEach(item => vue.directive(item.name, item.directive))
+
+    const components: Array<string> = options && options.components ? options.components : Object.values(Components)
+    const directives: Array<string> = options && options.directives ? options.directives : Object.values(Directives)
+
+    components.forEach(item => vue.component(item, libraryComponentsMap[item]))
+    directives.forEach(item => vue.component(item, libraryDirectivesMap[item]))
   }
 }
 
@@ -138,6 +141,8 @@ export {
   Themes,
   setDesignSystem,
   DesignSystemTypes,
+  Components,
+  Directives,
   Loading,
   Message,
   MessageBox,
diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
index 0b71c0e0..3f640411 100644
--- a/src/plugins/elementUI.ts
+++ b/src/plugins/elementUI.ts
@@ -1,21 +1,27 @@
 import Vue from 'vue'
+
 import Element, {
   Loading,
   Message,
-  MessageBox as MsgBox,
+  MessageBox,
   Notification
 } from 'element-ui'
 
 import i18n from '../lang'
 
-Vue.use(Loading.directive)
-Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
-const MessageBox = MsgBox
-Vue.prototype.$loading = Loading.service
-Vue.prototype.$prompt = MessageBox.prompt
-Vue.prototype.$alert = MessageBox.alert
-Vue.prototype.$message = Message
-Vue.prototype.$notify = Notification
+const ElementUIPlugin = {
+  install: (vue: typeof Vue) => {
+    vue.use(Loading.directive)
+    vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
+    vue.prototype.$loading = Loading.service
+    vue.prototype.$prompt = MessageBox.prompt
+    vue.prototype.$alert = MessageBox.alert
+    vue.prototype.$message = Message
+    vue.prototype.$notify = Notification
+  }
+}
+
+export default ElementUIPlugin
 
 export {
   Loading,
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 9caf87fd..a8ed1733 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,2 +1 @@
-import './elementUI'
-import './jsonUI'
+export { default as ElementUIPlugin } from './elementUI'
diff --git a/src/plugins/jsonUI.ts b/src/plugins/jsonUI.ts
deleted file mode 100644
index 34ddfedb..00000000
--- a/src/plugins/jsonUI.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import VJsoneditor from 'v-jsoneditor'
-
-Vue.use(VJsoneditor)
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index c283ac2f..189240bd 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -28,7 +28,7 @@
       border-bottom-color: transparent;
     }
     .el-icon-arrow-right {
-      font-family: $s-font-family-icons;
+      font-family: var(--s-font-family-icons);
       @extend .s-icon-chevron-down-rounded-16;
       font-size: var(--s-icon-font-size-mini);
       padding: 8px;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 5f400cec..ed5c12c9 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,6 +1,6 @@
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
 }
 
 html {
@@ -32,7 +32,7 @@ h1, h2, h3, h4, h5, h6,
 .d1, .d2,
 .ch1, .ch2, .ch3,
 .p1, .p2, .p3, .p4 {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   font-feature-settings: var(--s-font-feature-settings-heading);
 }
 
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index e289ae77..0fc83efb 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -18,7 +18,7 @@
 $date-picker-padding: 8px;
 
 .s-date-picker {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   width: 100%;
   position: relative;
   &.s-big .el-input__inner {
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 71134b84..29cfd59c 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,18 +1,18 @@
 @font-face {
   font-family: "soramitsu-icons";
-  src: url("~@/assets/fonts/soramitsu-icons-1.0.0.ttf") format("truetype");
+  src: url(#{$s-font-family-icons-path}) format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 @font-face {
   font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype-variations");
+  src: url(#{$s-font-family-default-path}) format("truetype-variations");
   font-weight: 1 999;
 }
 @font-face {
   font-family: "JetBrainsMono";
-  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
+  src: url(#{$s-font-family-mono-path});
   font-weight: normal;
   font-style: normal;
 }
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 049b7745..39ae83d2 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -1,5 +1,5 @@
 [class^="s-icon-"], [class*=" s-icon-"] {
-  font-family: 'soramitsu-icons' !important;
+  font-family: var(--s-font-family-icons);
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -9,7 +9,6 @@
   -moz-osx-font-smoothing: grayscale;
   color: var(--s-color-base-content-primary);
 }
-$icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
 $s-icon-arrow-bottom-16: "\eb11";
 $s-icon-arrow-bottom-left-16: "\eb12";
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a98775f4..bfa5c946 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
 // @import "./neumorphism/theme-variables"; // uncomment to preview components with neu variables
 @import "./variables";
 @import "./element-variables";
+@import "./fonts";
 @import "./common";
 @import "./button";
 @import "./breadcrumbs";
diff --git a/src/styles/index.ts b/src/styles/index.ts
deleted file mode 100644
index 4591aad9..00000000
--- a/src/styles/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-import './fonts.scss'
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 47b03225..c60f490e 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -23,7 +23,7 @@ $input-padding-left: $s-basic-spacing * 2 - $input-border-width;
   border-color: var(--s-color-base-background);
   border-style: solid;
   border-width: $input-border-width;
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   height: $s-size-big;
   padding: $input-padding-top $input-padding-left;
   position: relative;
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 9e0689cd..9a0a3c9a 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -45,7 +45,7 @@ $footer-height: 26px;
 
 .jsoneditor {
   border: none !important;
-  font-family: $s-font-family-mono;
+  font-family: var(--s-font-family-mono);
   .jsoneditor-outer {
     height: calc(100% - #{$footer-height});
     margin-bottom: -1px !important;
@@ -53,7 +53,7 @@ $footer-height: 26px;
   }
   .ace-jsoneditor {
     *, textarea.jsoneditor-text * {
-      font-family: $s-font-family-mono;
+      font-family: var(--s-font-family-mono);
     }
     .ace_fold {
       border: none;
@@ -114,10 +114,10 @@ $footer-height: 26px;
   }
   .ace_editor .ace_content,
   .ace_gutter .ace_gutter-cell {
-    font-family: $s-font-family-mono;
+    font-family: var(--s-font-family-mono);
   }
   .ace_tooltip {
-    font-family: $s-font-family-default;
+    font-family: var(--s-font-family-default);
     background: var(--s-color-base-content-primary);
     border-color: var(--s-color-base-content-primary);
     color: var(--s-color-base-on-accent);
diff --git a/src/styles/root.scss b/src/styles/root.scss
index c6cd697e..b3956a8d 100644
--- a/src/styles/root.scss
+++ b/src/styles/root.scss
@@ -29,6 +29,10 @@
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Fonts
+  --s-font-family-default: #{$s-font-family-default};
+  --s-font-family-mono: #{$s-font-family-mono};
+  --s-font-family-icons: #{$s-font-family-icons};
   // Font Sizes
   --s-font-size-extra-mini: #{$s-font-size-extra-mini};
   --s-font-size-mini: #{$s-font-size-mini};
@@ -68,14 +72,14 @@
   --s-letter-spacing-large: #{$s-letter-spacing-large};
   --s-letter-spacing-extra-large: #{$s-letter-spacing-extra-large};
   // Font Feature Settings
-  --s-font-feature-settings-common: "tnum" on, "lnum" on, "case" on, "salt" on, "ss01" on; // $s-font-feature-settings-common
-  --s-font-feature-settings-heading: "tnum" on, "lnum" on, "salt" on, "case" on; // $s-font-feature-settings-heading
-  --s-font-feature-settings-caps-heading: "tnum" on, "lnum" on, "case" on; // $s-font-feature-settings-caps-heading
-  --s-font-feature-settings-caps: "case" on; // $s-font-feature-settings-caps
-  --s-font-feature-settings-singleline: "salt" on, "case" on; // $s-font-feature-settings-singleline
-  --s-font-feature-settings-card-title: "tnum" on, "lnum" on, "ss01" on; // $s-font-feature-settings-card-title
-  --s-font-feature-settings-input: "tnum" on, "lnum" on; // $s-font-feature-settings-input
-  --s-font-feature-settings-button: "tnum" on, "lnum" on, "salt" on; // $s-font-feature-settings-button
+  --s-font-feature-settings-common: #{$s-font-feature-settings-common};
+  --s-font-feature-settings-heading: #{$s-font-feature-settings-heading};
+  --s-font-feature-settings-caps-heading: #{$s-font-feature-settings-caps-heading};
+  --s-font-feature-settings-caps: #{$s-font-feature-settings-caps};
+  --s-font-feature-settings-singleline: #{$s-font-feature-settings-singleline};
+  --s-font-feature-settings-card-title: #{$s-font-feature-settings-card-title};
+  --s-font-feature-settings-input: #{$s-font-feature-settings-input};
+  --s-font-feature-settings-button: #{$s-font-feature-settings-button};
   // Size
   --s-size-mini: #{$s-size-mini};
   --s-size-small: #{$s-size-small};
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index 9076a17b..8e455dcc 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -1,5 +1,5 @@
 .s-scroll-sections {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   font-size: var(--s-font-size-small);
 }
 .s-scroll-menu {
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 828439a8..665e1ce0 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -20,7 +20,7 @@ $select-prefix-width: $s-size-mini;
 $select-prefix-height: $s-size-mini;
 
 .s-select {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   width: 100%;
   position: relative;
   @include select-border-radius;
@@ -45,7 +45,7 @@ $select-prefix-height: $s-size-mini;
       display: flex;
       align-items: center;
       width: var(--s-icon-font-size-big);
-      font-family: $icons-font;
+      font-family: var(--s-font-family-icons);
       font-size: var(--s-icon-font-size-big);
       &:before {
         content: $s-icon-arrows-chevron-top-rounded-24;
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 19f89ae0..5e5f7128 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -127,7 +127,7 @@
   left: 0;
   top: 0;
   > .el-icon.el-icon-arrow-right {
-    font-family: $s-font-family-icons;
+    font-family: var(--s-font-family-icons);
     @extend .s-icon-chevron-down-rounded-16;
   }
   &--expanded {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 8a37773d..f80e8d29 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -65,8 +65,11 @@ $s-border-radius-big: $s-border-radius-base * 4 !default;
 
 // Fonts
 $s-font-family-default: 'Sora', sans-serif !important;
+$s-font-family-default-path: '~@/assets/fonts/Sora-VariableFont_wght.ttf' !default;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
+$s-font-family-mono-path: '~@/assets/fonts/JetBrainsMono-Regular.woff' !default;
 $s-font-family-icons: 'soramitsu-icons' !important;
+$s-font-family-icons-path: '~@/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
 // Font sizes
 $s-font-size-extra-mini: 11px !default;
 $s-font-size-mini: 12px !default;
@@ -106,14 +109,14 @@ $s-letter-spacing-big: 0.01em !default;
 $s-letter-spacing-large: 0.03em !default;
 $s-letter-spacing-extra-large: 0.06em !default;
 // Font Feature Settings
-$s-font-feature-settings-common: "tnum" on, "lnum" on, "case" on, "salt" on, "ss01" on !default;
-$s-font-feature-settings-heading: "tnum" on, "lnum" on, "salt" on, "case" on !default;
-$s-font-feature-settings-caps-heading: "tnum" on, "lnum" on, "case" on !default;
-$s-font-feature-settings-caps: "case" on !default;
-$s-font-feature-settings-singleline: "salt" on, "case" on !default;
-$s-font-feature-settings-card-title: "tnum" on, "lnum" on, "ss01" on !default;
-$s-font-feature-settings-input: "tnum" on, "lnum" on !default;
-$s-font-feature-settings-button: "tnum" on, "lnum" on, "salt" on !default;
+$s-font-feature-settings-common: '\"tnum\" on, \"lnum\" on, \"case\" on, \"salt\" on, \"ss01\" on' !default;
+$s-font-feature-settings-heading: '\"tnum\" on, \"lnum\" on, \"salt\" on, \"case\" on' !default;
+$s-font-feature-settings-caps-heading: '\"tnum\" on, \"lnum\" on, \"case\" on' !default;
+$s-font-feature-settings-caps: '\"case\" on' !default;
+$s-font-feature-settings-singleline: '\"salt\" on, \"case\" on' !default;
+$s-font-feature-settings-card-title: '\"tnum\" on, \"lnum\" on, \"ss01\" on' !default;
+$s-font-feature-settings-input: '\"tnum\" on, \"lnum\" on' !default;
+$s-font-feature-settings-button: '\"tnum\" on, \"lnum\" on, \"salt\" on' !default;
 
 // Responsive
 $--sm: 640px !default;
diff --git a/tsconfig.json b/tsconfig.json
index 8d0b967e..50cc1b58 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,7 @@
     "baseUrl": ".",
     "types": [
       "webpack-env",
+      "element-ui",
       "jest"
     ],
     "paths": {

From 60da39c8373d9a7848b45a19d874a336aabffac4 Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Wed, 30 Jun 2021 12:57:54 +0300
Subject: [PATCH 2/5] add SInput to components map (#242)

---
 package.json | 2 +-
 src/index.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 166b8858..8d556d94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/index.ts b/src/index.ts
index ee8dead2..63eaff05 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -85,6 +85,7 @@ const libraryComponentsMap = {
   [Components.SFormItem]: SFormItem,
   [Components.SHeader]: SHeader,
   [Components.SIcon]: SIcon,
+  [Components.SInput]: SInput,
   [Components.SFloatInput]: SFloatInput,
   [Components.SJsonInput]: SJsonInput,
   [Components.SMain]: SMain,

From ad0d33a2ee7994c81691e2c8be6658cc8a09df7f Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Fri, 2 Jul 2021 12:28:12 +0300
Subject: [PATCH 3/5] Fixed collapse icon. (#245)

---
 package.json             | 2 +-
 src/styles/collapse.scss | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8d556d94..403eaed7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index 189240bd..baae194d 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -28,7 +28,10 @@
       border-bottom-color: transparent;
     }
     .el-icon-arrow-right {
-      font-family: var(--s-font-family-icons);
+      &,
+      &:before {
+        font-family: var(--s-font-family-icons);
+      }
       @extend .s-icon-chevron-down-rounded-16;
       font-size: var(--s-icon-font-size-mini);
       padding: 8px;

From 0deb660a19fbdf0db99ba38ec257f1a2f651e492 Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Fri, 2 Jul 2021 14:02:54 +0300
Subject: [PATCH 4/5] Tech/try to use split lib components (#244)

* refactoring

* move inputs to separated files

* path fixes

* move used in components dependencies

* wip update install property

* refactoring improts

* upda version to 0.9.15

* update README

* return type on install plugin function

* fix comment
---
 README.md                                     |  29 +-
 config/storybook/preview.js                   |   5 +
 package.json                                  |   8 +-
 .../{ => SBreadcrumb}/SBreadcrumb.vue         |   0
 .../Breadcrumb/SBreadcrumb/index.ts           |  13 +
 .../{ => SBreadcrumbItem}/SBreadcrumbItem.vue |   0
 .../Breadcrumb/SBreadcrumbItem/index.ts       |  13 +
 src/components/Breadcrumb/index.ts            |   6 +-
 .../Button/{ => SButton}/SButton.vue          |  12 +-
 src/components/Button/SButton/index.ts        |  13 +
 .../{ => SButtonGroup}/SButtonGroup.vue       |   0
 src/components/Button/SButtonGroup/index.ts   |  13 +
 src/components/Button/index.ts                |  14 +-
 src/components/Card/{ => SCard}/SCard.vue     |  12 +-
 src/components/Card/SCard/index.ts            |  13 +
 src/components/Card/index.ts                  |   6 +-
 src/components/Checkbox/index.ts              |  12 +-
 .../Collapse/{ => SCollapse}/SCollapse.vue    |   2 +-
 src/components/Collapse/SCollapse/index.ts    |  13 +
 .../{ => SCollapseItem}/SCollapseItem.vue     |   2 +-
 .../Collapse/SCollapseItem/index.ts           |  13 +
 src/components/Collapse/index.ts              |   8 +-
 .../{ => SDatePicker}/SDatePicker.vue         |   8 +-
 .../DatePicker/SDatePicker/index.ts           |  13 +
 src/components/DatePicker/index.ts            |  11 +-
 .../SDesignSystemProvider.vue                 |   4 +-
 .../SDesignSystemProvider/index.ts            |  13 +
 src/components/DesignSystem/index.ts          |  11 +-
 src/components/Dialog/index.ts                |  12 +-
 .../Divider/{ => SDivider}/SDivider.vue       |   2 +-
 src/components/Divider/SDivider/index.ts      |  13 +
 src/components/Divider/index.ts               |   6 +-
 .../Dropdown/{ => SDropdown}/SDropdown.vue    |  14 +-
 src/components/Dropdown/SDropdown/index.ts    |  13 +
 .../{ => SDropdownItem}/SDropdownItem.vue     |   1 -
 .../Dropdown/SDropdownItem/index.ts           |  13 +
 src/components/Dropdown/index.ts              |  14 +-
 src/components/Form/{ => SForm}/SForm.vue     |   2 +-
 src/components/Form/SForm/index.ts            |  13 +
 .../Form/{ => SFormItem}/SFormItem.vue        |   2 +-
 src/components/Form/SFormItem/index.ts        |  13 +
 src/components/Form/index.ts                  |   8 +-
 src/components/Icon/{ => SIcon}/SIcon.vue     |   2 +-
 src/components/Icon/SIcon/index.ts            |  13 +
 src/components/Icon/index.ts                  |   6 +-
 .../Input/{ => SFloatInput}/SFloatInput.vue   |   6 +-
 src/components/Input/SFloatInput/index.ts     |  13 +
 src/components/Input/{ => SInput}/SInput.vue  |   8 +-
 src/components/Input/SInput/index.ts          |  13 +
 .../Input/{ => SJsonInput}/SJsonInput.vue     |   0
 src/components/Input/SJsonInput/index.ts      |  13 +
 src/components/Input/index.ts                 |  11 +-
 src/components/Layout/App/index.ts            |  12 +-
 src/components/Layout/Aside/index.ts          |  12 +-
 src/components/Layout/Col/index.ts            |  12 +-
 src/components/Layout/Container/index.ts      |  16 +-
 src/components/Layout/Footer/index.ts         |  12 +-
 src/components/Layout/Header/index.ts         |  12 +-
 src/components/Layout/Main/index.ts           |  12 +-
 src/components/Layout/Row/index.ts            |  12 +-
 src/components/Menu/{ => SMenu}/SMenu.vue     |   4 +-
 src/components/Menu/SMenu/index.ts            |  13 +
 .../Menu/{ => SMenuItem}/SMenuItem.vue        |   0
 src/components/Menu/SMenuItem/index.ts        |  13 +
 .../{ => SMenuItemGroup}/SMenuItemGroup.vue   |   0
 src/components/Menu/SMenuItemGroup/index.ts   |  13 +
 .../Menu/{ => SSubMenu}/SSubmenu.vue          |   0
 src/components/Menu/SSubMenu/index.ts         |  13 +
 src/components/Menu/index.ts                  |  12 +-
 src/components/Pagination/index.ts            |  12 +-
 src/components/Radio/{ => SRadio}/SRadio.vue  |   4 +-
 src/components/Radio/SRadio/index.ts          |  13 +
 .../Radio/{ => SRadioGroup}/SRadioGroup.vue   |   2 +-
 src/components/Radio/SRadioGroup/index.ts     |  13 +
 src/components/Radio/index.ts                 |   6 +-
 .../SScrollSectionItem.vue                    |   2 +-
 .../SScrollSectionItem/index.ts               |  13 +
 .../{ => SScrollSections}/SScrollSections.vue |   0
 .../ScrollSections/SScrollSections/index.ts   |  13 +
 src/components/ScrollSections/index.ts        |   6 +-
 .../Select/{ => SOption}/SOption.vue          |   0
 src/components/Select/SOption/index.ts        |  13 +
 .../{ => SOptionGroup}/SOptionGroup.vue       |   0
 src/components/Select/SOptionGroup/index.ts   |  13 +
 .../Select/{ => SSelect}/SSelect.vue          |   8 +-
 src/components/Select/SSelect/index.ts        |  13 +
 src/components/Select/index.ts                |  10 +-
 src/components/Slider/SSlider.vue             |   3 +-
 src/components/Slider/index.ts                |  16 +-
 src/components/Switch/SSwitch.vue             |   2 +-
 src/components/Switch/index.ts                |  12 +-
 src/components/Tab/STab/index.ts              |  13 +
 src/components/Tab/{ => STabs}/STabs.vue      |   6 +-
 src/components/Tab/STabs/index.ts             |  13 +
 src/components/Tab/index.ts                   |  11 +-
 .../SHierarchicalTable.vue                    | 192 ++++----
 .../Table/SHierarchicalTable/index.ts         |  13 +
 src/components/Table/{ => STable}/STable.vue  |   6 +-
 src/components/Table/STable/index.ts          |  13 +
 .../Table/{ => STableColumn}/STableColumn.vue | 410 +++++++++---------
 src/components/Table/STableColumn/index.ts    |  13 +
 src/components/Table/index.ts                 |  18 +-
 src/components/Tooltip/STooltip.vue           |   3 +-
 src/components/Tooltip/index.ts               |  16 +-
 src/components/index.ts                       | 121 ++----
 src/directives/index.ts                       |   4 +-
 src/index.ts                                  | 130 +++---
 src/plugins/index.ts                          |   1 +
 src/plugins/soramitsuUIStore.ts               |  15 +
 src/types/components.ts                       |   4 +
 src/types/shims-vue.d.ts                      |   9 +-
 111 files changed, 1156 insertions(+), 675 deletions(-)
 rename src/components/Breadcrumb/{ => SBreadcrumb}/SBreadcrumb.vue (100%)
 create mode 100644 src/components/Breadcrumb/SBreadcrumb/index.ts
 rename src/components/Breadcrumb/{ => SBreadcrumbItem}/SBreadcrumbItem.vue (100%)
 create mode 100644 src/components/Breadcrumb/SBreadcrumbItem/index.ts
 rename src/components/Button/{ => SButton}/SButton.vue (95%)
 create mode 100644 src/components/Button/SButton/index.ts
 rename src/components/Button/{ => SButtonGroup}/SButtonGroup.vue (100%)
 create mode 100644 src/components/Button/SButtonGroup/index.ts
 rename src/components/Card/{ => SCard}/SCard.vue (87%)
 create mode 100644 src/components/Card/SCard/index.ts
 rename src/components/Collapse/{ => SCollapse}/SCollapse.vue (97%)
 create mode 100644 src/components/Collapse/SCollapse/index.ts
 rename src/components/Collapse/{ => SCollapseItem}/SCollapseItem.vue (97%)
 create mode 100644 src/components/Collapse/SCollapseItem/index.ts
 rename src/components/DatePicker/{ => SDatePicker}/SDatePicker.vue (97%)
 create mode 100644 src/components/DatePicker/SDatePicker/index.ts
 rename src/components/DesignSystem/{ => SDesignSystemProvider}/SDesignSystemProvider.vue (85%)
 create mode 100644 src/components/DesignSystem/SDesignSystemProvider/index.ts
 rename src/components/Divider/{ => SDivider}/SDivider.vue (99%)
 create mode 100644 src/components/Divider/SDivider/index.ts
 rename src/components/Dropdown/{ => SDropdown}/SDropdown.vue (94%)
 create mode 100644 src/components/Dropdown/SDropdown/index.ts
 rename src/components/Dropdown/{ => SDropdownItem}/SDropdownItem.vue (94%)
 create mode 100644 src/components/Dropdown/SDropdownItem/index.ts
 rename src/components/Form/{ => SForm}/SForm.vue (98%)
 create mode 100644 src/components/Form/SForm/index.ts
 rename src/components/Form/{ => SFormItem}/SFormItem.vue (98%)
 create mode 100644 src/components/Form/SFormItem/index.ts
 rename src/components/Icon/{ => SIcon}/SIcon.vue (97%)
 create mode 100644 src/components/Icon/SIcon/index.ts
 rename src/components/Input/{ => SFloatInput}/SFloatInput.vue (97%)
 create mode 100644 src/components/Input/SFloatInput/index.ts
 rename src/components/Input/{ => SInput}/SInput.vue (97%)
 create mode 100644 src/components/Input/SInput/index.ts
 rename src/components/Input/{ => SJsonInput}/SJsonInput.vue (100%)
 create mode 100644 src/components/Input/SJsonInput/index.ts
 rename src/components/Menu/{ => SMenu}/SMenu.vue (97%)
 create mode 100644 src/components/Menu/SMenu/index.ts
 rename src/components/Menu/{ => SMenuItem}/SMenuItem.vue (100%)
 create mode 100644 src/components/Menu/SMenuItem/index.ts
 rename src/components/Menu/{ => SMenuItemGroup}/SMenuItemGroup.vue (100%)
 create mode 100644 src/components/Menu/SMenuItemGroup/index.ts
 rename src/components/Menu/{ => SSubMenu}/SSubmenu.vue (100%)
 create mode 100644 src/components/Menu/SSubMenu/index.ts
 rename src/components/Radio/{ => SRadio}/SRadio.vue (93%)
 create mode 100644 src/components/Radio/SRadio/index.ts
 rename src/components/Radio/{ => SRadioGroup}/SRadioGroup.vue (93%)
 create mode 100644 src/components/Radio/SRadioGroup/index.ts
 rename src/components/ScrollSections/{ => SScrollSectionItem}/SScrollSectionItem.vue (96%)
 create mode 100644 src/components/ScrollSections/SScrollSectionItem/index.ts
 rename src/components/ScrollSections/{ => SScrollSections}/SScrollSections.vue (100%)
 create mode 100644 src/components/ScrollSections/SScrollSections/index.ts
 rename src/components/Select/{ => SOption}/SOption.vue (100%)
 create mode 100644 src/components/Select/SOption/index.ts
 rename src/components/Select/{ => SOptionGroup}/SOptionGroup.vue (100%)
 create mode 100644 src/components/Select/SOptionGroup/index.ts
 rename src/components/Select/{ => SSelect}/SSelect.vue (97%)
 create mode 100644 src/components/Select/SSelect/index.ts
 create mode 100644 src/components/Tab/STab/index.ts
 rename src/components/Tab/{ => STabs}/STabs.vue (94%)
 create mode 100644 src/components/Tab/STabs/index.ts
 rename src/components/Table/{ => SHierarchicalTable}/SHierarchicalTable.vue (91%)
 create mode 100644 src/components/Table/SHierarchicalTable/index.ts
 rename src/components/Table/{ => STable}/STable.vue (98%)
 create mode 100644 src/components/Table/STable/index.ts
 rename src/components/Table/{ => STableColumn}/STableColumn.vue (95%)
 create mode 100644 src/components/Table/STableColumn/index.ts
 create mode 100644 src/plugins/soramitsuUIStore.ts

diff --git a/README.md b/README.md
index 003b27c4..695a8a05 100644
--- a/README.md
+++ b/README.md
@@ -14,19 +14,30 @@ $s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrain
 $s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
 ```
 
-## Custom components, directives setup
-Import "Components" enum from library, and pass the list of needed components to SoramitsuElements options
+## Usage library in project
+### 1.Install all of library components:
+```
+import Vue from 'vue
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
-Note: Without customization all library components and directives are registering global
+const options = {
+  store // if u want to merge ui lib modules
+}
 
+Vue.use(SoramitsuElements, options)
+```
+### 2.Install only necessary components (to reduce vendors bundle size)
 ```
-import Vue from 'vue'
-import SoramitsuElements, { Components, Directives } from '@soramitsu/soramitsu-js-ui'
+import Vue from 'vue
+import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/src/plugins/elementUI'
+import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/src/plugins/soramitsuUIStore'
+import SButton from '@soramitsu/soramitsu-js-ui/src/components/Button/SButton'
+import SButton from '@soramitsu/soramitsu-js-ui/src/components/Input/SInput'
 
-Vue.use(SoramitsuElements, {
-  components: [Components.Button, Components.Input],
-  directives: [Directives.Float]
-})
+Vue.use(ElementUIPlugin) // required
+Vue.use(SoramitsuUIStorePlugin, store) // optional
+Vue.use(SButton)
+Vue.use(SInput)
 ```
 
 ### Compiles and hot-reloads storybook with components for development
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index 32ea951b..9b3377df 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -1,8 +1,13 @@
+import Vue from 'vue'
 import { addParameters, addDecorator } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { DocsPage } from '@storybook/addon-docs/blocks'
 
+import '../../src/styles/index.scss'
 import mainStore from '../../src/store'
+import { ElementUIPlugin } from '../../src/plugins'
+
+Vue.use(ElementUIPlugin)
 
 addParameters({
   options: {
diff --git a/package.json b/package.json
index 403eaed7..2a4a4553 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -27,8 +27,10 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "element-resize-detector": "^1.2.1",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.15",
+    "throttle-debounce": "^1.0.1",
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -59,7 +61,6 @@
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "1.0.0-beta.31",
-    "element-resize-detector": "^1.2.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -80,7 +81,6 @@
     "rollup-plugin-vue": "^5.1.4",
     "sass-loader": "^8.0.2",
     "storybook-vue-router": "^1.0.7",
-    "throttle-debounce": "^1.0.1",
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
@@ -94,6 +94,7 @@
   },
   "files": [
     "lib/*",
+    "src/*",
     "*.json",
     "*.js"
   ],
@@ -101,6 +102,7 @@
     "react": "16.13.0",
     "react-dom": "16.13.0"
   },
+  "sideEffects": false,
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
diff --git a/src/components/Breadcrumb/SBreadcrumb.vue b/src/components/Breadcrumb/SBreadcrumb/SBreadcrumb.vue
similarity index 100%
rename from src/components/Breadcrumb/SBreadcrumb.vue
rename to src/components/Breadcrumb/SBreadcrumb/SBreadcrumb.vue
diff --git a/src/components/Breadcrumb/SBreadcrumb/index.ts b/src/components/Breadcrumb/SBreadcrumb/index.ts
new file mode 100644
index 00000000..25093ad7
--- /dev/null
+++ b/src/components/Breadcrumb/SBreadcrumb/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SBreadcrumb from './SBreadcrumb.vue'
+
+const SBreadcrumb = _SBreadcrumb as SFCWithInstall<typeof _SBreadcrumb>
+
+SBreadcrumb.install = function (vue: VueConstructor) {
+  vue.component(Components.SBreadcrumb, SBreadcrumb)
+}
+
+export { SBreadcrumb }
+export default SBreadcrumb
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem/SBreadcrumbItem.vue
similarity index 100%
rename from src/components/Breadcrumb/SBreadcrumbItem.vue
rename to src/components/Breadcrumb/SBreadcrumbItem/SBreadcrumbItem.vue
diff --git a/src/components/Breadcrumb/SBreadcrumbItem/index.ts b/src/components/Breadcrumb/SBreadcrumbItem/index.ts
new file mode 100644
index 00000000..4b553cb2
--- /dev/null
+++ b/src/components/Breadcrumb/SBreadcrumbItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SBreadcrumbItem from './SBreadcrumbItem.vue'
+
+const SBreadcrumbItem = _SBreadcrumbItem as SFCWithInstall<typeof _SBreadcrumbItem>
+
+SBreadcrumbItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SBreadcrumbItem, SBreadcrumbItem)
+}
+
+export { SBreadcrumbItem }
+export default SBreadcrumbItem
diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
index d1df7fdf..6a9f7826 100644
--- a/src/components/Breadcrumb/index.ts
+++ b/src/components/Breadcrumb/index.ts
@@ -1,4 +1,2 @@
-import SBreadcrumb from './SBreadcrumb.vue'
-import SBreadcrumbItem from './SBreadcrumbItem.vue'
-
-export { SBreadcrumb, SBreadcrumbItem }
+export { SBreadcrumb } from './SBreadcrumb'
+export { SBreadcrumbItem } from './SBreadcrumbItem'
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton/SButton.vue
similarity index 95%
rename from src/components/Button/SButton.vue
rename to src/components/Button/SButton/SButton.vue
index f7daf048..c4bbd2cc 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton/SButton.vue
@@ -26,12 +26,12 @@ import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
-import { DesignSystemInject } from '../DesignSystem'
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { SIcon } from '../Icon'
-import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { SIcon } from '../../Icon/SIcon'
+import { STooltip, TooltipPlacement } from '../../Tooltip'
+import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from '../consts'
 
 @Component({
   components: { SIcon, STooltip }
diff --git a/src/components/Button/SButton/index.ts b/src/components/Button/SButton/index.ts
new file mode 100644
index 00000000..6e4b31ab
--- /dev/null
+++ b/src/components/Button/SButton/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SButton from './SButton.vue'
+
+const SButton = _SButton as SFCWithInstall<typeof _SButton>
+
+SButton.install = function (vue: VueConstructor) {
+  vue.component(Components.SButton, SButton)
+}
+
+export { SButton }
+export default SButton
diff --git a/src/components/Button/SButtonGroup.vue b/src/components/Button/SButtonGroup/SButtonGroup.vue
similarity index 100%
rename from src/components/Button/SButtonGroup.vue
rename to src/components/Button/SButtonGroup/SButtonGroup.vue
diff --git a/src/components/Button/SButtonGroup/index.ts b/src/components/Button/SButtonGroup/index.ts
new file mode 100644
index 00000000..1d5863b0
--- /dev/null
+++ b/src/components/Button/SButtonGroup/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SButtonGroup from './SButtonGroup.vue'
+
+const SButtonGroup = _SButtonGroup as SFCWithInstall<typeof _SButtonGroup>
+
+SButtonGroup.install = function (vue: VueConstructor) {
+  vue.component(Components.SButtonGroup, SButtonGroup)
+}
+
+export { SButtonGroup }
+export default SButtonGroup
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 9f6d31bc..c205d11f 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,11 +1,3 @@
-import SButton from './SButton.vue'
-import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
-
-export {
-  SButton,
-  SButtonGroup,
-  ButtonTypes,
-  ButtonNativeTypes,
-  ButtonIconPosition
-}
+export { SButton } from './SButton'
+export { SButtonGroup } from './SButtonGroup'
+export { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard/SCard.vue
similarity index 87%
rename from src/components/Card/SCard.vue
rename to src/components/Card/SCard/SCard.vue
index 3bb9b7e3..2f732b84 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard/SCard.vue
@@ -14,12 +14,12 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
-import { DesignSystemInject } from '../DesignSystem'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import SizeMixin from '../../mixins/SizeMixin'
-import StatusMixin from '../../mixins/StatusMixin'
-import { CardShadow } from './consts'
-import { BorderRadius } from '@/types'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import SizeMixin from '../../../mixins/SizeMixin'
+import StatusMixin from '../../../mixins/StatusMixin'
+import { CardShadow } from '../consts'
+import { BorderRadius } from '../../../types'
 
 @Component
 export default class SCard extends Mixins(BorderRadiusMixin, SizeMixin, StatusMixin, DesignSystemInject) {
diff --git a/src/components/Card/SCard/index.ts b/src/components/Card/SCard/index.ts
new file mode 100644
index 00000000..c301ebde
--- /dev/null
+++ b/src/components/Card/SCard/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCard from './SCard.vue'
+
+const SCard = _SCard as SFCWithInstall<typeof _SCard>
+
+SCard.install = function (vue: VueConstructor) {
+  vue.component(Components.SCard, SCard)
+}
+
+export { SCard }
+export default SCard
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index 270ec29a..3fc201a2 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,4 +1,2 @@
-import SCard from './SCard.vue'
-import { CardShadow } from './consts'
-
-export { SCard, CardShadow }
+export { SCard } from './SCard'
+export { CardShadow } from './consts'
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index c30a6ad3..8781ed78 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,3 +1,13 @@
-import SCheckbox from './SCheckbox.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
+
+import _SCheckbox from './SCheckbox.vue'
+
+const SCheckbox = _SCheckbox as SFCWithInstall<typeof _SCheckbox>
+
+SCheckbox.install = function (vue: VueConstructor) {
+  vue.component(Components.SCheckbox, SCheckbox)
+}
 
 export { SCheckbox }
+export default SCheckbox
diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse/SCollapse.vue
similarity index 97%
rename from src/components/Collapse/SCollapse.vue
rename to src/components/Collapse/SCollapse/SCollapse.vue
index 2770fa86..6d5b7b74 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse/SCollapse.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 
-import { BorderTypes } from './consts'
+import { BorderTypes } from '../consts'
 
 @Component
 export default class SCollapse extends Vue {
diff --git a/src/components/Collapse/SCollapse/index.ts b/src/components/Collapse/SCollapse/index.ts
new file mode 100644
index 00000000..9c09acc7
--- /dev/null
+++ b/src/components/Collapse/SCollapse/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCollapse from './SCollapse.vue'
+
+const SCollapse = _SCollapse as SFCWithInstall<typeof _SCollapse>
+
+SCollapse.install = function (vue: VueConstructor) {
+  vue.component(Components.SCollapse, SCollapse)
+}
+
+export { SCollapse }
+export default SCollapse
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem/SCollapseItem.vue
similarity index 97%
rename from src/components/Collapse/SCollapseItem.vue
rename to src/components/Collapse/SCollapseItem/SCollapseItem.vue
index dc0b701e..71ea0c16 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem/SCollapseItem.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-import { BorderTypes } from './consts'
+import { BorderTypes } from '../consts'
 
 @Component
 export default class SCollapseItem extends Vue {
diff --git a/src/components/Collapse/SCollapseItem/index.ts b/src/components/Collapse/SCollapseItem/index.ts
new file mode 100644
index 00000000..e2b40340
--- /dev/null
+++ b/src/components/Collapse/SCollapseItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCollapseItem from './SCollapseItem.vue'
+
+const SCollapseItem = _SCollapseItem as SFCWithInstall<typeof _SCollapseItem>
+
+SCollapseItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SCollapseItem, SCollapseItem)
+}
+
+export { SCollapseItem }
+export default SCollapseItem
diff --git a/src/components/Collapse/index.ts b/src/components/Collapse/index.ts
index 6876cf31..2604b7cc 100644
--- a/src/components/Collapse/index.ts
+++ b/src/components/Collapse/index.ts
@@ -1,5 +1,3 @@
-import SCollapse from './SCollapse.vue'
-import SCollapseItem from './SCollapseItem.vue'
-import { BorderTypes } from './consts'
-
-export { SCollapse, SCollapseItem, BorderTypes }
+export { SCollapse } from './SCollapse'
+export { SCollapseItem } from './SCollapseItem'
+export { BorderTypes } from './consts'
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker/SDatePicker.vue
similarity index 97%
rename from src/components/DatePicker/SDatePicker.vue
rename to src/components/DatePicker/SDatePicker/SDatePicker.vue
index 724c2968..eadf9caa 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker/SDatePicker.vue
@@ -42,10 +42,10 @@ import { ElFormItem } from 'element-ui/types/form-item'
 
 // TODO: ask do we need size prop for the component?
 // Prev comment => TODO: ask design team
-import { SIcon } from '../Icon'
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { PickerTypes, PickerAlignment, InputTypes } from './consts'
+import { SIcon } from '../../Icon/SIcon'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { PickerTypes, PickerAlignment, InputTypes } from '../consts'
 
 @Component({
   components: { SIcon }
diff --git a/src/components/DatePicker/SDatePicker/index.ts b/src/components/DatePicker/SDatePicker/index.ts
new file mode 100644
index 00000000..88736cc4
--- /dev/null
+++ b/src/components/DatePicker/SDatePicker/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDatePicker from './SDatePicker.vue'
+
+const SDatePicker = _SDatePicker as SFCWithInstall<typeof _SDatePicker>
+
+SDatePicker.install = function (vue: VueConstructor) {
+  vue.component(Components.SDatePicker, SDatePicker)
+}
+
+export { SDatePicker }
+export default SDatePicker
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index 9a55cca4..2d730faf 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,9 +1,2 @@
-import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes } from './consts'
-
-export {
-  SDatePicker,
-  PickerTypes,
-  PickerAlignment,
-  InputTypes
-}
+export { SDatePicker } from './SDatePicker'
+export { PickerTypes, PickerAlignment, InputTypes } from './consts'
diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
similarity index 85%
rename from src/components/DesignSystem/SDesignSystemProvider.vue
rename to src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
index a6bae2c7..67829fff 100644
--- a/src/components/DesignSystem/SDesignSystemProvider.vue
+++ b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
@@ -6,8 +6,8 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
-import { DesignSystemProvideKey } from './consts'
-import { DesignSystemTypes } from '../../utils/DesignSystem'
+import { DesignSystemProvideKey } from '../consts'
+import { DesignSystemTypes } from '../../../utils/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
diff --git a/src/components/DesignSystem/SDesignSystemProvider/index.ts b/src/components/DesignSystem/SDesignSystemProvider/index.ts
new file mode 100644
index 00000000..fff691a4
--- /dev/null
+++ b/src/components/DesignSystem/SDesignSystemProvider/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDesignSystemProvider from './SDesignSystemProvider.vue'
+
+const SDesignSystemProvider = _SDesignSystemProvider as SFCWithInstall<typeof _SDesignSystemProvider>
+
+SDesignSystemProvider.install = function (vue: VueConstructor) {
+  vue.component(Components.SDesignSystemProvider, SDesignSystemProvider)
+}
+
+export { SDesignSystemProvider }
+export default SDesignSystemProvider
diff --git a/src/components/DesignSystem/index.ts b/src/components/DesignSystem/index.ts
index 32bb8ea2..1c4a3f06 100644
--- a/src/components/DesignSystem/index.ts
+++ b/src/components/DesignSystem/index.ts
@@ -1,9 +1,4 @@
-import SDesignSystemProvider from './SDesignSystemProvider.vue'
-import DesignSystemInject from './DesignSystemInject'
-import { DesignSystemProvideKey } from './consts'
 
-export {
-  SDesignSystemProvider,
-  DesignSystemProvideKey,
-  DesignSystemInject
-}
+export { default as DesignSystemInject } from './DesignSystemInject'
+export { SDesignSystemProvider } from './SDesignSystemProvider'
+export { DesignSystemProvideKey } from './consts'
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
index 452d701a..6f8c2603 100644
--- a/src/components/Dialog/index.ts
+++ b/src/components/Dialog/index.ts
@@ -1,3 +1,13 @@
-import SDialog from './SDialog.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
+
+import _SDialog from './SDialog.vue'
+
+const SDialog = _SDialog as SFCWithInstall<typeof _SDialog>
+
+SDialog.install = function (vue: VueConstructor) {
+  vue.component(Components.SDialog, SDialog)
+}
 
 export { SDialog }
+export default SDialog
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider/SDivider.vue
similarity index 99%
rename from src/components/Divider/SDivider.vue
rename to src/components/Divider/SDivider/SDivider.vue
index 4cac3d63..4cfb72e1 100644
--- a/src/components/Divider/SDivider.vue
+++ b/src/components/Divider/SDivider/SDivider.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-import { DividerDirection, ContentPosition, DividerType } from './consts'
+import { DividerDirection, ContentPosition, DividerType } from '../consts'
 
 @Component
 export default class SDivider extends Vue {
diff --git a/src/components/Divider/SDivider/index.ts b/src/components/Divider/SDivider/index.ts
new file mode 100644
index 00000000..dcef8f6c
--- /dev/null
+++ b/src/components/Divider/SDivider/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDivider from './SDivider.vue'
+
+const SDivider = _SDivider as SFCWithInstall<typeof _SDivider>
+
+SDivider.install = function (vue: VueConstructor) {
+  vue.component(Components.SDivider, SDivider)
+}
+
+export { SDivider }
+export default SDivider
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
index fdab10ef..d2111988 100644
--- a/src/components/Divider/index.ts
+++ b/src/components/Divider/index.ts
@@ -1,4 +1,2 @@
-import SDivider from './SDivider.vue'
-import { ContentPosition, DividerType, DividerDirection } from './consts'
-
-export { SDivider, ContentPosition, DividerDirection, DividerType }
+export { SDivider } from './SDivider'
+export { ContentPosition, DividerType, DividerDirection } from './consts'
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown/SDropdown.vue
similarity index 94%
rename from src/components/Dropdown/SDropdown.vue
rename to src/components/Dropdown/SDropdown/SDropdown.vue
index 942e0c65..85b11328 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown/SDropdown.vue
@@ -46,12 +46,14 @@
 import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { ButtonTypes, SButton } from '../Button'
-import { Icons24, SIcon } from '../Icon'
-import { STooltip } from '../Tooltip'
-import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { ButtonTypes } from '../../Button/consts'
+import { SButton } from '../../Button/SButton'
+import { Icons24 } from '../../Icon/consts'
+import { SIcon } from '../../Icon/SIcon'
+import { STooltip } from '../../Tooltip'
+import { DropdownType, DropdownPlacement, DropdownTrigger } from '../consts'
 
 @Component({
   components: {
diff --git a/src/components/Dropdown/SDropdown/index.ts b/src/components/Dropdown/SDropdown/index.ts
new file mode 100644
index 00000000..e01774c2
--- /dev/null
+++ b/src/components/Dropdown/SDropdown/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDropdown from './SDropdown.vue'
+
+const SDropdown = _SDropdown as SFCWithInstall<typeof _SDropdown>
+
+SDropdown.install = function (vue: VueConstructor) {
+  vue.component(Components.SDropdown, SDropdown)
+}
+
+export { SDropdown }
+export default SDropdown
diff --git a/src/components/Dropdown/SDropdownItem.vue b/src/components/Dropdown/SDropdownItem/SDropdownItem.vue
similarity index 94%
rename from src/components/Dropdown/SDropdownItem.vue
rename to src/components/Dropdown/SDropdownItem/SDropdownItem.vue
index c775b633..7de3a8df 100644
--- a/src/components/Dropdown/SDropdownItem.vue
+++ b/src/components/Dropdown/SDropdownItem/SDropdownItem.vue
@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
-import { ElDropdownItem } from 'element-ui/types/dropdown-item'
 
 @Component
 export default class SDropdownItem extends Vue {
diff --git a/src/components/Dropdown/SDropdownItem/index.ts b/src/components/Dropdown/SDropdownItem/index.ts
new file mode 100644
index 00000000..04d464e7
--- /dev/null
+++ b/src/components/Dropdown/SDropdownItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDropdownItem from './SDropdownItem.vue'
+
+const SDropdownItem = _SDropdownItem as SFCWithInstall<typeof _SDropdownItem>
+
+SDropdownItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SDropdownItem, SDropdownItem)
+}
+
+export { SDropdownItem }
+export default SDropdownItem
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 70b3392c..9b0feae7 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,11 +1,3 @@
-import SDropdown from './SDropdown.vue'
-import SDropdownItem from './SDropdownItem.vue'
-import { DropdownPlacement, DropdownTrigger, DropdownType } from './consts'
-
-export {
-  SDropdown,
-  SDropdownItem,
-  DropdownPlacement,
-  DropdownTrigger,
-  DropdownType
-}
+export { SDropdown } from './SDropdown'
+export { SDropdownItem } from './SDropdownItem'
+export { DropdownPlacement, DropdownTrigger, DropdownType } from './consts'
diff --git a/src/components/Form/SForm.vue b/src/components/Form/SForm/SForm.vue
similarity index 98%
rename from src/components/Form/SForm.vue
rename to src/components/Form/SForm/SForm.vue
index fd269a9f..56c29216 100644
--- a/src/components/Form/SForm.vue
+++ b/src/components/Form/SForm/SForm.vue
@@ -23,7 +23,7 @@
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 
-import { LabelPosition } from './consts'
+import { LabelPosition } from '../consts'
 
 @Component
 export default class SForm extends Vue {
diff --git a/src/components/Form/SForm/index.ts b/src/components/Form/SForm/index.ts
new file mode 100644
index 00000000..bde5ee19
--- /dev/null
+++ b/src/components/Form/SForm/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SForm from './SForm.vue'
+
+const SForm = _SForm as SFCWithInstall<typeof _SForm>
+
+SForm.install = function (vue: VueConstructor) {
+  vue.component(Components.SForm, SForm)
+}
+
+export { SForm }
+export default SForm
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem/SFormItem.vue
similarity index 98%
rename from src/components/Form/SFormItem.vue
rename to src/components/Form/SFormItem/SFormItem.vue
index 8ce3c26d..ca35955a 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem/SFormItem.vue
@@ -23,7 +23,7 @@ import { ElFormItem } from 'element-ui/types/form-item'
 import { ElForm } from 'element-ui/types/form'
 import isArray from 'lodash/isArray'
 
-import { SIcon } from '../Icon'
+import { SIcon } from '../../Icon/SIcon'
 
 @Component({
   components: { SIcon }
diff --git a/src/components/Form/SFormItem/index.ts b/src/components/Form/SFormItem/index.ts
new file mode 100644
index 00000000..dc2aaafa
--- /dev/null
+++ b/src/components/Form/SFormItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SFormItem from './SFormItem.vue'
+
+const SFormItem = _SFormItem as SFCWithInstall<typeof _SFormItem>
+
+SFormItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SFormItem, SFormItem)
+}
+
+export { SFormItem }
+export default SFormItem
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index f3bb14c0..2b73defe 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,5 +1,3 @@
-import SForm from './SForm.vue'
-import SFormItem from './SFormItem.vue'
-import { LabelPosition, FormItemSize } from './consts'
-
-export { SForm, SFormItem, LabelPosition, FormItemSize }
+export { SForm } from './SForm'
+export { SFormItem } from './SFormItem'
+export { LabelPosition, FormItemSize } from './consts'
diff --git a/src/components/Icon/SIcon.vue b/src/components/Icon/SIcon/SIcon.vue
similarity index 97%
rename from src/components/Icon/SIcon.vue
rename to src/components/Icon/SIcon/SIcon.vue
index adbc44ca..b6813340 100644
--- a/src/components/Icon/SIcon.vue
+++ b/src/components/Icon/SIcon/SIcon.vue
@@ -6,7 +6,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
 import last from 'lodash/fp/last'
 
-import { Icons16, Icons24, StatusIcons } from './consts'
+import { Icons16, Icons24, StatusIcons } from '../consts'
 
 @Component
 export default class SIcon extends Vue {
diff --git a/src/components/Icon/SIcon/index.ts b/src/components/Icon/SIcon/index.ts
new file mode 100644
index 00000000..c98e953c
--- /dev/null
+++ b/src/components/Icon/SIcon/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SIcon from './SIcon.vue'
+
+const SIcon = _SIcon as SFCWithInstall<typeof _SIcon>
+
+SIcon.install = function (vue: VueConstructor) {
+  vue.component(Components.SIcon, SIcon)
+}
+
+export { SIcon }
+export default SIcon
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 25753820..8f23497f 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1,4 +1,2 @@
-import SIcon from './SIcon.vue'
-import { Icons16, Icons24 } from './consts'
-
-export { SIcon, Icons16, Icons24 }
+export { SIcon } from './SIcon'
+export { Icons16, Icons24 } from './consts'
diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput/SFloatInput.vue
similarity index 97%
rename from src/components/Input/SFloatInput.vue
rename to src/components/Input/SFloatInput/SFloatInput.vue
index e4aab325..4c247dd2 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput/SFloatInput.vue
@@ -18,8 +18,8 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-import SInput from './SInput.vue'
-import { Float } from '../../directives'
+import SInput from '../SInput'
+import { Float } from '../../../directives'
 
 const DEFAULT_VALUE = ''
 const DEFAULT_DECIMAL_DELIMITER = '.'
@@ -39,7 +39,7 @@ const decimalsValidator = x => x === undefined || x >= 0
     SInput
   },
   directives: {
-    float: Float
+    float: Float as any // TODO: fix type
   }
 })
 export default class SFloatInput extends Vue {
diff --git a/src/components/Input/SFloatInput/index.ts b/src/components/Input/SFloatInput/index.ts
new file mode 100644
index 00000000..6077fab3
--- /dev/null
+++ b/src/components/Input/SFloatInput/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SFloatInput from './SFloatInput.vue'
+
+const SFloatInput = _SFloatInput as SFCWithInstall<typeof _SFloatInput>
+
+SFloatInput.install = function (vue: VueConstructor) {
+  vue.component(Components.SFloatInput, SFloatInput)
+}
+
+export { SFloatInput }
+export default SFloatInput
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput/SInput.vue
similarity index 97%
rename from src/components/Input/SInput.vue
rename to src/components/Input/SInput/SInput.vue
index 3e8bfd1b..bed98959 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput/SInput.vue
@@ -60,10 +60,10 @@ import { Component, Mixins, Prop, Ref, Inject } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
-import { SIcon } from '../Icon'
-import { DesignSystemInject } from '../DesignSystem'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { Autocomplete, InputSize, InputType } from './consts'
+import { SIcon } from '../../Icon/SIcon'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { Autocomplete, InputSize, InputType } from '../consts'
 
 @Component({
   components: { SIcon }
diff --git a/src/components/Input/SInput/index.ts b/src/components/Input/SInput/index.ts
new file mode 100644
index 00000000..610fee45
--- /dev/null
+++ b/src/components/Input/SInput/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SInput from './SInput.vue'
+
+const SInput = _SInput as SFCWithInstall<typeof _SInput>
+
+SInput.install = function (vue: VueConstructor) {
+  vue.component(Components.SInput, SInput)
+}
+
+export { SInput }
+export default SInput
diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput/SJsonInput.vue
similarity index 100%
rename from src/components/Input/SJsonInput.vue
rename to src/components/Input/SJsonInput/SJsonInput.vue
diff --git a/src/components/Input/SJsonInput/index.ts b/src/components/Input/SJsonInput/index.ts
new file mode 100644
index 00000000..93fd86cb
--- /dev/null
+++ b/src/components/Input/SJsonInput/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SJsonInput from './SJsonInput.vue'
+
+const SJsonInput = _SJsonInput as SFCWithInstall<typeof _SJsonInput>
+
+SJsonInput.install = function (vue: VueConstructor) {
+  vue.component(Components.SJsonInput, SJsonInput)
+}
+
+export { SJsonInput }
+export default SJsonInput
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index 392672fa..0b67d612 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,7 +1,4 @@
-import SInput from './SInput.vue'
-import SFloatInput from './SFloatInput.vue'
-import SJsonInput from './SJsonInput.vue'
-
-import { Autocomplete, InputType, InputSize } from './consts'
-
-export { SInput, SFloatInput, SJsonInput, Autocomplete, InputType, InputSize }
+export { SInput } from './SInput'
+export { SFloatInput } from './SFloatInput'
+export { SJsonInput } from './SJsonInput'
+export { Autocomplete, InputType, InputSize } from './consts'
diff --git a/src/components/Layout/App/index.ts b/src/components/Layout/App/index.ts
index 5f537139..51f69229 100644
--- a/src/components/Layout/App/index.ts
+++ b/src/components/Layout/App/index.ts
@@ -1,3 +1,13 @@
-import SApp from './SApp.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SApp from './SApp.vue'
+
+const SApp = _SApp as SFCWithInstall<typeof _SApp>
+
+SApp.install = function (vue: VueConstructor) {
+  vue.component(Components.SApp, SApp)
+}
 
 export { SApp }
+export default SApp
diff --git a/src/components/Layout/Aside/index.ts b/src/components/Layout/Aside/index.ts
index 2bd6a92a..c204a812 100644
--- a/src/components/Layout/Aside/index.ts
+++ b/src/components/Layout/Aside/index.ts
@@ -1,3 +1,13 @@
-import SAside from './SAside.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SAside from './SAside.vue'
+
+const SAside = _SAside as SFCWithInstall<typeof _SAside>
+
+SAside.install = function (vue: VueConstructor) {
+  vue.component(Components.SAside, SAside)
+}
 
 export { SAside }
+export default SAside
diff --git a/src/components/Layout/Col/index.ts b/src/components/Layout/Col/index.ts
index 4cef002f..223da3af 100644
--- a/src/components/Layout/Col/index.ts
+++ b/src/components/Layout/Col/index.ts
@@ -1,3 +1,13 @@
-import SCol from './SCol.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCol from './SCol.vue'
+
+const SCol = _SCol as SFCWithInstall<typeof _SCol>
+
+SCol.install = function (vue: VueConstructor) {
+  vue.component(Components.SCol, SCol)
+}
 
 export { SCol }
+export default SCol
diff --git a/src/components/Layout/Container/index.ts b/src/components/Layout/Container/index.ts
index 0abb1aca..fbb8946b 100644
--- a/src/components/Layout/Container/index.ts
+++ b/src/components/Layout/Container/index.ts
@@ -1,4 +1,14 @@
-import SContainer from './SContainer.vue'
-import { ContainerDirection } from './consts'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
 
-export { SContainer, ContainerDirection }
+import _SContainer from './SContainer.vue'
+
+const SContainer = _SContainer as SFCWithInstall<typeof _SContainer>
+
+SContainer.install = function (vue: VueConstructor) {
+  vue.component(Components.SContainer, SContainer)
+}
+
+export { SContainer }
+export { ContainerDirection } from './consts'
+export default SContainer
diff --git a/src/components/Layout/Footer/index.ts b/src/components/Layout/Footer/index.ts
index c78fa89a..294e4efe 100644
--- a/src/components/Layout/Footer/index.ts
+++ b/src/components/Layout/Footer/index.ts
@@ -1,3 +1,13 @@
-import SFooter from './SFooter.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SFooter from './SFooter.vue'
+
+const SFooter = _SFooter as SFCWithInstall<typeof _SFooter>
+
+SFooter.install = function (vue: VueConstructor) {
+  vue.component(Components.SFooter, SFooter)
+}
 
 export { SFooter }
+export default SFooter
diff --git a/src/components/Layout/Header/index.ts b/src/components/Layout/Header/index.ts
index 7ba5d58d..d90d71d2 100644
--- a/src/components/Layout/Header/index.ts
+++ b/src/components/Layout/Header/index.ts
@@ -1,3 +1,13 @@
-import SHeader from './SHeader.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SHeader from './SHeader.vue'
+
+const SHeader = _SHeader as SFCWithInstall<typeof _SHeader>
+
+SHeader.install = function (vue: VueConstructor) {
+  vue.component(Components.SHeader, SHeader)
+}
 
 export { SHeader }
+export default SHeader
diff --git a/src/components/Layout/Main/index.ts b/src/components/Layout/Main/index.ts
index 84962b7b..e30ec8ab 100644
--- a/src/components/Layout/Main/index.ts
+++ b/src/components/Layout/Main/index.ts
@@ -1,3 +1,13 @@
-import SMain from './SMain.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SMain from './SMain.vue'
+
+const SMain = _SMain as SFCWithInstall<typeof _SMain>
+
+SMain.install = function (vue: VueConstructor) {
+  vue.component(Components.SMain, SMain)
+}
 
 export { SMain }
+export default SMain
diff --git a/src/components/Layout/Row/index.ts b/src/components/Layout/Row/index.ts
index b74980d0..eff810d3 100644
--- a/src/components/Layout/Row/index.ts
+++ b/src/components/Layout/Row/index.ts
@@ -1,3 +1,13 @@
-import SRow from './SRow.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SRow from './SRow.vue'
+
+const SRow = _SRow as SFCWithInstall<typeof _SRow>
+
+SRow.install = function (vue: VueConstructor) {
+  vue.component(Components.SRow, SRow)
+}
 
 export { SRow }
+export default SRow
diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu/SMenu.vue
similarity index 97%
rename from src/components/Menu/SMenu.vue
rename to src/components/Menu/SMenu/SMenu.vue
index fefd9b8a..5ba0d777 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu/SMenu.vue
@@ -27,8 +27,8 @@
 import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { MenuMode, MenuTrigger } from './consts'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { MenuMode, MenuTrigger } from '../consts'
 
 @Component
 export default class SMenu extends Mixins(BorderRadiusMixin) {
diff --git a/src/components/Menu/SMenu/index.ts b/src/components/Menu/SMenu/index.ts
new file mode 100644
index 00000000..db104f18
--- /dev/null
+++ b/src/components/Menu/SMenu/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SMenu from './SMenu.vue'
+
+const SMenu = _SMenu as SFCWithInstall<typeof _SMenu>
+
+SMenu.install = function (vue: VueConstructor) {
+  vue.component(Components.SMenu, SMenu)
+}
+
+export { SMenu }
+export default SMenu
diff --git a/src/components/Menu/SMenuItem.vue b/src/components/Menu/SMenuItem/SMenuItem.vue
similarity index 100%
rename from src/components/Menu/SMenuItem.vue
rename to src/components/Menu/SMenuItem/SMenuItem.vue
diff --git a/src/components/Menu/SMenuItem/index.ts b/src/components/Menu/SMenuItem/index.ts
new file mode 100644
index 00000000..6e8e6811
--- /dev/null
+++ b/src/components/Menu/SMenuItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SMenuItem from './SMenuItem.vue'
+
+const SMenuItem = _SMenuItem as SFCWithInstall<typeof _SMenuItem>
+
+SMenuItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SMenuItem, SMenuItem)
+}
+
+export { SMenuItem }
+export default SMenuItem
diff --git a/src/components/Menu/SMenuItemGroup.vue b/src/components/Menu/SMenuItemGroup/SMenuItemGroup.vue
similarity index 100%
rename from src/components/Menu/SMenuItemGroup.vue
rename to src/components/Menu/SMenuItemGroup/SMenuItemGroup.vue
diff --git a/src/components/Menu/SMenuItemGroup/index.ts b/src/components/Menu/SMenuItemGroup/index.ts
new file mode 100644
index 00000000..46b508c6
--- /dev/null
+++ b/src/components/Menu/SMenuItemGroup/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SMenuItemGroup from './SMenuItemGroup.vue'
+
+const SMenuItemGroup = _SMenuItemGroup as SFCWithInstall<typeof _SMenuItemGroup>
+
+SMenuItemGroup.install = function (vue: VueConstructor) {
+  vue.component(Components.SMenuItemGroup, SMenuItemGroup)
+}
+
+export { SMenuItemGroup }
+export default SMenuItemGroup
diff --git a/src/components/Menu/SSubmenu.vue b/src/components/Menu/SSubMenu/SSubmenu.vue
similarity index 100%
rename from src/components/Menu/SSubmenu.vue
rename to src/components/Menu/SSubMenu/SSubmenu.vue
diff --git a/src/components/Menu/SSubMenu/index.ts b/src/components/Menu/SSubMenu/index.ts
new file mode 100644
index 00000000..e37fa229
--- /dev/null
+++ b/src/components/Menu/SSubMenu/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SSubMenu from './SSubmenu.vue'
+
+const SSubmenu = _SSubMenu as SFCWithInstall<typeof _SSubMenu>
+
+SSubmenu.install = function (vue: VueConstructor) {
+  vue.component(Components.SSubmenu, SSubmenu)
+}
+
+export { SSubmenu }
+export default SSubmenu
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index d352b296..3504295b 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1,7 +1,5 @@
-import SMenu from './SMenu.vue'
-import SMenuItem from './SMenuItem.vue'
-import SMenuItemGroup from './SMenuItemGroup.vue'
-import SSubmenu from './SSubmenu.vue'
-import { MenuMode, MenuTrigger } from './consts'
-
-export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu, MenuMode, MenuTrigger }
+export { SMenu } from './SMenu'
+export { SMenuItem } from './SMenuItem'
+export { SMenuItemGroup } from './SMenuItemGroup'
+export { SSubmenu } from './SSubMenu'
+export { MenuMode, MenuTrigger } from './consts'
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
index ae6a4363..75c18e9c 100644
--- a/src/components/Pagination/index.ts
+++ b/src/components/Pagination/index.ts
@@ -1,3 +1,13 @@
-import SPagination from './SPagination.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
+
+import _SPagination from './SPagination.vue'
+
+const SPagination = _SPagination as SFCWithInstall<typeof _SPagination>
+
+SPagination.install = function (vue: VueConstructor) {
+  vue.component(Components.SPagination, SPagination)
+}
 
 export { SPagination }
+export default SPagination
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio/SRadio.vue
similarity index 93%
rename from src/components/Radio/SRadio.vue
rename to src/components/Radio/SRadio/SRadio.vue
index 62ed9721..049253c8 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio/SRadio.vue
@@ -15,8 +15,8 @@
 <script lang="ts">
 import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
-import { DesignSystemInject } from '../DesignSystem'
-import SizeMixin from '../../mixins/SizeMixin'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import SizeMixin from '../../../mixins/SizeMixin'
 
 @Component
 export default class SRadio extends Mixins(SizeMixin, DesignSystemInject) {
diff --git a/src/components/Radio/SRadio/index.ts b/src/components/Radio/SRadio/index.ts
new file mode 100644
index 00000000..34638d06
--- /dev/null
+++ b/src/components/Radio/SRadio/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SRadio from './SRadio.vue'
+
+const SRadio = _SRadio as SFCWithInstall<typeof _SRadio>
+
+SRadio.install = function (vue: VueConstructor) {
+  vue.component(Components.SRadio, SRadio)
+}
+
+export { SRadio }
+export default SRadio
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup/SRadioGroup.vue
similarity index 93%
rename from src/components/Radio/SRadioGroup.vue
rename to src/components/Radio/SRadioGroup/SRadioGroup.vue
index 1b657ae8..8a6715ae 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup/SRadioGroup.vue
@@ -11,7 +11,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
-import SizeMixin from '../../mixins/SizeMixin'
+import SizeMixin from '../../../mixins/SizeMixin'
 
 @Component
 export default class SRadio extends Mixins(SizeMixin) {
diff --git a/src/components/Radio/SRadioGroup/index.ts b/src/components/Radio/SRadioGroup/index.ts
new file mode 100644
index 00000000..4849cb19
--- /dev/null
+++ b/src/components/Radio/SRadioGroup/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SRadioGroup from './SRadioGroup.vue'
+
+const SRadioGroup = _SRadioGroup as SFCWithInstall<typeof _SRadioGroup>
+
+SRadioGroup.install = function (vue: VueConstructor) {
+  vue.component(Components.SRadioGroup, SRadioGroup)
+}
+
+export { SRadioGroup }
+export default SRadioGroup
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index 4448645d..518f424d 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,4 +1,2 @@
-import SRadio from './SRadio.vue'
-import SRadioGroup from './SRadioGroup.vue'
-
-export { SRadio, SRadioGroup }
+export { SRadio } from './SRadio'
+export { SRadioGroup } from './SRadioGroup'
diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem/SScrollSectionItem.vue
similarity index 96%
rename from src/components/ScrollSections/SScrollSectionItem.vue
rename to src/components/ScrollSections/SScrollSectionItem/SScrollSectionItem.vue
index 7756d5bc..29fcfa44 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem/SScrollSectionItem.vue
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-import { SDivider } from '../Divider'
+import { SDivider } from '../../Divider/SDivider'
 
 @Component({
   components: { SDivider }
diff --git a/src/components/ScrollSections/SScrollSectionItem/index.ts b/src/components/ScrollSections/SScrollSectionItem/index.ts
new file mode 100644
index 00000000..5094f4cd
--- /dev/null
+++ b/src/components/ScrollSections/SScrollSectionItem/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SScrollSectionItem from './SScrollSectionItem.vue'
+
+const SScrollSectionItem = _SScrollSectionItem as SFCWithInstall<typeof _SScrollSectionItem>
+
+SScrollSectionItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SScrollSectionItem, SScrollSectionItem)
+}
+
+export { SScrollSectionItem }
+export default SScrollSectionItem
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections/SScrollSections.vue
similarity index 100%
rename from src/components/ScrollSections/SScrollSections.vue
rename to src/components/ScrollSections/SScrollSections/SScrollSections.vue
diff --git a/src/components/ScrollSections/SScrollSections/index.ts b/src/components/ScrollSections/SScrollSections/index.ts
new file mode 100644
index 00000000..254e86f1
--- /dev/null
+++ b/src/components/ScrollSections/SScrollSections/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SScrollSections from './SScrollSections.vue'
+
+const SScrollSections = _SScrollSections as SFCWithInstall<typeof _SScrollSections>
+
+SScrollSections.install = function (vue: VueConstructor) {
+  vue.component(Components.SScrollSections, SScrollSections)
+}
+
+export { SScrollSections }
+export default SScrollSections
diff --git a/src/components/ScrollSections/index.ts b/src/components/ScrollSections/index.ts
index 66f1ecbf..ad3003ad 100644
--- a/src/components/ScrollSections/index.ts
+++ b/src/components/ScrollSections/index.ts
@@ -1,4 +1,2 @@
-import SScrollSectionItem from './SScrollSectionItem.vue'
-import SScrollSections from './SScrollSections.vue'
-
-export { SScrollSectionItem, SScrollSections }
+export { SScrollSectionItem } from './SScrollSectionItem'
+export { SScrollSections } from './SScrollSections'
diff --git a/src/components/Select/SOption.vue b/src/components/Select/SOption/SOption.vue
similarity index 100%
rename from src/components/Select/SOption.vue
rename to src/components/Select/SOption/SOption.vue
diff --git a/src/components/Select/SOption/index.ts b/src/components/Select/SOption/index.ts
new file mode 100644
index 00000000..19a4b1d0
--- /dev/null
+++ b/src/components/Select/SOption/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SOption from './SOption.vue'
+
+const SOption = _SOption as SFCWithInstall<typeof _SOption>
+
+SOption.install = function (vue: VueConstructor) {
+  vue.component(Components.SOption, SOption)
+}
+
+export { SOption }
+export default SOption
diff --git a/src/components/Select/SOptionGroup.vue b/src/components/Select/SOptionGroup/SOptionGroup.vue
similarity index 100%
rename from src/components/Select/SOptionGroup.vue
rename to src/components/Select/SOptionGroup/SOptionGroup.vue
diff --git a/src/components/Select/SOptionGroup/index.ts b/src/components/Select/SOptionGroup/index.ts
new file mode 100644
index 00000000..8a49fdc2
--- /dev/null
+++ b/src/components/Select/SOptionGroup/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SOptionGroup from './SOptionGroup.vue'
+
+const SOptionGroup = _SOptionGroup as SFCWithInstall<typeof _SOptionGroup>
+
+SOptionGroup.install = function (vue: VueConstructor) {
+  vue.component(Components.SOptionGroup, SOptionGroup)
+}
+
+export { SOptionGroup }
+export default SOptionGroup
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect/SSelect.vue
similarity index 97%
rename from src/components/Select/SSelect.vue
rename to src/components/Select/SSelect/SSelect.vue
index 7ae8cc35..76ee72e6 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect/SSelect.vue
@@ -32,10 +32,10 @@ import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decora
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { Autocomplete } from '../Input'
-import { InputTypes } from './consts'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { Autocomplete } from '../../Input/consts'
+import { InputTypes } from '../consts'
 
 @Component
 export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) {
diff --git a/src/components/Select/SSelect/index.ts b/src/components/Select/SSelect/index.ts
new file mode 100644
index 00000000..8928c212
--- /dev/null
+++ b/src/components/Select/SSelect/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SSelect from './SSelect.vue'
+
+const SSelect = _SSelect as SFCWithInstall<typeof _SSelect>
+
+SSelect.install = function (vue: VueConstructor) {
+  vue.component(Components.SSelect, SSelect)
+}
+
+export { SSelect }
+export default SSelect
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index fa6ba46e..e1b89b8f 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,6 +1,4 @@
-import SSelect from './SSelect.vue'
-import SOption from './SOption.vue'
-import SOptionGroup from './SOptionGroup.vue'
-import { InputTypes } from './consts'
-
-export { SSelect, SOption, SOptionGroup, InputTypes }
+export { SSelect } from './SSelect'
+export { SOption } from './SOption'
+export { SOptionGroup } from './SOptionGroup'
+export { InputTypes } from './consts'
diff --git a/src/components/Slider/SSlider.vue b/src/components/Slider/SSlider.vue
index 53a018bb..6cffc46c 100644
--- a/src/components/Slider/SSlider.vue
+++ b/src/components/Slider/SSlider.vue
@@ -26,8 +26,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
-import { ElSlider } from 'element-ui/types/slider'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 import { SliderInputSize } from './consts'
 
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
index 67073618..839ae775 100644
--- a/src/components/Slider/index.ts
+++ b/src/components/Slider/index.ts
@@ -1,4 +1,14 @@
-import SSlider from './SSlider.vue'
-import { SliderInputSize } from './consts'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
 
-export { SSlider, SliderInputSize }
+import _SSlider from './SSlider.vue'
+
+const SSlider = _SSlider as SFCWithInstall<typeof _SSlider>
+
+SSlider.install = function (vue: VueConstructor) {
+  vue.component(Components.SSlider, SSlider)
+}
+
+export { SSlider }
+export { SliderInputSize } from './consts'
+export default SSlider
diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
index 1b220064..cf6199f2 100644
--- a/src/components/Switch/SSwitch.vue
+++ b/src/components/Switch/SSwitch.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { Mixins, Component, Prop, Watch } from 'vue-property-decorator'
-import { DesignSystemInject } from '../DesignSystem'
+import DesignSystemInject from '../DesignSystem/DesignSystemInject'
 
 @Component
 export default class SSwitch extends Mixins(DesignSystemInject) {
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
index 2040039d..849299b3 100644
--- a/src/components/Switch/index.ts
+++ b/src/components/Switch/index.ts
@@ -1,3 +1,13 @@
-import SSwitch from './SSwitch.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
+
+import _SSwitch from './SSwitch.vue'
+
+const SSwitch = _SSwitch as SFCWithInstall<typeof _SSwitch>
+
+SSwitch.install = function (vue: VueConstructor) {
+  vue.component(Components.SSwitch, SSwitch)
+}
 
 export { SSwitch }
+export default SSwitch
diff --git a/src/components/Tab/STab/index.ts b/src/components/Tab/STab/index.ts
new file mode 100644
index 00000000..334dad36
--- /dev/null
+++ b/src/components/Tab/STab/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import { TabPane } from 'element-ui'
+
+const STab = TabPane as SFCWithInstall<typeof TabPane>
+
+STab.install = function (vue: VueConstructor) {
+  vue.component(Components.STab, STab)
+}
+
+export { STab }
+export default STab
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs/STabs.vue
similarity index 94%
rename from src/components/Tab/STabs.vue
rename to src/components/Tab/STabs/STabs.vue
index 2379be4d..165fa132 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs/STabs.vue
@@ -22,9 +22,9 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { DesignSystemInject } from '../DesignSystem'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { TabsType, TabsPosition } from './consts'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { TabsType, TabsPosition } from '../consts'
 
 @Component
 export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject) {
diff --git a/src/components/Tab/STabs/index.ts b/src/components/Tab/STabs/index.ts
new file mode 100644
index 00000000..4bcc1154
--- /dev/null
+++ b/src/components/Tab/STabs/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _STabs from './STabs.vue'
+
+const STabs = _STabs as SFCWithInstall<typeof _STabs>
+
+STabs.install = function (vue: VueConstructor) {
+  vue.component(Components.STabs, STabs)
+}
+
+export { STabs }
+export default STabs
diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts
index 7381c960..fc061f83 100644
--- a/src/components/Tab/index.ts
+++ b/src/components/Tab/index.ts
@@ -1,9 +1,4 @@
-import Vue from 'vue'
-import { TabPane } from 'element-ui'
 
-import STabs from './STabs.vue'
-import { TabsType, TabsPosition } from './consts'
-
-const STab = Vue.component('STab', TabPane)
-
-export { STab, STabs, TabsType, TabsPosition }
+export { STab } from './STab'
+export { STabs } from './STabs'
+export { TabsType, TabsPosition } from './consts'
diff --git a/src/components/Table/SHierarchicalTable.vue b/src/components/Table/SHierarchicalTable/SHierarchicalTable.vue
similarity index 91%
rename from src/components/Table/SHierarchicalTable.vue
rename to src/components/Table/SHierarchicalTable/SHierarchicalTable.vue
index b9a6c6e1..f30aa377 100644
--- a/src/components/Table/SHierarchicalTable.vue
+++ b/src/components/Table/SHierarchicalTable/SHierarchicalTable.vue
@@ -1,96 +1,96 @@
-<template>
-  <div class="s-hierarchical-table">
-    <s-table
-      :class="{
-        's-hierarchical-table-level': true,
-        's-hierarchical-table-level--last': levelIndex === data.length - 1
-      }"
-      v-for="(level, levelIndex) in data"
-      :key="level.name"
-      :data="level.content"
-      :size="computedSize"
-      :border="false"
-      :row-class-name="({ row }) => getRowClassName({ row, levelIndex })"
-      @select="handleSelect"
-      @select-all="handleSelectAll"
-      @selection-change="handleSelectionChange"
-      @row-click="row => $emit('row-click', row, level)"
-      :empty-text="emptyText"
-    >
-      <s-table-column
-        v-if="levelIndex === (data.length - 1)"
-        type="selection"
-      />
-      <s-table-column
-        prop="value"
-        :label="level.name"
-      >
-        <template slot-scope="{ row }">
-          <slot
-            :name="level.id"
-            :value="row"
-          >
-            {{ row }}
-          </slot>
-        </template>
-      </s-table-column>
-    </s-table>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
-
-import SizeMixin from '../../mixins/SizeMixin'
-import STable from './STable.vue'
-import STableColumn from './STableColumn.vue'
-
-@Component({
-  components: {
-    STable,
-    STableColumn
-  }
-})
-export default class SHierarchicalTable extends Mixins(SizeMixin) {
-  /**
-   * Data of the table.
-   *
-   * By default it's set to an empty array
-   */
-  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
-  /**
-   * Path of the table.
-   *
-   * By default it's set to an empty array
-   */
-  @Prop({ default: () => [], type: Array }) readonly path!: Array<any>
-  /**
-   * A message for an empty data array.
-   *
-   * By default it's set to `"No data"`
-   */
-  @Prop({ default: 'No data', type: String }) readonly emptyText!: string
-
-  handleSelect (selection: Array<any>, row: any): void {
-    this.$emit('select', selection, row)
-  }
-
-  handleSelectAll (selection: Array<any>): void {
-    this.$emit('select-all', selection)
-  }
-
-  handleSelectionChange (selection: Array<any>): void {
-    this.$emit('selection-change', selection)
-  }
-
-  getRowClassName ({ levelIndex, row }) {
-    const classes = ['s-hierarchical-table-row']
-    if (this.path[levelIndex] === row) {
-      classes.push('s-hierarchical-table-row--active')
-    }
-    return classes.join(' ')
-  }
-
-  @Provide('sHierarchicalTable') sHierarchicalTable = this
-}
-</script>
+<template>
+  <div class="s-hierarchical-table">
+    <s-table
+      :class="{
+        's-hierarchical-table-level': true,
+        's-hierarchical-table-level--last': levelIndex === data.length - 1
+      }"
+      v-for="(level, levelIndex) in data"
+      :key="level.name"
+      :data="level.content"
+      :size="computedSize"
+      :border="false"
+      :row-class-name="({ row }) => getRowClassName({ row, levelIndex })"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+      @selection-change="handleSelectionChange"
+      @row-click="row => $emit('row-click', row, level)"
+      :empty-text="emptyText"
+    >
+      <s-table-column
+        v-if="levelIndex === (data.length - 1)"
+        type="selection"
+      />
+      <s-table-column
+        prop="value"
+        :label="level.name"
+      >
+        <template slot-scope="{ row }">
+          <slot
+            :name="level.id"
+            :value="row"
+          >
+            {{ row }}
+          </slot>
+        </template>
+      </s-table-column>
+    </s-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
+
+import SizeMixin from '../../../mixins/SizeMixin'
+import STable from '../STable'
+import STableColumn from '../STableColumn'
+
+@Component({
+  components: {
+    STable,
+    STableColumn
+  }
+})
+export default class SHierarchicalTable extends Mixins(SizeMixin) {
+  /**
+   * Data of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+  /**
+   * Path of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly path!: Array<any>
+  /**
+   * A message for an empty data array.
+   *
+   * By default it's set to `"No data"`
+   */
+  @Prop({ default: 'No data', type: String }) readonly emptyText!: string
+
+  handleSelect (selection: Array<any>, row: any): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection: Array<any>): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection: Array<any>): void {
+    this.$emit('selection-change', selection)
+  }
+
+  getRowClassName ({ levelIndex, row }) {
+    const classes = ['s-hierarchical-table-row']
+    if (this.path[levelIndex] === row) {
+      classes.push('s-hierarchical-table-row--active')
+    }
+    return classes.join(' ')
+  }
+
+  @Provide('sHierarchicalTable') sHierarchicalTable = this
+}
+</script>
diff --git a/src/components/Table/SHierarchicalTable/index.ts b/src/components/Table/SHierarchicalTable/index.ts
new file mode 100644
index 00000000..f2a7de91
--- /dev/null
+++ b/src/components/Table/SHierarchicalTable/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SHierarchicalTable from './SHierarchicalTable.vue'
+
+const SHierarchicalTable = _SHierarchicalTable as SFCWithInstall<typeof _SHierarchicalTable>
+
+SHierarchicalTable.install = function (vue: VueConstructor) {
+  vue.component(Components.SHierarchicalTable, SHierarchicalTable)
+}
+
+export { SHierarchicalTable }
+export default SHierarchicalTable
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable/STable.vue
similarity index 98%
rename from src/components/Table/STable.vue
rename to src/components/Table/STable/STable.vue
index fc249316..86f95f99 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable/STable.vue
@@ -63,9 +63,9 @@ import { Component, Mixins, Prop, Ref, Provide } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
-import SizeMixin from '../../mixins/SizeMixin'
-import { TooltipTheme } from '../Tooltip'
-import { SortDirection } from './consts'
+import SizeMixin from '../../../mixins/SizeMixin'
+import { TooltipTheme } from '../../Tooltip/consts'
+import { SortDirection } from '../consts'
 
 @Component
 export default class STable extends Mixins(SizeMixin) {
diff --git a/src/components/Table/STable/index.ts b/src/components/Table/STable/index.ts
new file mode 100644
index 00000000..21315cdb
--- /dev/null
+++ b/src/components/Table/STable/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _STable from './STable.vue'
+
+const STable = _STable as SFCWithInstall<typeof _STable>
+
+STable.install = function (vue: VueConstructor) {
+  vue.component(Components.STable, STable)
+}
+
+export { STable }
+export default STable
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn/STableColumn.vue
similarity index 95%
rename from src/components/Table/STableColumn.vue
rename to src/components/Table/STableColumn/STableColumn.vue
index 6de202dc..02901c93 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn/STableColumn.vue
@@ -1,205 +1,205 @@
-<template>
-  <el-table-column
-    :type="type"
-    :index="index"
-    :label="label"
-    :column-key="columnKey"
-    :prop="prop"
-    :width="computedWidth"
-    :min-width="minWidth"
-    :fixed="fixedPosition || false"
-    :render-header="renderHeader"
-    :sortable="sortable"
-    :sort-method="sortMethod"
-    :sort-by="sortBy"
-    :sort-orders="sortOrders"
-    :resizable="resizable"
-    :formatter="formatter"
-    :show-overflow-tooltip="showOverflowTooltip"
-    :align="align"
-    :header-align="headerAlign"
-    :class-name="className"
-    :label-class-name="labelClassName"
-    :selectable="selectable"
-    :reserve-selection="reserveSelection"
-    :filters="filters"
-    :filter-placement="filterPlacement"
-    :filter-multiple="filterMultiple"
-    :filter-method="filterMethod"
-    :filtered-value="filteredValue"
-  >
-    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
-  </el-table-column>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
-
-import { Size } from '@/types'
-
-import { SortDirection, ColumnAlignment } from './consts'
-
-@Component
-export default class STableColumn extends Vue {
-  /**
-   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
-   * If it's not defined, then it will be usual column without modifications
-   */
-  @Prop({ default: '', type: String }) readonly type!: string
-  /**
-   * Customize indices for each row. It works on columns with `type="index"`.
-   * Can be `number` or `(index: number) => number`
-   */
-  @Prop() readonly index!: number | ((index: number) => number)
-  /**
-   * Label of the column
-   */
-  @Prop({ default: '', type: String }) readonly label!: string
-  /**
-   * Column's key. If you need to use the `filter-change` event,
-   * you need this attribute to identify which column is being filtered
-   */
-  @Prop({ default: '', type: String }) readonly columnKey!: string
-  /**
-   * Name of the field
-   */
-  @Prop({ default: '', type: String }) readonly prop!: string
-  /**
-   * Column width in pixels. For instance, `width="80"`
-   */
-  @Prop({ type: String }) readonly width!: string
-  /**
-   * Column minimum width in pixels. Columns with `width` has a fixed width,
-   * while columns with `min-width` has a width that is distributed in proportion.
-   * For instance, `min-width="80"`
-   */
-  @Prop({ type: String }) readonly minWidth!: string
-  /**
-   * Will column be fixed at `"left"` or `"right"` position.
-   * If it's not defined, then it will be not fixed by default.
-   */
-  @Prop({ default: '', type: String }) readonly fixedPosition!: string
-  /**
-   * Render function for table header of this column.
-   * `(h, { column, $index }) => any`
-   */
-  @Prop() readonly renderHeader!: (h, { column, $index }) => any
-  /**
-   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
-   * Remote sorting can be done by setting this attribute to `"custom"`
-   * and listening to the `sort-change` event of the Table component
-   */
-  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
-  /**
-   * Sorting method like `Array.sort`, works when `sortable` is true.
-   * `(a, b) => number`
-   */
-  @Prop() readonly sortMethod!: (a, b) => number
-  /**
-   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
-   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
-   *
-   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
-   */
-  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
-  /**
-   * The order of the sorting strategies used when sorting the data,
-   * works when `sortable` is true.
-   * Accepts an array, as the user clicks on the header,
-   * the column is sorted in order of the elements in the array.
-   *
-   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
-   *
-   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
-   */
-  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
-  /**
-   * Can column be resized. It works only when the table has `border` set to true.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
-  /**
-   * A function that formats cell content. `(row, column, cellValue, index) => any`
-   */
-  @Prop() readonly formatter!: (row, column, cellValue, index) => any
-  /**
-   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
-  /**
-   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
-   *
-   * `"left"` is set by default
-   */
-  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
-  /**
-   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
-   *
-   * `"left"` is set by default
-   */
-  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
-  /**
-   * Class name of cells in the column
-   */
-  @Prop({ type: String }) readonly className!: string
-  /**
-   * Class name of the label of this column
-   */
-  @Prop({ default: '', type: String }) readonly labelClassName!: string
-  /**
-   * A function that determines if a certain row can be selected.
-   * It works when `type="selection"`. `(row, index) => boolean`
-   */
-  @Prop() readonly selectable!: (row, index) => boolean
-  /**
-   * Will selection be reserved after data refreshing.
-   * It works when `type="selection"`.
-   *
-   * `row-key` is required for this to work.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
-  /**
-   * TODO: create custom dropdown menu with filters
-   */
-  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ default: '', type: String }) readonly filterPlacement!: string
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop() readonly filterMethod!: (value, row, column) => boolean
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ type: Array }) readonly filteredValue!: Array<any>
-
-  @Inject({ default: '', from: 'sTable' }) sTable
-
-  get computedWidth () {
-    const tableBorder = (this.sTable || {}).border
-    const size = (this.sTable || {}).size
-    if (!this.width && this.type === 'selection') {
-      return !tableBorder ? ({
-        [Size.SMALL]: '46',
-        [Size.MEDIUM]: '48'
-      }[size] || '52') : ({
-        [Size.SMALL]: '42',
-        [Size.MEDIUM]: '44'
-      }[size] || '48')
-    }
-    return this.width
-  }
-}
-</script>
+<template>
+  <el-table-column
+    :type="type"
+    :index="index"
+    :label="label"
+    :column-key="columnKey"
+    :prop="prop"
+    :width="computedWidth"
+    :min-width="minWidth"
+    :fixed="fixedPosition || false"
+    :render-header="renderHeader"
+    :sortable="sortable"
+    :sort-method="sortMethod"
+    :sort-by="sortBy"
+    :sort-orders="sortOrders"
+    :resizable="resizable"
+    :formatter="formatter"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :align="align"
+    :header-align="headerAlign"
+    :class-name="className"
+    :label-class-name="labelClassName"
+    :selectable="selectable"
+    :reserve-selection="reserveSelection"
+    :filters="filters"
+    :filter-placement="filterPlacement"
+    :filter-multiple="filterMultiple"
+    :filter-method="filterMethod"
+    :filtered-value="filteredValue"
+  >
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
+
+import { Size } from '../../../types'
+
+import { SortDirection, ColumnAlignment } from '../consts'
+
+@Component
+export default class STableColumn extends Vue {
+  /**
+   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
+   * If it's not defined, then it will be usual column without modifications
+   */
+  @Prop({ default: '', type: String }) readonly type!: string
+  /**
+   * Customize indices for each row. It works on columns with `type="index"`.
+   * Can be `number` or `(index: number) => number`
+   */
+  @Prop() readonly index!: number | ((index: number) => number)
+  /**
+   * Label of the column
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * Column's key. If you need to use the `filter-change` event,
+   * you need this attribute to identify which column is being filtered
+   */
+  @Prop({ default: '', type: String }) readonly columnKey!: string
+  /**
+   * Name of the field
+   */
+  @Prop({ default: '', type: String }) readonly prop!: string
+  /**
+   * Column width in pixels. For instance, `width="80"`
+   */
+  @Prop({ type: String }) readonly width!: string
+  /**
+   * Column minimum width in pixels. Columns with `width` has a fixed width,
+   * while columns with `min-width` has a width that is distributed in proportion.
+   * For instance, `min-width="80"`
+   */
+  @Prop({ type: String }) readonly minWidth!: string
+  /**
+   * Will column be fixed at `"left"` or `"right"` position.
+   * If it's not defined, then it will be not fixed by default.
+   */
+  @Prop({ default: '', type: String }) readonly fixedPosition!: string
+  /**
+   * Render function for table header of this column.
+   * `(h, { column, $index }) => any`
+   */
+  @Prop() readonly renderHeader!: (h, { column, $index }) => any
+  /**
+   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
+   * Remote sorting can be done by setting this attribute to `"custom"`
+   * and listening to the `sort-change` event of the Table component
+   */
+  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
+  /**
+   * Sorting method like `Array.sort`, works when `sortable` is true.
+   * `(a, b) => number`
+   */
+  @Prop() readonly sortMethod!: (a, b) => number
+  /**
+   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
+   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
+   *
+   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
+   */
+  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
+  /**
+   * The order of the sorting strategies used when sorting the data,
+   * works when `sortable` is true.
+   * Accepts an array, as the user clicks on the header,
+   * the column is sorted in order of the elements in the array.
+   *
+   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
+   *
+   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
+   */
+  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
+  /**
+   * Can column be resized. It works only when the table has `border` set to true.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
+  /**
+   * A function that formats cell content. `(row, column, cellValue, index) => any`
+   */
+  @Prop() readonly formatter!: (row, column, cellValue, index) => any
+  /**
+   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
+  /**
+   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
+  /**
+   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
+  /**
+   * Class name of cells in the column
+   */
+  @Prop({ type: String }) readonly className!: string
+  /**
+   * Class name of the label of this column
+   */
+  @Prop({ default: '', type: String }) readonly labelClassName!: string
+  /**
+   * A function that determines if a certain row can be selected.
+   * It works when `type="selection"`. `(row, index) => boolean`
+   */
+  @Prop() readonly selectable!: (row, index) => boolean
+  /**
+   * Will selection be reserved after data refreshing.
+   * It works when `type="selection"`.
+   *
+   * `row-key` is required for this to work.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
+  /**
+   * TODO: create custom dropdown menu with filters
+   */
+  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: '', type: String }) readonly filterPlacement!: string
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop() readonly filterMethod!: (value, row, column) => boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Inject({ default: '', from: 'sTable' }) sTable
+
+  get computedWidth () {
+    const tableBorder = (this.sTable || {}).border
+    const size = (this.sTable || {}).size
+    if (!this.width && this.type === 'selection') {
+      return !tableBorder ? ({
+        [Size.SMALL]: '46',
+        [Size.MEDIUM]: '48'
+      }[size] || '52') : ({
+        [Size.SMALL]: '42',
+        [Size.MEDIUM]: '44'
+      }[size] || '48')
+    }
+    return this.width
+  }
+}
+</script>
diff --git a/src/components/Table/STableColumn/index.ts b/src/components/Table/STableColumn/index.ts
new file mode 100644
index 00000000..2c85fd6a
--- /dev/null
+++ b/src/components/Table/STableColumn/index.ts
@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _STableColumn from './STableColumn.vue'
+
+const STableColumn = _STableColumn as SFCWithInstall<typeof _STableColumn>
+
+STableColumn.install = function (vue: VueConstructor) {
+  vue.component(Components.STableColumn, STableColumn)
+}
+
+export { STableColumn }
+export default STableColumn
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 402c3c3c..f62027ec 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,14 +1,4 @@
-import STable from './STable.vue'
-import SHierarchicalTable from './SHierarchicalTable.vue'
-import STableColumn from './STableColumn.vue'
-import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
-
-export {
-  STable,
-  SHierarchicalTable,
-  STableColumn,
-  ColumnAlignment,
-  ColumnFixedPosition,
-  ColumnType,
-  SortDirection
-}
+export { STable } from './STable'
+export { SHierarchicalTable } from './SHierarchicalTable'
+export { STableColumn } from './STableColumn'
+export { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index df3f3692..d88d2e46 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -24,11 +24,10 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
-import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
-import { DesignSystemInject } from '../DesignSystem'
+import DesignSystemInject from '../DesignSystem/DesignSystemInject'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Theme } from '../../utils/Theme'
 import { TooltipTheme, TooltipPlacement } from './consts'
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index 4b6a3685..540d9cad 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,4 +1,14 @@
-import STooltip from './STooltip.vue'
-import { TooltipTheme, TooltipPlacement } from './consts'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
 
-export { STooltip, TooltipPlacement, TooltipTheme }
+import _STooltip from './STooltip.vue'
+
+const STooltip = _STooltip as SFCWithInstall<typeof _STooltip>
+
+STooltip.install = function (vue: VueConstructor) {
+  vue.component(Components.STooltip, STooltip)
+}
+
+export { STooltip }
+export { TooltipTheme, TooltipPlacement } from './consts'
+export default STooltip
diff --git a/src/components/index.ts b/src/components/index.ts
index 7663ae69..2fa2c287 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,90 +1,31 @@
-import Vue from 'vue'
-
-import '../styles/index.scss'
-
-import { ElementUIPlugin } from '../plugins'
-
-import { SApp } from './Layout/App'
-import { SAside } from './Layout/Aside'
-import { SBreadcrumb, SBreadcrumbItem } from './Breadcrumb'
-import { SButton, SButtonGroup } from './Button'
-import { SCard } from './Card'
-import { SCheckbox } from './Checkbox'
-import { SCol } from './Layout/Col'
-import { SCollapse, SCollapseItem } from './Collapse'
-import { SContainer } from './Layout/Container'
-import { SDatePicker } from './DatePicker'
-import { SDesignSystemProvider } from './DesignSystem'
-import { SDialog } from './Dialog'
-import { SDivider } from './Divider'
-import { SDropdown, SDropdownItem } from './Dropdown'
-import { SFooter } from './Layout/Footer'
-import { SForm, SFormItem } from './Form'
-import { SHeader } from './Layout/Header'
-import { SIcon } from './Icon'
-import { SInput, SFloatInput, SJsonInput } from './Input'
-import { SMain } from './Layout/Main'
-import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
-import { SPagination } from './Pagination'
-import { SSlider } from './Slider'
-import { SSwitch } from './Switch'
-import { SRadio, SRadioGroup } from './Radio'
-import { SRow } from './Layout/Row'
-import { SScrollSectionItem, SScrollSections } from './ScrollSections'
-import { SSelect, SOption, SOptionGroup } from './Select'
-import { STab, STabs } from './Tab'
-import { STable, SHierarchicalTable, STableColumn } from './Table'
-import { STooltip } from './Tooltip'
-
-Vue.use(ElementUIPlugin)
-
-export {
-  SApp,
-  SAside,
-  SBreadcrumb,
-  SBreadcrumbItem,
-  SButton,
-  SButtonGroup,
-  SCard,
-  SCheckbox,
-  SCol,
-  SCollapse,
-  SCollapseItem,
-  SContainer,
-  SDatePicker,
-  SDesignSystemProvider,
-  SDialog,
-  SDivider,
-  SDropdown,
-  SDropdownItem,
-  SFooter,
-  SForm,
-  SFormItem,
-  SHeader,
-  SIcon,
-  SInput,
-  SFloatInput,
-  SJsonInput,
-  SMain,
-  SMenu,
-  SMenuItem,
-  SMenuItemGroup,
-  SOption,
-  SOptionGroup,
-  SPagination,
-  SRadio,
-  SRadioGroup,
-  SRow,
-  SScrollSectionItem,
-  SScrollSections,
-  SSelect,
-  SSlider,
-  SSubmenu,
-  SSwitch,
-  STab,
-  STabs,
-  STable,
-  SHierarchicalTable,
-  STableColumn,
-  STooltip
-}
+export { SApp } from './Layout/App'
+export { SAside } from './Layout/Aside'
+export { SBreadcrumb, SBreadcrumbItem } from './Breadcrumb'
+export { SButton, SButtonGroup } from './Button'
+export { SCard } from './Card'
+export { SCheckbox } from './Checkbox'
+export { SCol } from './Layout/Col'
+export { SCollapse, SCollapseItem } from './Collapse'
+export { SContainer } from './Layout/Container'
+export { SDatePicker } from './DatePicker'
+export { SDesignSystemProvider } from './DesignSystem'
+export { SDialog } from './Dialog'
+export { SDivider } from './Divider'
+export { SDropdown, SDropdownItem } from './Dropdown'
+export { SFooter } from './Layout/Footer'
+export { SForm, SFormItem } from './Form'
+export { SHeader } from './Layout/Header'
+export { SIcon } from './Icon'
+export { SInput, SFloatInput, SJsonInput } from './Input'
+export { SMain } from './Layout/Main'
+export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
+export { SPagination } from './Pagination'
+export { SSlider } from './Slider'
+export { SSwitch } from './Switch'
+export { SRadio, SRadioGroup } from './Radio'
+export { SRow } from './Layout/Row'
+export { SScrollSectionItem, SScrollSections } from './ScrollSections'
+export { SSelect, SOption, SOptionGroup } from './Select'
+export { STab, STabs } from './Tab'
+export { STable, SHierarchicalTable, STableColumn } from './Table'
+export { STooltip } from './Tooltip'
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 4800c0dd..6f5f144e 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,3 +1 @@
-import { Float, Integer } from './number'
-
-export { Float, Integer }
+export { Float, Integer } from './number'
diff --git a/src/index.ts b/src/index.ts
index 63eaff05..f200c658 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,4 @@
 import Vue from 'vue'
-
 import {
   SApp,
   SAside,
@@ -50,86 +49,71 @@ import {
   STableColumn,
   STooltip
 } from './components'
-
 import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
-import { modules, Modules } from './store'
 import { setTheme, setDesignSystem } from './utils'
 import { DesignSystemTypes } from './utils/DesignSystem'
 import { Themes } from './utils/Theme'
+import { SoramitsuUIStorePlugin, ElementUIPlugin } from './plugins'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 import { SDialogMixin } from './mixins'
 
-const libraryComponentsMap = {
-  [Components.SApp]: SApp,
-  [Components.SAside]: SAside,
-  [Components.SBreadcrumb]: SBreadcrumb,
-  [Components.SBreadcrumbItem]: SBreadcrumbItem,
-  [Components.SButton]: SButton,
-  [Components.SButtonGroup]: SButtonGroup,
-  [Components.SCard]: SCard,
-  [Components.SCheckbox]: SCheckbox,
-  [Components.SCol]: SCol,
-  [Components.SCollapse]: SCollapse,
-  [Components.SCollapseItem]: SCollapseItem,
-  [Components.SContainer]: SContainer,
-  [Components.SDatePicker]: SDatePicker,
-  [Components.SDesignSystemProvider]: SDesignSystemProvider,
-  [Components.SDialog]: SDialog,
-  [Components.SDivider]: SDivider,
-  [Components.SDropdown]: SDropdown,
-  [Components.SDropdownItem]: SDropdownItem,
-  [Components.SFooter]: SFooter,
-  [Components.SForm]: SForm,
-  [Components.SFormItem]: SFormItem,
-  [Components.SHeader]: SHeader,
-  [Components.SIcon]: SIcon,
-  [Components.SInput]: SInput,
-  [Components.SFloatInput]: SFloatInput,
-  [Components.SJsonInput]: SJsonInput,
-  [Components.SMain]: SMain,
-  [Components.SMenu]: SMenu,
-  [Components.SMenuItem]: SMenuItem,
-  [Components.SMenuItemGroup]: SMenuItemGroup,
-  [Components.SOption]: SOption,
-  [Components.SOptionGroup]: SOptionGroup,
-  [Components.SPagination]: SPagination,
-  [Components.SRadio]: SRadio,
-  [Components.SRadioGroup]: SRadioGroup,
-  [Components.SRow]: SRow,
-  [Components.SScrollSectionItem]: SScrollSectionItem,
-  [Components.SScrollSections]: SScrollSections,
-  [Components.SSlider]: SSlider,
-  [Components.SSubmenu]: SSubmenu,
-  [Components.SSwitch]: SSwitch,
-  [Components.STab]: STab,
-  [Components.STabs]: STabs,
-  [Components.STable]: STable,
-  [Components.SHierarchicalTable]: SHierarchicalTable,
-  [Components.STableColumn]: STableColumn,
-  [Components.STooltip]: STooltip
-}
-
-const libraryDirectivesMap = {
-  [Directives.Float]: Float,
-  [Directives.Integer]: Integer
-}
-
+// use to install all library dependencies
 const SoramitsuElements = {
   install (vue: typeof Vue, options?: any): void {
-    // TODO: maybe we'll need error message about storage here
-    if (options && options.store) {
-      Object.values(Modules).forEach(molude => {
-        options.store.registerModule(molude, modules[molude])
-      })
-    }
-
-    const components: Array<string> = options && options.components ? options.components : Object.values(Components)
-    const directives: Array<string> = options && options.directives ? options.directives : Object.values(Directives)
-
-    components.forEach(item => vue.component(item, libraryComponentsMap[item]))
-    directives.forEach(item => vue.component(item, libraryDirectivesMap[item]))
+    vue.use(SoramitsuUIStorePlugin, options)
+    vue.use(ElementUIPlugin)
+    vue.directive(Directives.Float, Float)
+    vue.directive(Directives.Integer, Integer)
+    vue.use(SApp)
+    vue.use(SAside)
+    vue.use(SBreadcrumb)
+    vue.use(SBreadcrumbItem)
+    vue.use(SButton)
+    vue.use(SButtonGroup)
+    vue.use(SCard)
+    vue.use(SCheckbox)
+    vue.use(SCol)
+    vue.use(SCollapse)
+    vue.use(SCollapseItem)
+    vue.use(SContainer)
+    vue.use(SDatePicker)
+    vue.use(SDesignSystemProvider)
+    vue.use(SDialog)
+    vue.use(SDivider)
+    vue.use(SDropdown)
+    vue.use(SDropdownItem)
+    vue.use(SFooter)
+    vue.use(SForm)
+    vue.use(SFormItem)
+    vue.use(SHeader)
+    vue.use(SIcon)
+    vue.use(SInput)
+    vue.use(SFloatInput)
+    vue.use(SJsonInput)
+    vue.use(SMain)
+    vue.use(SMenu)
+    vue.use(SMenuItem)
+    vue.use(SMenuItemGroup)
+    vue.use(SOption)
+    vue.use(SOptionGroup)
+    vue.use(SPagination)
+    vue.use(SRadio)
+    vue.use(SRadioGroup)
+    vue.use(SRow)
+    vue.use(SScrollSectionItem)
+    vue.use(SScrollSections)
+    vue.use(SSelect)
+    vue.use(SSlider)
+    vue.use(SSubmenu)
+    vue.use(SSwitch)
+    vue.use(STab)
+    vue.use(STabs)
+    vue.use(STable)
+    vue.use(SHierarchicalTable)
+    vue.use(STableColumn)
+    vue.use(STooltip)
   }
 }
 
@@ -148,6 +132,7 @@ export {
   Message,
   MessageBox,
   Notification,
+  SDialogMixin,
   SApp,
   SAside,
   SBreadcrumb,
@@ -178,9 +163,9 @@ export {
   SMenu,
   SMenuItem,
   SMenuItemGroup,
-  SPagination,
   SOption,
   SOptionGroup,
+  SPagination,
   SRadio,
   SRadioGroup,
   SRow,
@@ -195,7 +180,6 @@ export {
   STable,
   SHierarchicalTable,
   STableColumn,
-  STooltip,
-  SDialogMixin
+  STooltip
 }
 export default SoramitsuElements
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index a8ed1733..c6a1e9da 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1 +1,2 @@
 export { default as ElementUIPlugin } from './elementUI'
+export { default as SoramitsuUIStorePlugin } from './soramitsuUIStore'
diff --git a/src/plugins/soramitsuUIStore.ts b/src/plugins/soramitsuUIStore.ts
new file mode 100644
index 00000000..5b7af348
--- /dev/null
+++ b/src/plugins/soramitsuUIStore.ts
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import { modules, Modules } from '../store'
+
+const SoramitsuUIStorePlugin = {
+  install (vue: typeof Vue, options?: any): void {
+    // TODO: maybe we'll need error message about storage here
+    if (options && options.store) {
+      Object.values(Modules).forEach(molude => {
+        options.store.registerModule(molude, modules[molude])
+      })
+    }
+  }
+}
+
+export default SoramitsuUIStorePlugin
diff --git a/src/types/components.ts b/src/types/components.ts
index e5cd2b7f..938e29d7 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -1,3 +1,7 @@
+import Vue from 'vue'
+
+export type SFCWithInstall<T> = T & { install(vue: typeof Vue): void }
+
 export enum Components {
   SApp = 'SApp',
   SAside = 'SAside',
diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts
index d9f24faa..6b31711a 100644
--- a/src/types/shims-vue.d.ts
+++ b/src/types/shims-vue.d.ts
@@ -1,4 +1,9 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import Vue, { VueConstructor, PluginFunction } from 'vue'
+
+  type VueConstructorOverride = VueConstructor<Vue> & { install: PluginFunction<any> }
+
+  const _default: VueConstructorOverride
+
+  export default _default
 }

From 2e3e4af5a2e7a4372a2138ebcb4cde0c14584163 Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Mon, 12 Jul 2021 08:29:59 +0300
Subject: [PATCH 5/5] PW-207: Design Improvements (#248)

* Updated switch, inputs, button, card neu styles.
* Updated UI Lib version.
* Updated neumorphism styles.
* Added collapse button neumorphic styles.
* Updated cards and buttons neomorphic styles.
---
 package.json                                  |  2 +-
 .../Collapse/SCollapse/SCollapse.vue          | 14 +++-
 src/stories/Collapse/SCollapse.stories.ts     | 15 ++--
 src/stories/Intro/Customization.stories.ts    |  2 +-
 src/stories/SDialog.stories.ts                | 68 ++++++++++---------
 src/stories/SInput.stories.ts                 |  2 +-
 src/styles/neumorphism/button.scss            | 31 ++++++---
 src/styles/neumorphism/card.scss              |  6 +-
 src/styles/neumorphism/collapse.scss          | 19 ++++++
 src/styles/neumorphism/dialog.scss            |  6 ++
 src/styles/neumorphism/index.scss             |  2 +
 src/styles/neumorphism/input.scss             |  4 +-
 src/styles/neumorphism/radio.scss             |  4 +-
 src/styles/neumorphism/switch.scss            |  3 +-
 src/styles/neumorphism/tabs.scss              |  5 +-
 src/styles/neumorphism/theme-variables.scss   |  2 +-
 src/styles/variables.scss                     |  7 +-
 17 files changed, 126 insertions(+), 66 deletions(-)
 create mode 100644 src/styles/neumorphism/collapse.scss
 create mode 100644 src/styles/neumorphism/dialog.scss

diff --git a/package.json b/package.json
index 2a4a4553..56b220af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/components/Collapse/SCollapse/SCollapse.vue b/src/components/Collapse/SCollapse/SCollapse.vue
index 6d5b7b74..b4b5d6b0 100644
--- a/src/components/Collapse/SCollapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse/SCollapse.vue
@@ -1,5 +1,6 @@
 <template>
   <el-collapse
+    :class="computedClasses"
     :value="value"
     :accordion="accordion"
     :style="computedStyles"
@@ -10,12 +11,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
+import { Mixins, Component, Prop, Provide } from 'vue-property-decorator'
 
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
 import { BorderTypes } from '../consts'
 
 @Component
-export default class SCollapse extends Vue {
+export default class SCollapse extends Mixins(DesignSystemInject) {
   /**
    * Value of the collapse component. Can be `string / number / Array (non-accordion mode)`
    */
@@ -41,6 +43,14 @@ export default class SCollapse extends Vue {
 
   @Provide('sCollapse') sCollapse = this
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    return cssClasses
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (!this.borders || this.bordersType === BorderTypes.INTERNAL) {
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index cd83d067..1fd5a2d2 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -1,8 +1,8 @@
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 
-import { SCollapse, SCollapseItem } from '../../components'
-
+import { SCollapse, SCollapseItem, SDesignSystemProvider } from '../../components'
 import { BorderTypes } from '../../components/Collapse'
+import { DesignSystemTypes } from '../../utils/DesignSystem'
 
 export default {
   component: SCollapse,
@@ -11,8 +11,9 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
+  components: { SCollapse, SCollapseItem, SDesignSystemProvider },
+  template: `<s-design-system-provider :value="designSystem">
+              <s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -30,8 +31,12 @@ export const configurable = () => ({
                  <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
                  <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
                </s-collapse-item>
-             </s-collapse>`,
+             </s-collapse>
+             </s-design-system-provider>`,
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     accordion: {
       default: boolean('Accordion', false)
     },
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index a5451ddb..bc368409 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -67,7 +67,7 @@ export const configurable = () => ({
                    v-for="button in buttons"
                    :key="button.type"
                    size="small"
-                   icon="refresh"
+                   icon="refresh-16"
                    :type="button.type"
                    :tooltip="button.tooltip"
                  >
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 2f5456dd..e7ec3795 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -1,7 +1,8 @@
 import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
-import { SDialog, SRow, SButton } from '../components'
+import { SDialog, SRow, SButton, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: SDialog,
@@ -10,40 +11,45 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SDialog, SRow, SButton },
-  template: `<s-row
-               class="s-flex"
-               style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
-             >
-               <s-button size="medium" @click="visible = true">Open Dialog</s-button>
-               <s-dialog
-                 :visible.sync="visible"
-                 :modal="modal"
-                 :title="title"
-                 :width="width"
-                 :fullscreen="fullscreen"
-                 :top="top"
-                 :border-radius="borderRadius"
-                 :show-close="showClose"
-                 :close-on-click-modal="closeOnClickModal"
-                 :close-on-esc="closeOnEsc"
-                 :center="center"
-                 @open="handleOpen"
-                 @close="handleClose"
-                 @after-opened="handleAfterOpened"
-                 @after-closed="handleAfterClosed"
-               >
-                 <span>Default content</span>
-                 <template #footer>
-                   <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
-                   <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
-                 </template>
-               </s-dialog>
-             </s-row>`,
+  components: { SDialog, SRow, SButton, SDesignSystemProvider },
+  template: `<s-design-system-provider :value="designSystem">
+              <s-row
+                class="s-flex"
+                style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
+              >
+                <s-button size="medium" @click="visible = true">Open Dialog</s-button>
+                <s-dialog
+                  :visible.sync="visible"
+                  :modal="modal"
+                  :title="title"
+                  :width="width"
+                  :fullscreen="fullscreen"
+                  :top="top"
+                  :border-radius="borderRadius"
+                  :show-close="showClose"
+                  :close-on-click-modal="closeOnClickModal"
+                  :close-on-esc="closeOnEsc"
+                  :center="center"
+                  @open="handleOpen"
+                  @close="handleClose"
+                  @after-opened="handleAfterOpened"
+                  @after-closed="handleAfterClosed"
+                >
+                  <span>Default content</span>
+                  <template #footer>
+                    <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
+                    <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
+                  </template>
+                </s-dialog>
+              </s-row>
+            </s-design-system-provider>`,
   data: () => ({
     visible: false
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     modal: {
       default: boolean('Modal', true)
     },
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 29981c57..8095e389 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -68,7 +68,7 @@ export const configurable = () => ({
       default: text('Prefix icon', 'el-icon-search')
     },
     suffix: {
-      default: text('Suffix icon', 'el-icon-search')
+      default: text('Suffix icon', 's-icon-clear-X-16')
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss
index a993c5d3..100e84b1 100644
--- a/src/styles/neumorphism/button.scss
+++ b/src/styles/neumorphism/button.scss
@@ -5,7 +5,7 @@ $neu-button-transition: all 0.25s ease-in-out !default;
 
 $neu-button-background-color-disabled: var(--s-color-utility-surface) !default;
 $neu-button-border-color-disabled: var(--s-color-utility-body) !default;
-$neu-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default;
+$neu-button-box-shadow-disabled: var(--s-shadow-element) !default;
 $neu-button-text-color-disabled: var(--s-color-base-content-tertiary) !default;
 
 // Primary button: common
@@ -49,25 +49,25 @@ $neu-button-secondary-text-color-alternative-active: var(--s-color-base-on-accen
 $neu-button-secondary-border-color: transparent !default;
 $neu-button-secondary-border-color-active: $neu-button-secondary-border-color !default;
 // Secondary button: box-shadow
-$neu-button-secondary-box-shadow: var(--s-shadow-surface) !default;
+$neu-button-secondary-box-shadow: var(--s-shadow-element-pressed) !default;
 $neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default;
-$neu-button-secondary-box-shadow-alternative: var(--s-shadow-element) !default;
+$neu-button-secondary-box-shadow-alternative: $neu-button-secondary-box-shadow !default;
 
 // Tertiary button: common
 $neu-button-tertiary-border-width: 0px !default;
 $neu-button-tertiary-border-style: $neu-button-border-style !default;
 // Tertiary button: background colors
-$neu-button-tertiary-background-color: var(--s-color-utility-surface) !default;
+$neu-button-tertiary-background-color: var(--s-color-utility-body) !default;
 $neu-button-tertiary-background-color-active: $neu-button-tertiary-background-color !default;
 $neu-button-tertiary-background-color-alternative: var(--s-color-utility-body) !default;
 // Tertiary button: text colors
-$neu-button-tertiary-text-color: var(--s-color-base-content-secondary) !default;
-$neu-button-tertiary-text-color-active: var(--s-color-base-content-primary) !default;
+$neu-button-tertiary-text-color: var(--s-color-base-content-tertiary) !default;
+$neu-button-tertiary-text-color-active: var(--s-color-base-content-secondary) !default;
 // Tertiary button: border colors
 $neu-button-tertiary-border-color: transparent !default;
 $neu-button-tertiary-border-color-active: $neu-button-tertiary-border-color !default;
 // Tertiary button: box-shadow
-$neu-button-tertiary-box-shadow: 1px 1px 2px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light) !default;
+$neu-button-tertiary-box-shadow: $neu-button-secondary-box-shadow !default;
 $neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default;
 
 // Action button: common
@@ -90,9 +90,9 @@ $neu-button-action-border-color-hover: $neu-button-action-border-color !default;
 $neu-button-action-border-color-pressed: $neu-button-action-border-color !default;
 $neu-button-action-border-color-alternative: transparent !default;
 // Action button: box-shadow
-$neu-button-action-box-shadow: var(--s-shadow-element) !default;
+$neu-button-action-box-shadow: $neu-button-secondary-box-shadow !default;
 $neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default;
-$neu-button-action-box-shadow-pressed: var(--s-shadow-element-pressed) !default;
+$neu-button-action-box-shadow-pressed: var(--s-shadow-element) !default;
 $neu-button-action-box-shadow-alternative: none !default;
 
 $neu-button-padding-big: 7px 13px !default;
@@ -156,12 +156,18 @@ $neu-button-padding-mini: 3px 6px !default;
       border-color: $neu-button-primary-border-color-hover;
       color: $neu-button-primary-text-color-hover;
       box-shadow: $neu-button-primary-box-shadow-hover;
+      &.is-circle {
+        border-color: $neu-button-primary-background-color-hover;
+      }
     }
     &:active, &.s-pressed {
       background: $neu-button-primary-background-color-pressed;
       border-color: $neu-button-primary-border-color-pressed;
       color: $neu-button-primary-text-color-pressed;
       box-shadow: $neu-button-primary-box-shadow-pressed;
+      &.is-circle {
+        border-color: $neu-button-primary-background-color-pressed;
+      }
     }
     @include disabled;
 
@@ -176,6 +182,13 @@ $neu-button-padding-mini: 3px 6px !default;
 
       @include disabled($neu-button-primary-border-width-alternative);
     }
+
+    &.is-circle {
+      border-color: $neu-button-primary-background-color;
+      &:disabled, &:disabled:hover {
+        border-color: $neu-button-border-color-disabled;
+      }
+    }
   }
 
   &.s-secondary {
diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss
index f11dc7ce..3f6737fa 100644
--- a/src/styles/neumorphism/card.scss
+++ b/src/styles/neumorphism/card.scss
@@ -36,17 +36,13 @@
 
   &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
     box-shadow: var(--s-shadow-element);
-
-    &.s-pressed {
-      box-shadow: var(--s-shadow-element-pressed);
-    }
   }
 
   &.s-primary {
     background: var(--s-color-utility-surface);
 
     &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
-      box-shadow: var(--s-shadow-surface);
+      box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.9), 1px 1px 15px var(--s-shadow-color-dark), inset 1px 1px 10px var(--s-shadow-color-light);
     }
   }
 }
\ No newline at end of file
diff --git a/src/styles/neumorphism/collapse.scss b/src/styles/neumorphism/collapse.scss
new file mode 100644
index 00000000..8a39616b
--- /dev/null
+++ b/src/styles/neumorphism/collapse.scss
@@ -0,0 +1,19 @@
+$neu-collapse-button-size: var(--s-size-medium);
+$neu-collapse-button-border-width: 0px !default;
+$neu-collapse-button-border-style: solid !default !default;
+$neu-collapse-button-background-color: var(--s-color-utility-body) !default;
+$neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default;
+$neu-collapse-button-border-color: transparent !default;
+$neu-collapse-button-box-shadow: var(--s-shadow-element-pressed) !default;
+$neu-collapse-button-font-size: 28px !default;
+.el-collapse.neumorphic .el-icon-arrow-right {
+  width: $neu-collapse-button-size;
+  height: $neu-collapse-button-size;
+  background: $neu-collapse-button-background-color;
+  border-color: $neu-collapse-button-border-color;
+  border-style: $neu-collapse-button-border-style;
+  border-width: $neu-collapse-button-border-width;
+  box-shadow: $neu-collapse-button-box-shadow;
+  color: $neu-collapse-button-text-color;
+  font-size: $neu-collapse-button-font-size;
+}
diff --git a/src/styles/neumorphism/dialog.scss b/src/styles/neumorphism/dialog.scss
new file mode 100644
index 00000000..907f5760
--- /dev/null
+++ b/src/styles/neumorphism/dialog.scss
@@ -0,0 +1,6 @@
+.v-modal {
+  opacity: 0.75;
+  backdrop-filter: blur(4px);
+  // TODO: Fix FF behaviour
+  filter: blur(4px);
+}
diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss
index 9c1b356c..66e411df 100644
--- a/src/styles/neumorphism/index.scss
+++ b/src/styles/neumorphism/index.scss
@@ -1,7 +1,9 @@
 @import "./button.scss";
 @import "./input.scss";
 @import "./card.scss";
+@import "./collapse.scss";
 @import "./tabs.scss";
 @import "./radio.scss";
 @import "./switch.scss";
 @import "./tooltip.scss";
+@import "./dialog.scss";
diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss
index fc44a906..0f1b4651 100644
--- a/src/styles/neumorphism/input.scss
+++ b/src/styles/neumorphism/input.scss
@@ -1,7 +1,7 @@
 $neu-input-border-width: 0 !default;
 $neu-input-background: var(--s-color-base-background) !default;
 $neu-input-box-shadow: var(--s-shadow-element) !default;
-$neu-input-box-shadow-active: var(--s-shadow-element-pressed) !default;
+$neu-input-box-shadow-active: $neu-input-box-shadow !default;
 $neu-input-color: var(--s-color-base-content-primary) !default;
 $neu-input-color-disabled: var(--s-color-base-content-secondary) !default;
 $neu-input-placeholder-color: var(--s-color-base-content-secondary) !default;
@@ -41,6 +41,8 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
   & .s-placeholder {
     color: $neu-input-placeholder-color;
     top: $neu-input-placeholder-offset;
+    letter-spacing: var(--s-letter-spacing-small);
+    @include font-weight(300, true);
   }
 
   &, &:hover, &.s-focused, &.s-disabled {
diff --git a/src/styles/neumorphism/radio.scss b/src/styles/neumorphism/radio.scss
index 5e297f15..5500e4ba 100644
--- a/src/styles/neumorphism/radio.scss
+++ b/src/styles/neumorphism/radio.scss
@@ -64,7 +64,7 @@
     .el-radio__inner {
       border-width: 1px;
       border-color: var(--s-color-base-border-secondary);
-      box-shadow: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+      box-shadow: 1px 1px 2px var(--s-shadow-color-light), inset 1px 1px 2px var(--s-shadow-color-dark);
       background-color: var(--s-color-base-background);
 
       &:hover {
@@ -73,7 +73,7 @@
 
       &::after {
         background-color: var(--s-color-theme-accent);
-        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+        box-shadow: -1px -1px 1px var(--s-shadow-color-dark-light), 1px 1px 3px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark);
       }
     }
   }
diff --git a/src/styles/neumorphism/switch.scss b/src/styles/neumorphism/switch.scss
index d561cdb1..91b0c833 100644
--- a/src/styles/neumorphism/switch.scss
+++ b/src/styles/neumorphism/switch.scss
@@ -12,7 +12,7 @@ $switch-circle-size: 18px;
     &__core {
       background-color: var(--s-color-base-background);
       border: none;
-      box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+      box-shadow: var(--s-shadow-element);
 
       &::after {
         width: $switch-circle-size;
@@ -33,6 +33,7 @@ $switch-circle-size: 18px;
         &::after {
           margin-left: -$switch-circle-size - 1;
           background-color: var(--s-color-base-on-accent);
+          box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--s-shadow-color-light), 0px 0px 20px rgba(247, 84, 163, 0.5);
         }
       }
 
diff --git a/src/styles/neumorphism/tabs.scss b/src/styles/neumorphism/tabs.scss
index 1a577717..88cc557a 100644
--- a/src/styles/neumorphism/tabs.scss
+++ b/src/styles/neumorphism/tabs.scss
@@ -19,15 +19,14 @@
     .el-tabs {
       &__nav-wrap {
         background-color: var(--s-color-base-background);
-        filter: drop-shadow(1px 1px 2px var(--s-shadow-color-dark));
-        box-shadow: inset 1px 1px 2px var(--s-shadow-color-light);
+        box-shadow: var(--s-shadow-element-pressed);
 
         .el-tabs__item {
           &.is-active {
             &, &:focus.is-focus {
               color: var(--s-color-theme-accent);
               background-color: var(--s-color-utility-surface);
-              box-shadow: 1px 1px 2px var(--s-shadow-color-light), inset 1px 1px 2px var(--s-shadow-color-dark);
+              box-shadow: var(--s-shadow-element);
             }
           }
           &:not(.is-active) {
diff --git a/src/styles/neumorphism/theme-variables.scss b/src/styles/neumorphism/theme-variables.scss
index a110b194..541f9943 100644
--- a/src/styles/neumorphism/theme-variables.scss
+++ b/src/styles/neumorphism/theme-variables.scss
@@ -27,7 +27,7 @@ $s-color-base-on-accent: #FFFFFF;
 // Utility colors
 $s-color-utility-body: #F7F3F4;
 $s-color-utility-surface: #FDF7FB;
-$s-color-utility-overlay: rgba(0, 0, 0, 0.45);
+$s-color-utility-overlay: rgba(42, 23, 31, 0.1);
 // Status colors
 $s-color-status-success: #34AD87;
 $s-color-status-warning: #479AEF;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f80e8d29..89bec9c9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -38,12 +38,13 @@ $s-shadow-color-dark: rgba(0, 0, 0, 0.1);
 $s-shadow-color-dark-light: rgba(0, 0, 0, 0.02);
 $s-shadow-color-light: rgba(255, 255, 255, 1);
 $s-shadow-color-light-dark: rgba(255, 255, 255, 0.8);
-$s-shadow-element: -1px -1px 1px $s-shadow-color-dark-light, 1px 1px 3px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark; // input, card
-$s-shadow-element-pressed: 1px 1px 2px $s-shadow-color-light, inset 1px 1px 2px $s-shadow-color-dark;
+$s-shadow-element: 1px 1px 5px $s-shadow-color-light, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px $s-shadow-color-dark;
+$s-shadow-element-pressed: -5px -5px 10px $s-shadow-color-light, 1px 1px 10px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark;
+
 // TODO: use it and discuss colors of these shadows
 $s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;
 $s-shadow-tooltip: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;
-$s-shadow-tab: 0px 1px 1px rgba(0, 0, 0, 0.1) !default;
+$s-shadow-tab: 0px 1px 1px var(--s-shadow-color-dark) !default;
 $s-shadow-dropdown: 0px 4px 8px rgba(19, 19, 19, 0.15) !default;
 $s-shadow-mobile-tap-bar: 0px -4px 8px rgba(19, 19, 19, 0.15) !default;
 $s-shadow-mobile-side-menu: -4px 4px 8px rgba(19, 19, 19, 0.15) !default;