diff --git a/packages/react/.storybook/main.cjs b/packages/react/.storybook/main.cjs
new file mode 100644
index 0000000..8d48ff4
--- /dev/null
+++ b/packages/react/.storybook/main.cjs
@@ -0,0 +1,22 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    '@storybook/preset-scss'
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  staticDirs: [
+    'dist',
+  ],
+  "features": {
+    "storyStoreV7": true
+  }
+}
\ No newline at end of file
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
new file mode 100644
index 0000000..0c1f803
--- /dev/null
+++ b/packages/react/.storybook/preview-head.html
@@ -0,0 +1,4 @@
+<link rel='stylesheet' type='text/css' href='/src/index.scss'>
+<script>
+  window.global = window;
+</script>
\ No newline at end of file
diff --git a/packages/react/.storybook/preview.cjs b/packages/react/.storybook/preview.cjs
new file mode 100644
index 0000000..48afd56
--- /dev/null
+++ b/packages/react/.storybook/preview.cjs
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
\ No newline at end of file