diff --git a/README.md b/README.md
index 4c25842..a8d658f 100644
--- a/README.md
+++ b/README.md
@@ -65,15 +65,18 @@ $ yarn add vue-color-kit
 
 ## Options
 
-| Name               | Type              | Default                                                                                                                                                                                  | Description                             |
-| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| theme              | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                       |
-| color              | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                         |
-| colors-default     | Array             | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]`      |
-| colors-history-key | String            | `vue-color-kit-history`                                                                                                                                                                  |
-| sucker-hide        | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                       |
-| sucker-canvas      | HTMLCanvasElement | `null`                                                                                                                                                                                   | like `document.createElement('canvas')` |
-| sucker-area        | Array             | `[]`                                                                                                                                                                                     | like `[x1, y1, x2, y2]`                 |
+| Name                | Type              | Default                                                                                                                                                                                  | Description                                                   |
+| ------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| theme               | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                                             |
+| color               | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                                               |
+| colors-default      | Array             | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]`                            |
+| colors-history-key  | String            | `vue-color-kit-history`                                                                                                                                                                  |
+| sucker-hide         | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                                             |
+| sucker-canvas       | HTMLCanvasElement | `null`                                                                                                                                                                                   | like `document.createElement('canvas')`                       |
+| sucker-area         | Array             | `[]`                                                                                                                                                                                     | like `[x1, y1, x2, y2]`                                       |
+| width               | Number            | 198                                                                                                                                                                                      | any desired width                                             |
+| show-alpha          | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                                             |
+| disable-input-field | Boolean           | `false`                                                                                                                                                                                  | `true` or `false`. It disable user from editting color value. |
 
 > `color` is one-way data flow, so you can't use `v-model`. why? because you'll listen `changeColor` event do more things, so i think it's not necessary here.
 
diff --git a/package.json b/package.json
index 740dc7c..94e69c2 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "lint:fix": "yarn run lint --write",
     "test:types": "tsc --build tsconfig.json",
     "test:unit": "jest --coverage",
-    "test": "yarn run test:types && yarn run test:unit && yarn run build && yarn run build:dts"
+    "test": "yarn run test:types && yarn run test:unit && yarn run build && yarn run build:dts",
+    "prepare": "yarn build"
   },
   "files": [
     "dist/*.js",
@@ -61,6 +62,7 @@
     "jest": "^26.5.3",
     "lint-staged": "^10.5.1",
     "mini-css-extract-plugin": "^1.6.0",
+    "node-sass": "^6.0.1",
     "pascalcase": "^1.0.0",
     "prettier": "^2.1.2",
     "prismjs": "^1.22.0",
diff --git a/src/color/Alpha.vue b/src/color/Alpha.vue
index 7fac0ed..5ca461c 100644
--- a/src/color/Alpha.vue
+++ b/src/color/Alpha.vue
@@ -107,7 +107,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .color-alpha {
   position: relative;
   margin-left: 8px;
diff --git a/src/color/Box.vue b/src/color/Box.vue
index 959850b..0652342 100644
--- a/src/color/Box.vue
+++ b/src/color/Box.vue
@@ -3,7 +3,7 @@
     <span class="name">
       {{ name }}
     </span>
-    <input v-model="modelColor" class="value" />
+    <input :disabled="disableInputField" v-model="modelColor" class="value" />
   </div>
 </template>
 
@@ -20,6 +20,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    disableInputField: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['inputColor'],
   setup(props, { emit }) {
@@ -38,7 +42,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .color-type {
   display: flex;
   margin-top: 8px;
diff --git a/src/color/ColorPicker.vue b/src/color/ColorPicker.vue
index c9a1c0a..6e30dd1 100644
--- a/src/color/ColorPicker.vue
+++ b/src/color/ColorPicker.vue
@@ -20,6 +20,7 @@
         @selectHue="selectHue"
       />
       <Alpha
+        v-if="showAlpha"
         ref="alpha"
         :color="rgbString"
         :rgba="rgba"
@@ -42,8 +43,19 @@
         @selectSucker="selectSucker"
       />
     </div>
-    <Box name="HEX" :color="modelHex" @inputColor="inputHex" />
-    <Box name="RGBA" :color="modelRgba" @inputColor="inputRgba" />
+    <Box
+      name="HEX"
+      :disableInputField="disableInputField"
+      :color="modelHex"
+      @inputColor="inputHex"
+    />
+    <Box
+      v-if="showAlpha"
+      name="RGBA"
+      :disableInputField="disableInputField"
+      :color="modelRgba"
+      @inputColor="inputRgba"
+    />
     <Colors
       :color="rgbaString"
       :colors-default="colorsDefault"
@@ -124,14 +136,26 @@ export default defineComponent({
       type: String,
       default: 'vue-colorpicker-history',
     },
+    width: {
+      type: Number,
+      default: 198,
+    },
+    showAlpha: {
+      type: Boolean,
+      default: true,
+    },
+    disableInputField: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       hueWidth: 15,
-      hueHeight: 152,
       previewHeight: 30,
       modelRgba: '',
       modelHex: '',
+      hueCount: this.showAlpha ? 2 : 1,
       r: 0,
       g: 0,
       b: 0,
@@ -145,8 +169,13 @@ export default defineComponent({
     isLightTheme(): boolean {
       return this.theme === 'light'
     },
+    hueHeight(): number {
+      //making hueHeight such that overall width equal to passed width
+      //20 is the sum of left and right padding of Color Picker
+      return this.width - ((this.hueWidth + 8) * this.hueCount + 20)
+    },
     totalWidth(): number {
-      return this.hueHeight + (this.hueWidth + 8) * 2
+      return this.hueHeight + (this.hueWidth + 8) * this.hueCount
     },
     previewWidth(): number {
       return this.totalWidth - (this.suckerHide ? 0 : this.previewHeight)
@@ -287,7 +316,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hu-color-picker {
   padding: 10px;
   background: #1d2024;
diff --git a/src/color/Colors.vue b/src/color/Colors.vue
index 3b051c9..5905e05 100644
--- a/src/color/Colors.vue
+++ b/src/color/Colors.vue
@@ -93,10 +93,13 @@ export default defineComponent({
   },
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .colors {
   padding: 0;
-  margin: 0;
+  margin: 0.5rem 0 0 0;
+  display: flex;
+  gap: 0.44rem;
+  flex-wrap: wrap;
   &.history {
     margin-top: 10px;
     border-top: 1px solid #2e333a;
@@ -105,7 +108,6 @@ export default defineComponent({
     position: relative;
     width: 16px;
     height: 16px;
-    margin: 10px 0 0 10px;
     border-radius: 3px;
     box-sizing: border-box;
     vertical-align: top;
diff --git a/src/color/Hue.vue b/src/color/Hue.vue
index ae4857b..74fe877 100644
--- a/src/color/Hue.vue
+++ b/src/color/Hue.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hue {
   position: relative;
   margin-left: 8px;
diff --git a/src/color/Saturation.vue b/src/color/Saturation.vue
index 25079b4..eed8037 100644
--- a/src/color/Saturation.vue
+++ b/src/color/Saturation.vue
@@ -121,7 +121,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .saturation {
   position: relative;
   cursor: pointer;
diff --git a/src/color/Sucker.vue b/src/color/Sucker.vue
index 059d2ee..a65f26e 100644
--- a/src/color/Sucker.vue
+++ b/src/color/Sucker.vue
@@ -183,7 +183,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .sucker {
   width: 30px;
   fill: #9099a4;
diff --git a/yarn.lock b/yarn.lock
index 0dfac38..e2b10af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2414,6 +2414,11 @@ chownr@^1.1.1, chownr@^1.1.2:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -3088,7 +3093,7 @@ cross-spawn@^6.0.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3779,6 +3784,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
+env-paths@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -4704,6 +4714,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graceful-fs@^4.2.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6704,6 +6719,24 @@ meow@^8.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
+meow@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
+  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize "^1.2.0"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -6881,6 +6914,14 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
+minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -6905,7 +6946,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@1.x, mkdirp@^1.0.4:
+mkdirp@1.x, mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -7058,6 +7099,22 @@ node-gyp@^3.8.0:
     tar "^2.0.0"
     which "1"
 
+node-gyp@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
+  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    nopt "^5.0.0"
+    npmlog "^4.1.2"
+    request "^2.88.2"
+    rimraf "^3.0.2"
+    semver "^7.3.2"
+    tar "^6.0.2"
+    which "^2.0.2"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -7146,6 +7203,27 @@ node-sass@4:
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
+node-sass@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-6.0.1.tgz#cad1ccd0ce63e35c7181f545d8b986f3a9a887fe"
+  integrity sha512-f+Rbqt92Ful9gX0cGtdYwjTrWAaGURgaK5rZCWOgCNyGWusFYHhbqCCBoFBeat+HKETOU02AyTxNhJV0YZf2jQ==
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^7.0.3"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    lodash "^4.17.15"
+    meow "^9.0.0"
+    nan "^2.13.2"
+    node-gyp "^7.1.0"
+    npmlog "^4.0.0"
+    request "^2.88.0"
+    sass-graph "2.2.5"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -7153,6 +7231,13 @@ node-sass@4:
   dependencies:
     abbrev "1"
 
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7224,7 +7309,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -9905,6 +9990,18 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
+tar@^6.0.2:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
+  integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 teeny-request@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-6.0.1.tgz#9b1f512cef152945827ba7e34f62523a4ce2c5b0"