diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 0000000000000000000000000000000000000000..365c171ab56300ea52d5e9a0fc1b170b40265d2e
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,25 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm i
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..35b37aca014557bdb67626a6c64e59f27ff42c8d
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,10 @@
+module.exports = {
+	"stories": [
+		"../src/**/*.stories.mdx",
+		"../src/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials"
+	]
+}
\ No newline at end of file
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..09ffb6dd8d88d0616a3139e3c7f91f496ce849a7
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,5 @@
+import '../dist/css/tabler.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 14bd6e1262b898aeefdd639be206e0a2177e6b8c..37420e1067f56f1728c01d8cc025c29fb971d9e2 100644
--- a/README.md
+++ b/README.md
@@ -148,6 +148,12 @@ Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/
 
 <a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
diff --git a/package.json b/package.json
index ae3d0f6babc3e678300408d4660d36863f2ec59d..b04b17417267de6831edf1967219521feb539ac1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,10 @@
     "release": "release-it",
     "svg-icons": "gulp svg-icons",
     "percy": "gulp build && npx percy snapshot demo",
-    "bundlewatch": "bundlewatch --config .bundlewatch.config.json"
+    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
+    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -58,9 +61,13 @@
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/stream": "^2.0.0",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/html": "^6.3.12",
     "autoprefixer": "^10.3.7",
     "browser-sync": "^2.27.5",
     "bundlewatch": "^0.3.2",
+    "chromatic": "^6.0.5",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "gulp": "^4.0.2",
@@ -96,6 +103,7 @@
     "imask": "^6.2.2",
     "litepicker": "^2.0.11",
     "nouislider": "^15.5.0",
+    "storybook-addon-outline": "^1.4.1",
     "tom-select": "^1.7.8"
   },
   "resolutions": {
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8b91582ee900cf510406d96ad9a5fe8e1230ca8
--- /dev/null
+++ b/src/stories/Button.stories.js
@@ -0,0 +1,17 @@
+export default {
+  title: 'Example/Button',
+};
+
+const Template = ({ label, ...args }) => {
+  return `<button class="btn">${label}</button>`;
+};
+
+export const Primary = () => `<button class="btn btn-primary">Primary button</button>`;
+
+export const Secondary = () => `<button class="btn">Secondary button</button>`;
+
+export const Danger = () => `<button class="btn btn-danger">Danger button</button>`;
+
+export const Large = () => `<button class="btn btn-lg">Large button</button>`;
+
+export const Small = () => `<button class="btn btn-sm">Small button</button>`;
\ No newline at end of file