diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
deleted file mode 100644
index 284bdf9..0000000
--- a/packages/react/.storybook/preview.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import '../src/index.scss'
-import '../src/fonts.scss'
-import '../src/icons.scss'
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  options: {
-    storySort: (a, b) => {
-      const roots = ['Getting Started', 'Components'];
-      const gettingStartedOrder = ['Installation', 'Colors', 'Spacings', 'Typography'];
-
-      const aParts = a.title.split('/');
-      const bParts = b.title.split('/');
-      if (aParts[0] !== bParts[0]) {
-        return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
-      }
-      if (aParts[1] !== bParts[1]) {
-        if (aParts[0] === 'Getting Started') {
-          return gettingStartedOrder.indexOf(aParts[1]) - gettingStartedOrder.indexOf(bParts[1]);
-        }
-        return aParts[1].localeCompare(bParts[1]);
-      }
-      return 0;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts
new file mode 100644
index 0000000..b49e69d
--- /dev/null
+++ b/packages/react/.storybook/preview.ts
@@ -0,0 +1,46 @@
+import "../src/index.scss";
+import "../src/fonts.scss";
+import "../src/icons.scss";
+import { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: (a, b) => {
+        const roots = ["Getting Started", "Components"];
+        const gettingStartedOrder = [
+          "Installation",
+          "Customization",
+          "Colors",
+          "Spacings",
+          "Typography",
+        ];
+
+        const aParts = a.title.split("/");
+        const bParts = b.title.split("/");
+        if (aParts[0] !== bParts[0]) {
+          return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
+        }
+        if (aParts[1] !== bParts[1]) {
+          if (aParts[0] === "Getting Started") {
+            return (
+              gettingStartedOrder.indexOf(aParts[1]) -
+              gettingStartedOrder.indexOf(bParts[1])
+            );
+          }
+          return aParts[1].localeCompare(bParts[1]);
+        }
+        return 0;
+      },
+    },
+  },
+};
+
+export default preview;