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/styles/index.scss b/src/styles/index.scss
index 6fc7df15..bfa5c946 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,5 @@
 // @import "./neumorphism/theme-variables"; // uncomment to preview components with neu variables
 @import "./variables";
-@import "./neumorphism/index.scss";
 @import "./element-variables";
 @import "./fonts";
 @import "./common";
diff --git a/src/styles/neumorphism/typography.scss b/src/styles/neumorphism/typography.scss
deleted file mode 100644
index 944fba93..00000000
--- a/src/styles/neumorphism/typography.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.s-typography {
-  &-input {
-    &-text {
-      font-size: var(--s-font-size-mini);
-      line-height: var(--s-line-height-medium);
-      font-weight: 300;
-
-      &--mini {
-        font-size: var(--s-font-size-extra-mini);
-        line-height: var(--s-line-height-medium);
-        font-weight: 300;
-      }
-    }
-    &-field {
-      font-size: var(--s-font-size-medium);
-      line-height: var(--s-line-height-medium);
-      font-weight: 400;
-
-      &--large {
-        font-size: var(--s-font-size-large);
-        line-height: var(--s-line-height-small);
-        font-weight: 800;
-      }
-    }
-  }
-  &-button {
-    &--mini {
-      font-size: var(--s-font-size-mini);
-      line-height: var(--s-line-height-extra-small);
-      font-weight: 800;
-    }
-    &--small {
-      font-size: var(--s-font-size-small);
-      line-height: var(--s-line-height-small);
-      font-weight: 800;
-    }
-    &--medium {
-      font-size: var(--s-font-size-medium);
-      line-height: var(--s-line-height-reset);
-      font-weight: 800;
-    }
-    &--big {
-      font-size: var(--s-font-size-big);
-      line-height: var(--s-line-height-small);
-      font-weight: 800;
-    }
-    &--large {
-      font-size: var(--s-font-size-large);
-      line-height: var(--s-line-height-reset);
-      font-weight: 800;
-    }
-  }
-  &-text {
-    font-size: var(--s-font-size-extra-small);
-    line-height: var(--s-line-height-base);
-    font-weight: 300;
-
-    &--mini {
-      font-size: var(--s-font-size-extra-mini);
-      line-height: var(--s-line-height-mini);
-      font-weight: 300;
-    }
-  }
-}
diff --git a/src/styles/neumorphism/variables.scss b/src/styles/neumorphism/variables.scss
deleted file mode 100644
index 067f511c..00000000
--- a/src/styles/neumorphism/variables.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-// Brand
-$neu-brand-pinky: #ED145B !default; // Some texts, brand stuff
-$neu-brand-blue: #0D0248 !default; // Brand stuff
-// Theme Primary
-$neu-color-theme-accent: #F8087B !default;
-$neu-color-theme-accent-hover: #F754A3 !default;
-$neu-color-theme-accent-pressed: #E44592 !default;
-$neu-color-theme-accent-focused: #F24197 !default;
-// Theme Secondary
-$neu-color-theme-secondary: #44E5B2 !default;
-$neu-color-theme-secondary-hover: #24DAA0 !default;
-// Base: Content
-$neu-color-base-content-primary: #2A171F !default; // Main text and icons
-$neu-color-base-content-secondary: #A19A9D !default; // Secondary text
-$neu-color-base-content-tertiary: #D5CDD0 !default; // Hint and placeholder text
-$neu-color-base-content-quaternary: #75787b !default; // Text
-// Base: Background
-$neu-color-base-background: #FAF4F8 !default; // Interactive elements background: controls, text field
-$neu-color-base-background-hover: #F7F3F4 !default;
-$neu-color-base-background-dark: #2E2E36 !default; // Dark background
-// Base: Border
-$neu-color-base-border-primary: #F7F3F4 !default; // High emphasis border/divider
-$neu-color-base-border-secondary: #EDE4E7 !default; // Low emphasis border/divider
-// Base: Misc
-$neu-color-base-disabled: #FDF7FB !default; // Disabled state
-$neu-color-base-on-disabled: #A19A9D !default; // Text on disabled element
-$neu-color-base-on-accent: #FFFFFF !default; // Text on dark/accent backgrounds
-// Utility
-$neu-color-utility-body: #F7F3F4 !default;
-$neu-color-utility-surface: #FDF7FB !default;
-$neu-color-utility-overlay: rgba(0, 0, 0, 0.45) !default;
-// Statuses
-$neu-color-status-success: #34AD87 !default; // Success text and icon
-$neu-color-status-success-background: #B9EBDB !default; // Success state background
-$neu-color-status-warning: #479AEF !default; // Warning text and icon
-$neu-color-status-warning-background: #C6E2FF !default; // Warning state background
-$neu-color-status-error: #F754A3 !default; // Error text and icon
-$neu-color-status-error-background: #FFD8EB !default; // Error state background
-// Sizes
-$neu-size-big: 46px !default;
-$neu-size-medium: 42px !default;
-$neu-size-small: 32px !default;
-$neu-size-mini: 24px !default;
-// Shadows
-$neu-shadow-color-dark: rgba(0, 0, 0, 0.1) !default;
-$neu-shadow-color-dark-light: rgba(0, 0, 0, 0.02) !default;
-$neu-shadow-color-light: rgba(255, 255, 255, 1) !default;
-$neu-shadow-color-light-dark: rgba(255, 255, 255, 0.8) !default;
-$neu-shadow-surface: 1px 1px 5px $neu-shadow-color-dark, inset 1px 1px 1px $neu-shadow-color-dark !default; // container
-$neu-shadow-element: -1px -1px 1px $neu-shadow-color-dark-light, 1px 1px 3px $neu-shadow-color-dark, inset 1px 1px 2px $neu-shadow-color-light-dark !default; // input, card
-$neu-shadow-element-pressed: 1px 1px 2px $neu-shadow-color-light, inset 1px 1px 2px $neu-shadow-color-dark !default;
-
-:root {
-  --neu-brand-pinky: #{neu-brand-pinky};
-  --neu-brand-blue: #{neu-brand-blue};
-  --neu-color-theme-accent: #{$neu-color-theme-accent};
-  --neu-color-theme-accent-hover: #{$neu-color-theme-accent-hover};
-  --neu-color-theme-accent-pressed: #{$neu-color-theme-accent-pressed};
-  --neu-color-theme-accent-focused: #{$neu-color-theme-accent-focused};
-  --neu-color-theme-secondary: #{$neu-color-theme-secondary};
-  --neu-color-theme-secondary-hover: #{$neu-color-theme-secondary-hover};
-  --neu-color-base-content-primary: #{$neu-color-base-content-primary};
-  --neu-color-base-content-secondary: #{$neu-color-base-content-secondary};
-  --neu-color-base-content-tertiary: #{$neu-color-base-content-tertiary};
-  --neu-color-base-content-quaternary: #{$neu-color-base-content-quaternary};
-  --neu-color-base-background: #{$neu-color-base-background};
-  --neu-color-base-background-hover: #{$neu-color-base-background-hover};
-  --neu-color-base-background-dark: #{$neu-color-base-background-dark};
-  --neu-color-base-border-primary: #{$neu-color-base-border-primary};
-  --neu-color-base-border-secondary: #{$neu-color-base-border-secondary};
-  --neu-color-base-disabled: #{$neu-color-base-disabled};
-  --neu-color-base-on-disabled: #{$neu-color-base-on-disabled};
-  --neu-color-base-on-accent: #{$neu-color-base-on-accent};
-  --neu-color-utility-body: #{$neu-color-utility-body};
-  --neu-color-utility-surface: #{$neu-color-utility-surface};
-  --neu-color-utility-overlay: #{$neu-color-utility-overlay};
-  --neu-color-status-success: #{$neu-color-status-success};
-  --neu-color-status-success-background: #{$neu-color-status-success-background};
-  --neu-color-status-warning: #{$neu-color-status-warning};
-  --neu-color-status-warning-background: #{$neu-color-status-warning-background};
-  --neu-color-status-error: #{$neu-color-status-error};
-  --neu-color-status-error-background: #{$neu-color-status-error-background};
-  --neu-size-big: #{$neu-size-big};
-  --neu-size-medium: #{$neu-size-medium};
-  --neu-size-small: #{$neu-size-small};
-  --neu-size-mini: #{$neu-size-mini};
-  --neu-shadow-surface: #{$neu-shadow-surface};
-  --neu-shadow-element: #{$neu-shadow-element};
-  --neu-shadow-element-pressed: #{$neu-shadow-element-pressed};
-  --neu-shadow-color-dark: #{$neu-shadow-color-dark};
-  --neu-shadow-color-dark-light: #{$neu-shadow-color-dark-light};
-  --neu-shadow-color-light: #{$neu-shadow-color-light};
-  --neu-shadow-color-light-dark: #{$neu-shadow-color-light-dark};
-}
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
 }