Dashboard: Completely remove Chakra UI

Author: MananTank

apps/dashboard/.eslintrc.js

@@ -10,13 +10,6 @@ module.exports = {
     "plugin:storybook/recommended",
   ],
   overrides: [
-    // disable restricted imports in chakra
-    {
-      files: "src/chakra/**/*",
-      rules: {
-        "no-restricted-imports": ["off"],
-      },
-    },
     // allow direct PostHog imports inside analytics helpers
     {
       files: "src/@/analytics/**/*",
@@ -91,60 +84,6 @@ module.exports = {
       "error",
       {
         paths: [
-          {
-            // these are provided by chakra folder, so we don't want to import them from chakra directly
-            importNames: [
-              "Card",
-              "Button",
-              "Checkbox",
-              "Badge",
-              "Drawer",
-              "Heading",
-              "Text",
-              "FormLabel",
-              "FormHelperText",
-              "FormErrorMessage",
-              "MenuGroup",
-              "VStack",
-              "HStack",
-              "AspectRatio",
-              "useToast",
-              "useClipboard",
-              "Badge",
-              "Stack",
-              // also the types
-              "ButtonProps",
-              "BadgeProps",
-              "DrawerProps",
-              "HeadingProps",
-              "TextProps",
-              "FormLabelProps",
-              "HelpTextProps",
-              "MenuGroupProps",
-              "MenuItemProps",
-              "AspectRatioProps",
-              "BadgeProps",
-              "StackProps",
-            ],
-            message:
-              'import component from "chakra" folder instead if you have to use chakra component, But use shadcn component otherwise',
-            name: "@chakra-ui/react",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/layout`.",
-            name: "@chakra-ui/layout",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/button`.",
-            name: "@chakra-ui/button",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/menu`.",
-            name: "@chakra-ui/menu",
-          },
           {
             importNames: ["useRouter"],
             message:

apps/dashboard/.storybook/main.ts

@@ -20,11 +20,6 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/nextjs"),
     options: {},
   },
-  refs: {
-    "@chakra-ui/react": {
-      disable: true,
-    },
-  },
   staticDirs: ["../public"],
   features: {
     experimentalRSC: true,

apps/dashboard/next.config.ts

@@ -115,9 +115,6 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
 
 const baseNextConfig: NextConfig = {
-  compiler: {
-    emotion: true,
-  },
   eslint: {
     ignoreDuringBuilds: true,
   },

apps/dashboard/package.json

@@ -1,10 +1,5 @@
 {
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/styled-system": "^2.9.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.11",
@@ -36,11 +31,9 @@
     "abitype": "1.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "color": "5.0.0",
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
-    "framer-motion": "12.23.0",
     "fuse.js": "7.1.0",
     "input-otp": "^1.4.1",
     "ioredis": "^5.6.1",
@@ -85,7 +78,6 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.6",
-    "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "4.0.1",
     "@next/bundle-analyzer": "15.3.5",
     "@next/eslint-plugin-next": "15.3.5",
@@ -127,17 +119,15 @@
     "dev": "next dev --turbopack",
     "fix": "biome check ./src --fix && eslint ./src --fix",
     "format": "biome format ./src --write",
-    "gen:theme-typings": "chakra-cli tokens src/chakra/theme/index.ts",
     "knip": "knip",
     "lint": "biome check ./src && knip && eslint ./src",
     "playwright": "playwright test",
     "postbuild": "next-sitemap",
-    "postinstall": "pnpm run gen:theme-typings",
     "preinstall": "npx only-allow pnpm",
     "start": "next start",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc --noEmit",
     "update-checkly": "npx checkly deploy"
   },
   "version": "3.0.0"
-}
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx

@@ -1,5 +1,4 @@
 import { DeprecatedAlert } from "@app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/DeprecatedAlert";
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import type { SidebarLink } from "@/components/blocks/Sidebar";
@@ -36,7 +35,7 @@ export function ContractPageLayout(props: {
   } = props;
 
   return (
-    <ChakraProviderSetup>
+    <div>
       <div className="border-border border-b py-8">
         <div className="container flex flex-col gap-4">
           <div className="flex flex-col justify-between gap-4 md:flex-row">
@@ -67,6 +66,6 @@ export function ContractPageLayout(props: {
         {props.children}
         <div className="h-20" />
       </SidebarLayout>
-    </ChakraProviderSetup>
+    </div>
   );
 }