diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index bdbced23..9429add5 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -25,10 +25,14 @@ module.exports = {
         '../src/stories/**/*.stories.mdx',
         '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
     ],
+    typescript: {
+        reactDocgen: 'react-docgen-typescript-plugin',
+    },
     addons: [
         'storybook-addon-performance/register',
         '@storybook/addon-links',
         '@storybook/addon-essentials',
+        'storybook-addon-next-router',
     ],
     webpackFinal: async (config) => {
         config.module.rules = config.module.rules.map((r) =>
@@ -41,7 +45,15 @@ module.exports = {
                               !/@chakra-ui/.test(filename) &&
                               !/@zag-js/.test(filename) &&
                               !/ethers/.test(filename) &&
-                              !/@walletconnect/.test(filename)
+                              !/@walletconnect/.test(filename) &&
+                              !/@web3modal/.test(filename) &&
+                              !/valtio\/vanilla/.test(filename) &&
+                              !/@safe-global/.test(filename) &&
+                              !/viem/.test(filename) &&
+                              !/@web3-onboard/.test(filename) &&
+                              !/abitype/.test(filename) &&
+                              !/unstorage/.test(filename) &&
+                              !/ox/.test(filename)
                           );
                       },
                   }
@@ -57,6 +69,8 @@ module.exports = {
             },
         ];
 
+        config.node = { fs: 'empty' };
+
         return {
             ...config,
             resolve: {
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
index 73a74d95..03c39728 100644
--- a/packages/ui/.storybook/preview.tsx
+++ b/packages/ui/.storybook/preview.tsx
@@ -13,6 +13,7 @@ import { ChakraProvider, useColorMode } from '@chakra-ui/react';
 import { Fonts, theme } from '@explorer/ui';
 import '@fontsource/rubik';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 import { useEffect } from 'react';
 import { withPerformance } from 'storybook-addon-performance';
 
@@ -24,6 +25,9 @@ export const parameters = {
             date: /Date$/,
         },
     },
+    nextRouter: {
+        Provider: RouterContext.Provider,
+    },
     viewport: {
         viewports: MINIMAL_VIEWPORTS,
     },