diff --git a/.travis.yml b/.travis.yml
index a006270c..31d3f5e6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,14 @@
 language: node_js
 node_js: 12
 
-script: npm run build
+install:
+  - npm i
+  - npm i --prefix examples/react-webpack
+  - npm i --prefix examples/vue-webpack
+
+script:
+  - npm run build
+  - npm run build:examples
 
 deploy:
   - provider: script
diff --git a/README.md b/README.md
index 6ae3130f..8abcc3b4 100644
--- a/README.md
+++ b/README.md
@@ -20,12 +20,19 @@ You can import and process styles manually by importing `dist/index.css` and
 `dist/index-without-styles.js` separately. Or even you can don't import styles at
 all, and write your own instead.
 
+### React and Vue versions
+By default `dist/index.js` is imported, instead of it, you can import a specific
+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.
+
 ## Usage
 
-### Button (`superheroUtils.createButton`)
+### Button
+
+#### `superheroUtils.createButton`
 This library exports a function that creates buttons. This function accepts arguments:
 - class name of nodes that should become buttons, or the DOM node itself
-  (this option simplifies integration into Frontend frameworks like Vue/React)
 - options object
 
 Option | Description
@@ -47,7 +54,7 @@ Option | Description
 </script>
 ```
 Select the button style you like the most and adopt this code to your website's HTML.
-Additional examples can be found [here](./index.html).
+Additional examples can be found [here](examples/index.html).
 
 #### Screenshots
 
@@ -58,6 +65,24 @@ Size value | Screenshot
 `medium` | <img width="189" alt="medium" src="https://user-images.githubusercontent.com/13139371/96836937-56ba8100-144e-11eb-9e3b-4e4c92b9bbb4.png">
 `large` | <img width="140" alt="large" src="https://user-images.githubusercontent.com/13139371/81780943-0387ee00-9500-11ea-8108-2e5939821a7b.png">
 
+#### `superheroUtils.createButtonByDiv`
+
+The same function as the previous one except that the first argument should be an
+instance of `HTMLDivElement`. The button content will be added to that node instead of
+the DOM node replacing. The function with this interface simplifies integration into
+Frontend frameworks like Vue and React.
+
+#### `superheroUtils.Button` (only in React and Vue versions)
+
+The component that is compatible with the corresponding framework. Accepts the same
+properties as [`superheroUtils.createButton`](#superheroutilscreatebutton)'s options. 
+
+#### Example
+
+```html
+<Button size="large" account="example.chain" url="https://example.com" />
+```
+
 ### Paywall (`superheroUtils.ensurePaid`)
 This function asks the user to send a tip to the specified page. It won't ask to send a
 tip if it was sent before using the current browser. The function accepts options object.
@@ -73,7 +98,7 @@ Option | Description
   superheroUtils.ensurePaid({ url: 'https://example.com' });
 </script>
 ```
-Additional examples can be found [here](./index.html).
+Additional examples can be found [here](examples/index.html).
 
 #### Screenshots
 
@@ -85,6 +110,8 @@ You need to install [Node.js](https://nodejs.org/) firstly.
 
 ```sh
 $ npm install
+$ npm install --prefix examples/react-webpack
+$ npm install --prefix examples/vue-webpack
 $ npm start
 ```
 
diff --git a/index.html b/examples/index.html
similarity index 96%
rename from index.html
rename to examples/index.html
index f4089142..44673877 100644
--- a/index.html
+++ b/examples/index.html
@@ -1,3 +1,12 @@
+<h3>superhero-utils example using plain js</h3>
+
+Other examples:
+<a href="/react-unpkg.html">react unpkg</a>,
+<a href="/react-webpack/build">react webpack</a>,
+<a href="/vue-unpkg.html">vue unpkg</a>,
+<a href="/vue-webpack/dist">vue webpack</a>
+
+<hr>
 <div class="icon">Donate</div>
 <div class="small">Donate</div>
 <div class="medium">Donate</div>
@@ -22,7 +31,7 @@
 <p>Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.</p>
 <p>Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.</p>
 
-<script src="dist/index.js"></script>
+<script src="./superhero-utils/index.js"></script>
 <script>
 /*
 * Create superhero button instance by pointing element with its selector
diff --git a/examples/react-unpkg.html b/examples/react-unpkg.html
new file mode 100644
index 00000000..d982e28e
--- /dev/null
+++ b/examples/react-unpkg.html
@@ -0,0 +1,22 @@
+<div id="app"></div>
+
+<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/prop-types@15/prop-types.min.js"></script>
+<script src="./superhero-utils/react-without-styles.js"></script>
+<link rel="stylesheet" href="./superhero-utils/index.css">
+<script>
+class App extends React.Component {
+  render() {
+    return React.createElement('div', {}, [
+      React.createElement('h3', {}, ['superhero-utils example using react, script tag']),
+      React.createElement(
+        superheroUtils.Button,
+        { size: 'medium', account: 'ak_... or .chain name' },
+      ),
+    ]);
+  }
+}
+
+ReactDOM.render(React.createElement(App), document.querySelector('#app'));
+</script>
diff --git a/examples/react-webpack/.env b/examples/react-webpack/.env
new file mode 100644
index 00000000..6f809cc2
--- /dev/null
+++ b/examples/react-webpack/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/react-webpack/.gitignore b/examples/react-webpack/.gitignore
new file mode 100644
index 00000000..b8fba009
--- /dev/null
+++ b/examples/react-webpack/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.eslintcache
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react-webpack/package.json b/examples/react-webpack/package.json
new file mode 100644
index 00000000..20303845
--- /dev/null
+++ b/examples/react-webpack/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "react-webpack",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "homepage": "/react-webpack/build/",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/react-webpack/public/index.html b/examples/react-webpack/public/index.html
new file mode 100644
index 00000000..6252f08e
--- /dev/null
+++ b/examples/react-webpack/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/react-webpack/src/App.js b/examples/react-webpack/src/App.js
new file mode 100644
index 00000000..f3e0f817
--- /dev/null
+++ b/examples/react-webpack/src/App.js
@@ -0,0 +1,13 @@
+import './superhero-utils/index.css';
+import { Button as SuperheroButton } from './superhero-utils/react-without-styles.js';
+
+function App() {
+  return (
+    <div>
+      <h3>superhero-utils example using react, webpack</h3>
+      <SuperheroButton size="medium" account="ak_... or .chain name" />
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/react-webpack/src/index.js b/examples/react-webpack/src/index.js
new file mode 100644
index 00000000..c1f31c5f
--- /dev/null
+++ b/examples/react-webpack/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/react-webpack/src/superhero-utils b/examples/react-webpack/src/superhero-utils
new file mode 120000
index 00000000..35f47bf7
--- /dev/null
+++ b/examples/react-webpack/src/superhero-utils
@@ -0,0 +1 @@
+../../../dist
\ No newline at end of file
diff --git a/examples/superhero-utils b/examples/superhero-utils
new file mode 120000
index 00000000..85d8c32f
--- /dev/null
+++ b/examples/superhero-utils
@@ -0,0 +1 @@
+../dist
\ No newline at end of file
diff --git a/examples/vue-unpkg.html b/examples/vue-unpkg.html
new file mode 100644
index 00000000..1070d3d0
--- /dev/null
+++ b/examples/vue-unpkg.html
@@ -0,0 +1,22 @@
+<div id="app"></div>
+
+<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
+<script src="./superhero-utils/vue-without-styles.js"></script>
+<link rel="stylesheet" href="./superhero-utils/index.css">
+<script>
+const App = {
+  components: {
+    SuperheroButton: superheroUtils.Button,
+  },
+  template: `
+    <div>
+      <h3>superhero-utils example using vue, script tag</h3>
+      <SuperheroButton size="medium" account="ak_... or .chain name" />
+    </div>
+  `,
+};
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');
+</script>
diff --git a/examples/vue-webpack/.gitignore b/examples/vue-webpack/.gitignore
new file mode 100644
index 00000000..403adbc1
--- /dev/null
+++ b/examples/vue-webpack/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue-webpack/babel.config.js b/examples/vue-webpack/babel.config.js
new file mode 100644
index 00000000..e9558405
--- /dev/null
+++ b/examples/vue-webpack/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/examples/vue-webpack/package.json b/examples/vue-webpack/package.json
new file mode 100644
index 00000000..304e8d6f
--- /dev/null
+++ b/examples/vue-webpack/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue-webpack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/examples/vue-webpack/src/App.vue b/examples/vue-webpack/src/App.vue
new file mode 100644
index 00000000..76143a23
--- /dev/null
+++ b/examples/vue-webpack/src/App.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>superhero-utils example using vue, webpack</h3>
+    <SuperheroButton size="medium" account="ak_... or .chain name" />
+  </div>
+</template>
+
+<script>
+import '../../superhero-utils/index.css';
+import { Button } from '../../superhero-utils/vue-without-styles.js';
+
+export default {
+  components: {
+    SuperheroButton: Button,
+  },
+}
+</script>
diff --git a/examples/vue-webpack/src/main.js b/examples/vue-webpack/src/main.js
new file mode 100644
index 00000000..dcd0325b
--- /dev/null
+++ b/examples/vue-webpack/src/main.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git a/examples/vue-webpack/vue.config.js b/examples/vue-webpack/vue.config.js
new file mode 100644
index 00000000..9984cfeb
--- /dev/null
+++ b/examples/vue-webpack/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: '/vue-webpack/dist/',
+};
diff --git a/package.json b/package.json
index e688c3e3..1ca91c23 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,15 @@
     "webpack": "^5.9.0",
     "webpack-cli": "^4.2.0"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "npm run build && serve",
+    "start": "npm run build && npm run build:examples && serve examples",
     "build": "webpack",
+    "build:examples": "npm run --prefix examples/react-webpack build && npm run --prefix examples/vue-webpack build",
     "watch": "webpack --watch"
   },
   "repository": {
diff --git a/src/button/index.js b/src/button/index.js
index 071f974e..b3f8765e 100644
--- a/src/button/index.js
+++ b/src/button/index.js
@@ -20,7 +20,7 @@ const getTipAmount = async (url) => {
   return tips.find(u => u.url === url)?.total_amount_ae || 0;
 };
 
-const createButtonInstance = ({ size = 'icon', url = window.location.href, account, ...options }) => {
+export const createButtonByDiv = (divElement, { size = 'icon', url = window.location.href, account, ...options }) => {
   // data-account attribute is needed claiming
   const genLink = (text = '') => `
     <a
@@ -45,16 +45,15 @@ const createButtonInstance = ({ size = 'icon', url = window.location.href, accou
   };
 
   if (!templates[size]) throw new Error('Unsupported size');
-  const button = document.createElement('div');
-  button.innerHTML = templates[size];
-  button.className = `superhero-utils-button ${size}`;
+  divElement.innerHTML = templates[size];
+  divElement.className = `superhero-utils-button ${size}`;
 
   (async () => {
-    const tipsEl = button.querySelector('.tips');
+    const tipsEl = divElement.querySelector('.tips');
     if (tipsEl) tipsEl.innerHTML = await getTipAmount(url);
   })();
 
-  return button;
+  return divElement;
 };
 
 export default (selectorOrElement, options = {}) => {
@@ -63,7 +62,7 @@ export default (selectorOrElement, options = {}) => {
     : selectorOrElement;
 
   const handleElement = element => {
-    const instance = createButtonInstance(options);
+    const instance = createButtonByDiv(document.createElement('div'), options);
     element.replaceWith(instance);
     return instance;
   };
diff --git a/src/index.js b/src/index.js
index 1e24a7a8..db690292 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,3 @@
 import './global.scss';
-export { default as createButton } from './button';
+export { default as createButton, createButtonByDiv } from './button';
 export { default as ensurePaid } from './paywall';
diff --git a/src/react.js b/src/react.js
new file mode 100644
index 00000000..aa60466e
--- /dev/null
+++ b/src/react.js
@@ -0,0 +1,23 @@
+export * from './index';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createButtonByDiv } from './index';
+
+export class Button extends React.Component {
+  constructor(props) {
+    super(props);
+    this.button = React.createRef();
+    this.componentDidMount = this.componentDidUpdate = () =>
+      createButtonByDiv(this.button.current, this.props);
+  }
+
+  render() {
+    return React.createElement('div', { ref: this.button });
+  }
+}
+
+Button.propTypes = {
+  size: PropTypes.oneOf(['icon', 'small', 'medium', 'large']),
+  url: PropTypes.string,
+  account: PropTypes.string,
+};
diff --git a/src/vue.js b/src/vue.js
new file mode 100644
index 00000000..edc0ef01
--- /dev/null
+++ b/src/vue.js
@@ -0,0 +1,23 @@
+export * from './index';
+import { createButtonByDiv } from './index';
+
+export const Button = {
+  props: {
+    size: {
+      validator: value => ['icon', 'small', 'medium', 'large'].includes(value),
+      default: undefined,
+    },
+    url: { type: String, default: undefined },
+    account: { type: String, default: undefined },
+  },
+  mounted() {
+    this.$watch(
+      ({ size, url, account }) => ({ size, url, account }),
+      (props) => createButtonByDiv(this.$refs.button, props),
+      { immediate: true },
+    );
+  },
+  render(createElement) {
+    return createElement('div', { ref: 'button' });
+  },
+};
diff --git a/webpack.config.js b/webpack.config.js
index 59debe63..909ab33a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,14 +2,29 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const genConfig = (filename, { inlineCss } = {}) => ({
+const genConfig = (name, { inlineCss } = {}) => ({
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename,
+    filename: `${name}${inlineCss ? '' : '-without-styles'}.js`,
     library: 'superheroUtils',
     libraryTarget: 'umd'
   },
+  entry: path.resolve(__dirname, 'src', `${name}.js`),
   target: 'web',
+  externals: {
+    'prop-types': {
+      commonjs: 'prop-types',
+      commonjs2: 'prop-types',
+      amd: 'prop-types',
+      root: 'PropTypes',
+    },
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: 'React',
+    },
+  },
   module: {
     rules: [
       {
@@ -38,6 +53,8 @@ const genConfig = (filename, { inlineCss } = {}) => ({
 });
 
 module.exports = [
-  genConfig('index-without-styles.js'),
-  genConfig('index.js', { inlineCss: true }),
+  genConfig('index'),
+  genConfig('index', { inlineCss: true }),
+  genConfig('react'),
+  genConfig('vue'),
 ];