diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts
index cda763cc..a5acdc21 100644
--- a/packages/components/.storybook/main.ts
+++ b/packages/components/.storybook/main.ts
@@ -1,15 +1,20 @@
-module.exports = {
+import { StorybookConfig } from '@storybook/types'
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-addon-designs',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: 'tag'
-  }
+    autodocs: 'tag',
+  },
 }
+
+export default config
diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index 43a2ea68..a0134e88 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -1,18 +1,19 @@
 import React from 'react'
 import { TamaguiProvider } from '@tamagui/core'
 import { config } from '../src'
+import { Parameters, Decorator } from '@storybook/react'
 
-export const parameters = {
+export const parameters: Parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/
-    }
-  }
+      date: /Date$/,
+    },
+  },
 }
 
-const withThemeProvider = (Story, context) => {
+const withThemeProvider: Decorator = (Story, _context) => {
   return (
     <TamaguiProvider config={config}>
       <Story />
diff --git a/packages/components/package.json b/packages/components/package.json
index 9392e5cf..d4075106 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -40,6 +40,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.0-beta.21",
+    "storybook-addon-designs": "^7.0.0-beta.2",
     "vite": "^4.0.4"
   }
 }