diff --git a/.husky/pre-commit b/.husky/pre-commit
index 7a9725a..e565b81 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx tsc --noEmit
+npx tsc --noEmit -p tsconfig.build.json
 npx lint-staged
diff --git a/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index 4f7f7da..0000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-docs",
-    "@storybook/addon-jest",
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
-  },
-  webpackFinal: async (config) => {
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        ...config.resolve.alias,
-        "@": path.resolve(__dirname, "../src/"),
-        path: require.resolve("path-browserify"),
-        crypto: require.resolve("crypto-browserify"),
-        stream: require.resolve("stream-browserify"),
-      },
-    };
-
-    return config;
-  },
-};
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 0000000..d500c50
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config) {
+    // Set up aliases
+    (config.resolve as any).alias = {
+      ...(config.resolve as any).alias,
+      "@": path.resolve(__dirname, "../src/"),
+      path: "path-browserify",
+      crypto: "crypto-browserify",
+      stream: "stream-browserify",
+    };
+
+    // Return the altered config
+    return config;
+  },
+};
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
deleted file mode 100644
index ac2b5f9..0000000
--- a/.storybook/preview.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import "./tailwind.css";
-
-window.global = window;
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
-import { withTests } from "@storybook/addon-jest";
-import results from "../.jest-test-results.json";
-
-export const decorators = [
-  withTests({
-    results,
-  }),
-];
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 0000000..ead4c8b
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,21 @@
+import "./tailwind.css";
+import { Buffer } from "buffer";
+
+window.global = window;
+window.Buffer = window.Buffer || Buffer;
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/package.json b/package.json
index 0e6ad74..db6b11e 100644
--- a/package.json
+++ b/package.json
@@ -37,16 +37,15 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc --noEmit && vite build",
+    "build": "tsc --noEmit -p tsconfig.build.json && vite build",
     "dev:vite": "vite build --watch --force",
-    "dev:tsc": "tsc --noEmit --watch",
+    "dev:tsc": "tsc -p tsconfig.build.json --noEmit --watch",
     "prepare": "husky install",
     "start": "concurrently npm:dev:*",
     "check": "lint-staged",
-    "analyze": "npm run build && npx vite-bundle-visualizer",
-    "test": "jest",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
-    "test:watch": "jest --watch"
+    "analyze": "npx vite-bundle-visualizer",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "antd": "^5.5.2",
@@ -72,6 +71,14 @@
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "10.0.4",
+    "@storybook/addon-essentials": "^7.6.5",
+    "@storybook/addon-interactions": "^7.6.5",
+    "@storybook/addon-links": "^7.6.5",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.5",
+    "@storybook/react": "^7.6.5",
+    "@storybook/react-vite": "^7.6.5",
+    "@storybook/test": "^7.6.5",
     "@types/lodash": "^4.14.170",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
@@ -95,6 +102,7 @@
     "prettier": "3.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "21.0.7",
+    "storybook": "^7.6.5",
     "typescript": "^5.0.4",
     "vite": "^4.5.1",
     "vite-bundle-visualizer": "^0.10.0",
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 0000000..cfa4d43
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.stories.*",
+    "**/*.test.*",
+    "**/*._test.*",
+    "**/*.mock.*"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 04fb9a3..0b80b67 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,6 @@
   "exclude": [
     "node_modules",
     "dist",
-    "**/*.stories.*",
     "**/*.test.*",
     "**/*._test.*",
     "**/*.mock.*"
diff --git a/vite.config.ts b/vite.config.ts
index 2253b61..e8eeb48 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,7 +28,7 @@ export default defineConfig({
     rollupOptions: {
       // We manually add these since they are not directly in package.json, but they end up in the bundle if we don't exclude them.
       // Reason for this is using imports for specific components
-      external: ["@ant-design/icons", "moment", "antd/es/alert/ErrorBoundary"],
+      external: ["@ant-design/icons", "dayjs", "antd/es/alert/ErrorBoundary"],
     },
   },
 });