diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
new file mode 100644
index 0000000000..f16eac6b1f
--- /dev/null
+++ b/packages/design-system/.storybook/main.js
@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+};
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
new file mode 100644
index 0000000000..f089c7f9d5
--- /dev/null
+++ b/packages/design-system/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 6465ddcc26..d181546931 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -9,11 +9,21 @@
     "build": "rm -fr lib && tsc",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "yarn typecheck && yarn lint"
+    "checks": "yarn typecheck && yarn lint",
+    "storybook:run": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "devDependencies": {
     "tsup": "^6.1.3",
-    "typescript": "^4.6.2"
+    "typescript": "^4.6.2",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-interactions": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/builder-webpack4": "^6.5.6",
+    "@storybook/manager-webpack4": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/testing-library": "^0.0.11"
   },
   "peerDependencies": {
     "react": "^17.0.2",