diff --git a/.gitignore b/.gitignore
index faa2871..962e489 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,8 @@
 !.eslintrc.cjs
 !.nvmrc
 !.prettierrc.json
+!.storybook/
+!.vscode/
 
 # Ignore generated files
 target
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 0000000..b2bfea5
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,16 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+      '@storybook/addon-links',
+      '@storybook/addon-essentials',
+      '@chromatic-com/storybook',
+      '@storybook/addon-interactions',
+      '@storybook/addon-a11y'
+    ],
+    framework: {
+      name: '@storybook/vue3-vite',
+      options: {}
+    }
+  }
+  export default config
\ No newline at end of file
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 0000000..c41b115
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,13 @@
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..100590d
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "ms-playwright.playwright",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "joshbolduc.story-explorer"
+  ]
+}