diff --git a/README.md b/README.md
index 1e6799d4..5fc13895 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # Superhero Utils
 
 ## Installation
-
 You can get it as npm package or from the unpkg.com.
 
 ### With npm
@@ -26,6 +25,20 @@ version for React or Vue by importing `dist/react-without-styles.js` or
 `dist/vue-without-styles.js` accordingly. The framework-specific version contains
 all features available in the default one plus specific for particular framework wrappers.
 
+### Develop
+Install:
+```
+npm i
+npm i --prefix examples/react-webpack
+npm i --prefix examples/vue-webpack
+```
+
+Build scripts:
+```
+npm run build
+npm run build:examples
+```
+
 ## Usage
 
 ### Button
diff --git a/examples/react-webpack/src/App.js b/examples/react-webpack/src/App.js
index f3e0f817..8664bc2c 100644
--- a/examples/react-webpack/src/App.js
+++ b/examples/react-webpack/src/App.js
@@ -1,11 +1,21 @@
 import './superhero-utils/index.css';
 import { Button as SuperheroButton } from './superhero-utils/react-without-styles.js';
 
+import './style.css';
+
 function App() {
   return (
-    <div>
+    <div className="Example-List">
       <h3>superhero-utils example using react, webpack</h3>
+      medium:
       <SuperheroButton size="medium" account="ak_... or .chain name" />
+
+      {['large', 'small', 'icon'].map(size =>
+        <>
+          {size}:
+          <SuperheroButton size={size} account="ak_... or .chain name" />
+        </>
+      )}
     </div>
   );
 }
diff --git a/examples/react-webpack/src/style.css b/examples/react-webpack/src/style.css
new file mode 100644
index 00000000..952299ff
--- /dev/null
+++ b/examples/react-webpack/src/style.css
@@ -0,0 +1,24 @@
+.Example-List {
+  width: 235px;
+  outline: 1px #1162fe solid;
+  padding: 20px;
+  height: 400px;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
diff --git a/examples/vue-webpack/src/App.vue b/examples/vue-webpack/src/App.vue
index 76143a23..91a78e7f 100644
--- a/examples/vue-webpack/src/App.vue
+++ b/examples/vue-webpack/src/App.vue
@@ -1,7 +1,12 @@
 <template>
-  <div>
+  <div class="Example-List">
     <h3>superhero-utils example using vue, webpack</h3>
+    medium:
     <SuperheroButton size="medium" account="ak_... or .chain name" />
+    <template v-for="size in ['large', 'small', 'icon']">
+      {{size}}:
+      <SuperheroButton :size="size" account="ak_... or .chain name" :key="size" />
+    </template>
   </div>
 </template>
 
@@ -15,3 +20,30 @@ export default {
   },
 }
 </script>
+
+<style>
+.Example-List {
+  width: 235px;
+  outline: 1px #1162fe solid;
+  padding: 20px;
+  height: 400px;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+</style>