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