Migrate from Mantine to Tailwind CSS v4 + shadcn/ui

app/.storybook/preview.tsx

@@ -1,12 +1,6 @@
-import '@mantine/core/styles.css';
+import '../src/app.css';
 
-import React, { useEffect } from 'react';
-import { addons } from '@storybook/preview-api';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
-import { MantineProvider, useMantineColorScheme } from '@mantine/core';
-import { theme } from '../src/theme';
-
-const channel = addons.getChannel();
+import React from 'react';
 
 export const parameters = {
   layout: 'fullscreen',
@@ -18,19 +12,4 @@ export const parameters = {
   },
 };
 
-function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
-  const { setColorScheme } = useMantineColorScheme();
-  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
-
-  useEffect(() => {
-    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
-    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
-  }, [channel]);
-
-  return children;
-}
-
-export const decorators = [
-  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
-  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
-];
+export const decorators = [(renderStory: any) => <>{renderStory()}</>];

app/calculator.html

@@ -5,7 +5,9 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-2YHG89FY0N"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() {
+        dataLayer.push(arguments);
+      }
       gtag('js', new Date());
       gtag('config', 'G-2YHG89FY0N');
     </script>

app/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": "tw"
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "tabler"
+}

app/eslint.config.js

@@ -1,15 +1,30 @@
-import mantine from 'eslint-config-mantine';
+import eslint from '@eslint/js';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  ...mantine,
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  jsxA11y.flatConfigs.recommended,
   { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', './.storybook/main.ts', 'src/_archived/**'] },
   {
     files: ['**/*.story.tsx'],
     rules: { 'no-console': 'off' },
   },
   {
+    // ESLint rules (previously from eslint-config-mantine)
     rules: {
+      'array-callback-return': 'error',
+      'no-duplicate-imports': 'error',
+      'no-var': 'error',
+      'no-self-compare': 'error',
+      'no-template-curly-in-string': 'error',
+      curly: 'error',
+      'default-case': 'off',
+      'default-case-last': 'error',
+      'dot-notation': 'error',
+      'no-alert': 'error',
       'no-console': [
         'warn',
         {
@@ -38,6 +53,94 @@ export default tseslint.config(
           ],
         },
       ],
+      'no-else-return': 'error',
+      'no-eval': 'warn',
+      'no-lonely-if': 'error',
+      'no-multi-assign': 'error',
+      'no-multi-str': 'error',
+      'no-param-reassign': 'error',
+      'no-return-assign': 'error',
+      'no-script-url': 'error',
+      'no-sequences': 'error',
+      'no-throw-literal': 'error',
+      'no-unneeded-ternary': 'error',
+      'no-useless-call': 'error',
+      'no-useless-constructor': 'error',
+      'no-useless-return': 'error',
+      'object-shorthand': 'error',
+      'operator-assignment': ['error', 'always'],
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'error',
+      'prefer-exponentiation-operator': 'error',
+      'prefer-object-has-own': 'error',
+      'prefer-promise-reject-errors': 'error',
+      'prefer-object-spread': 'error',
+      'prefer-template': 'error',
+      yoda: 'error',
+      radix: 'error',
+      eqeqeq: ['error', 'smart'],
+      'no-undef': 'off',
+    },
+  },
+  {
+    // TypeScript ESLint rules
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/consistent-generic-constructors': 'error',
+      '@typescript-eslint/method-signature-style': ['error', 'property'],
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/lines-between-class-members': 'off',
+      '@typescript-eslint/indent': 'off',
+      '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/comma-dangle': 'off',
+      '@typescript-eslint/no-redeclare': 'off',
+      '@typescript-eslint/no-use-before-define': 'off',
+      '@typescript-eslint/no-loop-func': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'none',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  {
+    // React rules
+    plugins: { react },
+    settings: { react: { version: 'detect' } },
+    rules: {
+      'react/button-has-type': 'error',
+      'react/jsx-boolean-value': 'error',
+      'react/jsx-curly-brace-presence': ['error', 'never'],
+      'react/jsx-fragments': ['error', 'syntax'],
+      'react/jsx-no-comment-textnodes': 'error',
+      'react/jsx-no-duplicate-props': 'error',
+      'react/jsx-no-target-blank': 'error',
+      'react/no-children-prop': 'error',
+      'react/no-deprecated': 'error',
+      'react/no-find-dom-node': 'error',
+      'react/no-string-refs': 'error',
+      'react/self-closing-comp': 'error',
+      'react/void-dom-elements-no-children': 'error',
+    },
+  },
+  {
+    // JSX A11y overrides
+    rules: {
+      'jsx-a11y/no-autofocus': 'off',
+      'jsx-a11y/control-has-associated-label': 'off',
+      'jsx-a11y/mouse-events-have-key-events': 'off',
+      'jsx-a11y/label-has-for': 'off',
+      'jsx-a11y/anchor-is-valid': 'off',
+      'jsx-a11y/label-has-associated-control': 'off',
+      'jsx-a11y/anchor-has-content': 'off',
     },
   }
 );

app/package.json

@@ -30,22 +30,25 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "8.1.2",
-    "@mantine/dates": "^8.1.2",
-    "@mantine/hooks": "8.1.2",
     "@normy/react-query": "^0.20.0",
     "@policyengine/design-system": "*",
     "@reduxjs/toolkit": "^2.8.2",
     "@tabler/icons-react": "^3.34.0",
+    "@tailwindcss/vite": "^4.2.0",
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.83.0",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.23.24",
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.13",
     "jsonp": "^0.2.1",
+    "lucide-react": "^0.575.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^9.0.0",
@@ -59,6 +62,8 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.0",
     "wordwrapjs": "^5.1.1"
   },
   "devDependencies": {
@@ -83,13 +88,11 @@
     "@vitejs/plugin-react": "^4.5.2",
     "concurrently": "^9.1.2",
     "eslint": "^9.29.0",
-    "eslint-config-mantine": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.5",
-    "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.5.3",
     "prop-types": "^15.8.1",

app/postcss.config.cjs

@@ -1,13 +1,12 @@
 module.exports = {
   plugins: {
-    'postcss-preset-mantine': {},
     'postcss-simple-vars': {
       variables: {
-        'mantine-breakpoint-xs': '36em',
-        'mantine-breakpoint-sm': '48em',
-        'mantine-breakpoint-md': '62em',
-        'mantine-breakpoint-lg': '75em',
-        'mantine-breakpoint-xl': '88em',
+        'breakpoint-xs': '36em',
+        'breakpoint-sm': '48em',
+        'breakpoint-md': '62em',
+        'breakpoint-lg': '75em',
+        'breakpoint-xl': '88em',
       },
     },
   },

app/public/assets/posts/encode-policy-multi-agent-ai/index.html

@@ -5,11 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Automating Tax and Benefit Policy Modeling with Multi-Agent AI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap"
+      rel="stylesheet"
+    />
     <script type="module" crossorigin src="./assets/index-DC8RyDPP.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BJx1p784.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BJx1p784.css" />
   </head>
   <body>
     <div id="root"></div>

app/src/CalculatorApp.tsx

@@ -2,19 +2,17 @@
  * Calculator App (app.policyengine.org)
  * Interactive policy simulation and analysis
  */
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
+import './app.css';
 
 import { QueryNormalizerProvider } from '@normy/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Provider } from 'react-redux';
-import { MantineProvider } from '@mantine/core';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { CalculatorRouter } from './CalculatorRouter';
 import { AppProvider } from './contexts/AppContext';
 import { CalcOrchestratorProvider } from './contexts/CalcOrchestratorContext';
 import { store } from './store';
-import { policyEngineTheme } from './theme';
 import { cacheMonitor } from './utils/cacheMonitor';
 
 const queryClient = new QueryClient({
@@ -31,21 +29,21 @@ export default function CalculatorApp() {
   return (
     <AppProvider mode="calculator">
       <Provider store={store}>
-        <MantineProvider theme={policyEngineTheme}>
-          <QueryNormalizerProvider
-            queryClient={queryClient}
-            normalizerConfig={{
-              devLogging: import.meta.env.DEV,
-            }}
-          >
-            <QueryClientProvider client={queryClient}>
+        <QueryNormalizerProvider
+          queryClient={queryClient}
+          normalizerConfig={{
+            devLogging: import.meta.env.DEV,
+          }}
+        >
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
               <CalcOrchestratorProvider>
                 <CalculatorRouter />
                 <ReactQueryDevtools initialIsOpen={false} />
               </CalcOrchestratorProvider>
-            </QueryClientProvider>
-          </QueryNormalizerProvider>
-        </MantineProvider>
+            </TooltipProvider>
+          </QueryClientProvider>
+        </QueryNormalizerProvider>
       </Provider>
     </AppProvider>
   );

app/src/WebsiteApp.tsx

@@ -2,17 +2,15 @@
  * Website App (policyengine.org)
  * Homepage, blog, team, and embedded calculators
  */
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
+import './app.css';
 
 import { QueryNormalizerProvider } from '@normy/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Provider } from 'react-redux';
-import { MantineProvider } from '@mantine/core';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { AppProvider } from './contexts/AppContext';
 import { store } from './store';
-import { policyEngineTheme } from './theme';
 import { cacheMonitor } from './utils/cacheMonitor';
 import { WebsiteRouter } from './WebsiteRouter';
 
@@ -31,19 +29,19 @@ export default function WebsiteApp() {
   return (
     <AppProvider mode="website">
       <Provider store={store}>
-        <MantineProvider theme={policyEngineTheme}>
-          <QueryNormalizerProvider
-            queryClient={queryClient}
-            normalizerConfig={{
-              devLogging: true,
-            }}
-          >
-            <QueryClientProvider client={queryClient}>
+        <QueryNormalizerProvider
+          queryClient={queryClient}
+          normalizerConfig={{
+            devLogging: true,
+          }}
+        >
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
               <WebsiteRouter />
-              <ReactQueryDevtools initialIsOpen={false} />
-            </QueryClientProvider>
-          </QueryNormalizerProvider>
-        </MantineProvider>
+            </TooltipProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </QueryClientProvider>
+        </QueryNormalizerProvider>
       </Provider>
     </AppProvider>
   );